上次分享了element plus 的时间选择组件的交互,这次分享一下Vant组件库的做法。需求是差不多的:1.选择的结束时间要在开始时间之后,用户不选择开始时间之前不能让他选择结束时间。废话不多说,上代码:
1.timeLimit.js文件
(这个需求在项目中有很多地方用到,所以时间格式这个js就单独提出来一个文件放在utils中)
export const checkTime = (val) => {
let myDate = null
if (val) {
myDate = new Date(val)
} else {
myDate = new Date()
}
const year = myDate.getFullYear()
const month = myDate.getMonth()
const date = myDate.getDate()
const hour = myDate.getHours()
const minutes = myDate.getMinutes()
return {
year,
month,
date,
hour,
minutes
}
};
2.HTML:
<van-popup v-model:show="showStartTime"
position="b