微信小程序 picker 组件使用&&用mpvue开发时使用

一、微信小程序 picker 组件

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>

  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },

二、在mpvue中使用

<picker mode="date" :value="date" fields='day' @change="pickerChange"  class="change_date">
  <view class="picker">
    当前选择: {{date}}
  </view>
</picker>

(1)初始化date:‘2020-04-19’

  pickerChange: function (e) {
//与原生小程序本身不同，这里e.mp.detail.value拿到的是你选择的值
  this.date = e.mp.detail.value
},

(2)初始化日期为今天

<template>
	<div>
		<picker mode="date" :value="date" fields='day' @change="pickerChange" class="change_date" :start="pickerStart" end="2100-02-02">
			<view class="picker">
				当前选择: {{date}}
			</view>
		</picker>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				date: '2020-04-19',
				pickerStart: '2020-04-19'
			};
		},
		mounted() {
			// 设置时间
			let today = this.getToday();
			this.pickerStart = today
		},
		methods: {
			pickerChange: function(e) {
				//与小程序本身不同，这里e.mp.detail.value拿到的是你选择的值
				this.date = e.mp.detail.value
			},
			getToday() {
				let myDate = new Date();
				let myMonth = myDate.getMonth() + 1;
				if (myMonth < 10) {
					myMonth = '0' + myMonth; //补0
				}
				let mydate = myDate.getDate();
				if (myDate.getDate() < 10) {
					mydate = '0' + myDate.getDate(); //补0
				}
				let today = myDate.getFullYear() + '-' + myMonth + '-' + mydate;
				return today
		},
	},
};
</script>