使用vant UI实现时间段选择

需求：选择时间段或者选择日期，时间段不允许跨月，选完开始时间后，结束时间可选 "开始日期~当月最后一天"

格式：2023-01-01~2023-01-23 或者 2023-01-01

这里使用vantUI

示例代码:

html 复制代码

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

示例代码:

js 复制代码

  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);
      }
    }