vant 组件Popup和DatetimePicker 在小程序的结合使用

如图，开始时间和结束时间复用一个时间组件，在每次点击选择时间时，应默认选中上次选择的时间，所以开始时间和结束时间应区分开来。

因为设计图的时间格式yyyy-mm-dd，获取的时间格式是 yyy/mm/dd，注意时间的转换处理，中value格式为毫秒，否则会报错

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

"usingComponents": {"van-datetime-picker": "@vant/weapp/datetime-picker/index","van-popup": "@vant/weapp/popup/index"
}

wxml 中 插入组件

      时间：{{starData}}至  {{lastData}}

js中

Page({data: {show: false,starTag: true,starData:'2021-01-01',lastData:'2021-01-02',selDate: new Date().getTime(),minDate:  new Date('2021,1,1').getTime(),formatter(type, value) {if (type === 'year') {return `${value}年`;}if (type === 'month') {return `${value}月`;}return value;},},onShow() {this.getTabBar().init();},onLoad: function () {},starPopup() {this.setData({ show: true, starTag: true,selDate: this.strToData(this.data.starData)});},lastPopup() {this.setData({ show: true, starTag: false,selDate: this.strToData(this.data.lastData)});},onClose() {this.setData({ show: false });},cancelData(){this.onClose()},confirmData(event) {let selData = new Date(event.detail).toLocaleDateString()// console.log(event.detail,selData)if(this.data.starTag){this.setData({starData: this.dataToStr(selData),});}else{this.setData({lastData: this.dataToStr(selData),});}this.onClose()},
//日期格式转字符窜dataToStr (selData) { let selDataArr = selData.split("/")let strArr = selDataArr.map(function(value){if(value.length == 1){value = 0 + value}return value});return strArr.join("-")
},
//字符窜格式转毫秒
strToData(strData){//转换数组再转字符窜let formatData = strData.split("-").join(',')return new Date(formatData).getTime()
},
})