elementUI 中日期选择器控制只能选择三个月的范围

645 阅读1分钟

DOM

   <el-date-picker
    v-model="timeRange"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="datepickerOptions"> 

data: datepickerOptions

datepickerOptions: {
        onPick: ({ maxDate, minDate }) => {               
            this.choiceDate = minDate.getTime()               
            if (maxDate) this.choiceDate = ''               
        },               
        disabledDate: (time) => {               
            if (this.choiceDate) {              
                const one = 90 * 24 * 3600 * 1000               
                const minTime = this.choiceDate - one               
                const maxTime = this.choiceDate + one               
                return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now()                
            } else {                
                let curDate = new Date().getTime()               
                let three = 90 * 24 * 3600 * 1000              
                let threeMonths = curDate - three                
                return time.getTime() > Date.now() || time.getTime() < threeMonths 
            } 
        },
        shortcuts: [{
            text: '最近一周',
            onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
            }
        }, {
            text: '最近一个月',
            onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
            }
        }, {
            text: '最近三个月',
            onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
            }
        }]
    }