美文网首页
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