vant-ui 点击弹窗时间日期选择

vant-ui 点击弹窗时间日期选择

提交时为时间对象，后台返回为时间戳，使用filter过滤时间日期

在app.json或index.json中引入组件

“usingComponents”: {
“van-datetime-picker”: “@vant/weapp/datetime-picker/index”
}

<van-field
      label="出厂日期："
        readonly
        clickable
        input-align="left"
        name="picker"
  	    :value="item.manufactureDate | formatter"
        placeholder="年/月/日"
        @click="() => {if (operation != 'view') showPicker = true;}"
        :rules="[{ message: '请选择出厂日期' }]"
      />
     <van-popup v-model="showPicker" position="bottom">
           <van-datetime-picker
             type="date"
             @confirm="onConfirmManufactureDate"
             v-model="currentDate"
             @change="changeFn()"
             @cancel="cancelFn()"
             :minDate="minDate"
           />
     van-popup>

	export default {
     
		data(){
     
		return{
     
		showPicker: false,//出厂日期
		item{
     
		manufactureDate: '', //出厂日期
		},
		minDate: new Date(1970, 0, 1),定义一个最小时间
		currentDate: new Date(),//时间日期初始化
        changeDate: new Date(),//时间日期初始化
		}		
	},
	//时间过滤
	 filters: {
     
     formatter(date) {
     
       if (date == "" || date == null) {
     
         return;
       } else {
     
         date = new Date(date);
         return `${
       date.getFullYear()}/${
       date.getMonth() + 1}/${
       date.getDate()}`;//精确到具体时间的在后面继续拼加
       }
     }
   },
    methods: {
     
    changeFn() {
      // 值变化时触发
      this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    cancelFn(){
     
      this.showPicker = false;//弹框取消事件
    },
    //点击输入框确认选择时间
    onConfirmManufactureDate(date) {
     
      this.item.manufactureDate = date;
      this.showPicker = false;
    },
   }
}