美文网首页
ElementUI el-date-picker 限制选中日期前

ElementUI el-date-picker 限制选中日期前

作者: RuffianMonkey丶 | 来源:发表于2020-08-31 18:28 被阅读0次
需求:

限制当前选中日期前后30天不可选,大于当天的不可选。

0.view

effectPictrue.png

1.template

      <el-date-picker
        v-model="rangeDate"
        type="daterange"
        range-separator="至"
        start-placeholder="交易开始日期"
        end-placeholder="交易结束日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        @change="pickerChange"
     ></el-date-picker>

2.data

    data() {
        return {
          currentDate: '', //当前选中的日期
          pickerOptions: {}, //因disabledDate和onPick在data里拿不到值,所以把方法扔到created了。
     }

3.created

    created() {
        this.pickerOptions.disabledDate = (time) => {
            if (this.currentDate !== '') { //默认大于当天不可选
                let tempTime = 3600 * 1000 * 24 * 30;
                let timer = new Date(this.currentDate).getTime(); //转换时间戳(当前选中的日期);
                let minTime = timer - tempTime; //前三十天
                let maxTime = timer + tempTime; //后三十天
                //time.getTime() < minTime  选中日期前三十天不可选
                //time.getTime() > Date.now() 大于当天不可选
                //time.getTime() > maxTime 选中日期后三十天不可选
                return time.getTime() < minTime || time.getTime() > Date.now() || time.getTime() > maxTime;
            }
            return time.getTime() > Date.now();
        }
        this.pickerOptions.onPick = ({ minDate }) => {
            this.currentDate = minDate.getTime(); //当前日期
            if (maxDate) {
              //如已选择结束日期重置当前选中,如有要求可在失去焦点时再重置一下,我就不贴代码了。
                this.currentDate = ''; 
            }
        }
    }

相关文章

网友评论

      本文标题:ElementUI el-date-picker 限制选中日期前

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