使用vant UI实现时间段选择
需求：选择时间段或者选择日期，时间段不允许跨月，选完开始时间后，结束时间可选 “开始日期~当月最后一天”
格式：2023-01-01~2023-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-icon name="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: new Date(2020, 0, 1),maxDate: new Date(2099, 0, 31),formData: {taskDate: moment(new Date()).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 = new Date(mindateArr[0], mindateArr[1] - 1, mindateArr[2]);// 这个月最后一天let maxdate = moment(e[0]).endOf("month").format("YYYY-MM-DD");let maxdateArr = maxdate.split("-");this.maxDate = new Date(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 = new Date(2020, 0, 1);this.maxDate = new Date(2099, 0, 31);}}