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;
},
}
}