使用vant UI实现时间段选择

需求：选择时间段或者选择日期，时间段不允许跨月，选完开始时间后，结束时间可选 “开始日期当月最后一天”
格式：2023-01-012023-01-23 或者 2023-01-01
这里使用vantUI

示例代码:

<van-fieldlabel="日期":placeholder="formData.taskDate"v-model="formData.taskDate"input-align="right":rules="[{ required: true, message: '必填' }]"readonlylabel-width="172"@click-input="(showDatePick = true)"><template#right-icon><van-iconname="arrow-down"@click="showDatePick = true"/></template></van-field><!-- 日期选择 start --><van-calendarv-model="showDatePick"@select="onSelectDate"@confirm="dateConfirm"type="range":min-date="minDate":max-date="maxDate"allow-same-day/><!-- 日期选择 end -->

示例代码:

data(){return{minDate:newDate(2020,0,1),maxDate:newDate(2099,0,31),formData:{taskDate:moment(newDate()).format("YYYY-MM-DD"),},showDatePick:false,//显示日期pop}},methods:{// 限制可选日期，不可跨月onSelectDate(e){// 这个月第一天let mindate =moment(e[0]).startOf("month").format("YYYY-MM-DD");let mindateArr = mindate.split("-");this.minDate =newDate(mindateArr[0], mindateArr[1]-1, mindateArr[2]);// 这个月最后一天let maxdate =moment(e[0]).endOf("month").format("YYYY-MM-DD");let maxdateArr = maxdate.split("-");this.maxDate =newDate(maxdateArr[0], maxdateArr[1]-1, maxdateArr[2]);},//点击确认，格式化日期格式dateConfirm(date){this.showDatePick =false;let date1 =this.formatDate(date[0]);let date2 =this.formatDate(date[1]);if(date1==date2){this.formData.taskDate = date1;}else{this.formData.taskDate =date1+"~"+date2;}},},//监听数据变化，是否关闭时间选择弹框。初始化可选日期watch:{showDatePick:{handler(val){this.minDate =newDate(2020,0,1);this.maxDate =newDate(2099,0,31);}}