FCAT

Appearance

element-ui DatePicker 日期选择器限制可选择的范围 ​

html
<el-date-picker v-model="value_1" type="date" :picker-options="pickerOptions">
</el-date-picker>
<el-date-picker v-model="value_1" type="date" :picker-options="pickerOptions">
</el-date-picker>
js
export default {
    data() {
        value_1:'',
        pickerOptions: {
            disabledDate(time) {
                const disabledDate_ = new Date("2023-05-01")
                return time.getTime() > disabledDate_.getTime()
            }
        },
    },
    methods: {
        time() {
            let date = '2023-01-01'
            return date
        }
    }
}
export default {
    data() {
        value_1:'',
        pickerOptions: {
            disabledDate(time) {
                const disabledDate_ = new Date("2023-05-01")
                return time.getTime() > disabledDate_.getTime()
            }
        },
    },
    methods: {
        time() {
            let date = '2023-01-01'
            return date
        }
    }
}

动态传入限制范围 ​

html
<el-date-picker v-model="value_1" type="date" :picker-options="pickerOptions">
</el-date-picker>
<el-date-picker v-model="value_1" type="date" :picker-options="pickerOptions">
</el-date-picker>

这里将需要的picker-options值放到计算属性中，可以访问实例对象。

js
export default {
    data() {
        value_1:'',
    },
    computed: {
        pickerOptions() {
            let _this = this
            return {
                disabledDate(time) {
                    return time.getTime > new Date(_this.time()).getTime()
                }
            }
        }
    },
    methods: {
        time() {
            let date = '2023-01-01'
            return date
        }
    }
}
export default {
    data() {
        value_1:'',
    },
    computed: {
        pickerOptions() {
            let _this = this
            return {
                disabledDate(time) {
                    return time.getTime > new Date(_this.time()).getTime()
                }
            }
        }
    },
    methods: {
        time() {
            let date = '2023-01-01'
            return date
        }
    }
}

两个date-picker，限制结束日期不能早于开始日期 ​

html
<el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>
<el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>
js
data(){
    return {
         pickerOptions0: {
            disabledDate: (time) => {
                if (this.value2 != "") {
                    return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
            }
        },
        pickerOptions1: {
            disabledDate: (time) => {
                return time.getTime() < this.value1 || time.getTime() > Date.now();
            }
        },
    }      
}
data(){
    return {
         pickerOptions0: {
            disabledDate: (time) => {
                if (this.value2 != "") {
                    return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
            }
        },
        pickerOptions1: {
            disabledDate: (time) => {
                return time.getTime() < this.value1 || time.getTime() > Date.now();
            }
        },
    }      
}