美文网首页
Element 日期选择器el-date-picker 限制时间

Element 日期选择器el-date-picker 限制时间

作者: Peter_2B | 来源:发表于2022-06-15 14:10 被阅读0次
   <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptions"
      @change="changeDate"
    >
    </el-date-picker>
 data() {
    let that = this;
    return {
      pickerOptions: {
        //限制只能选择一年时间
        disabledDate(time) {
          if (!that.dateRange || that.dateRange[0] == null)  return false;

          let chosedDate = new Date(that.dateRange[0]);
          let startyear = chosedDate.getFullYear() - 1;
          let endYear = chosedDate.getFullYear() + 1;
          let endDate =
            endYear +
            "-" +
            (chosedDate.getMonth() + 1) +
            "-" +
            chosedDate.getDate();
          let startDate =
            startyear +
            "-" +
            (chosedDate.getMonth() + 1) +
            "-" +
            chosedDate.getDate();
          let _endDate = new Date(endDate);
          let _startDate = new Date(startDate);
          //即大于开始时间小于结束时间
          return (
            time.getTime() > _endDate.getTime() ||
            time.getTime() < _startDate.getTime()
          );
        },
        onPick({maxDate, minDate}) {
          console.log('maxDate:', maxDate);
          //重新设置开始时间
          if (!minDate) {
            minDate = new Date();
          }
          that.dateRange = [minDate];
        },
      },

      dateRange: [],
    };
  },
  methods:{
    // 时间选择器切换
    changeDate(list) {
      if(!list)return;    // 点击叉号也会改变时间,需判断list是否为null
      this.activeTime = '';
      this.form.startTime = list[0];
      this.form.endTime = list[1];
      this.form.start = 1;
      this.search();
    },
  }

相关文章

网友评论

      本文标题:Element 日期选择器el-date-picker 限制时间

      本文链接:https://www.haomeiwen.com/subject/fgdxvrtx.html