Element UI DatePicker 时间跨度限制在同一个月内

Posted on 2022-03-08 17:08  书中枫叶  阅读(607)  评论(0编辑  收藏  举报
<el-date-picker
    :picker-options="pickerOptions"
    v-model="rangeTime"
    type="daterange"
    value-format="timestamp"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</el-date-picker>

data: function() {
    return {
        selectData: '',
        pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
                this.selectData = minDate.getTime()
                if (maxDate) {
                    // 选择了最大日期后,清除已选日期,解除限制。
                    this.selectData = ''
                }
            },
            disabledDate: (time) => {
                // 是否禁用日期选择
                if (this.selectData) {
                    let date = new Date(this.selectData)
                    // true:不可以选择该日期;false:可以选择该日期。
                    // 大于或者小于本月的日期被禁用
                    return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
                } else {
                    return false;
                }
            }
        }
    }
}


 

 

 

Copyright © 2024 书中枫叶
Powered by .NET 8.0 on Kubernetes