需求:要求日期可选时间从今日(不包括今天)之后的三天开始选择。
实现方式:Vue + vant 的 Calendar组件
代码
首先引入 Calendar 组件就不写了,直接下一步:
<van-cell class="tl" title="期望发货日期" :value="date" @click="show2 = true" is-link/>
<van-calendar v-model:show="show2" @confirm="onConfirm1" :min-date="minDate"/>
export default {
components: {
[Dialog.Component.name]: Dialog.Component,
},
setup() {
const state = reactive({
minDate: new Date(new Date().setDate(new Date().getDate() + 4)), // 这里是重点
date: '选择日期',
show2: false,
onConfirm1(value) {
state.date = `${value.getFullYear()}-${value.getMonth() + 1}-${value.getDate()}`;
}
})
}
}