上次分享了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="bottom">
<van-datetime-picker v-model="currentDate"
type="datetime"
title="选择年月日"
@confirm="onStartConfirm"
@cancel="showStartTime = false" />
</van-popup>
<van-field v-model="form.endTime"
name="结束时间"
label="结束时间"
@click="clickEndTime "
placeholder="请选择结束时间">
<template #right-icon>
<van-image :src="require('@/assets/images/dateTime.png')"></van-image>
</template>
</van-field>
<van-popup v-model:show="showEndTime"
position="bottom">
<van-datetime-picker v-model="currentDate"
type="datetime"
title="选择年月日"
@confirm="onEndConfirm"
@cancel="showEndTime = false"
:min-date="minDateE" />
</van-popup>
3.js代码
//引用timeLimit.js文件
import { checkTime } from '@/utils/timeLimit'
//参数定义
const showStartTime = ref(false)
const showEndTime = ref(false)
const minDateE = ref() // 结束时间最小值
const currentDate = ref(new Date())
//点击完成开始时间时触发的事件
const onStartConfirm = (value) => {
form.value.startTime = moment(value).format('yyyy-MM-DD HH:mm:ss')
showStartTime.value = false
// 结束时间最小值
let timeObj = checkTime(form.value.startTime)
minDateE.value = new Date(
timeObj.year,
timeObj.month,
timeObj.date,
timeObj.hour,
timeObj.minutes
)
}
//点击完成结束时间时触发的事件
const onEndConfirm = (value) => {
form.value.endTime = moment(value).format('yyyy-MM-DD HH:mm:ss')
showEndTime.value = false
}
// 点击结束时间选框
const clickEndTime = () => {
//没有开始时间不能选结束时间
if (!form.value.startTime) {
toast('请先选择开始时间')
return
}
showEndTime.value = true
}
效果图：
选择的结束时间在开始时间之后
不选择开始时间之前不能选择结束时间
