el-data-picker禁用时间(vue2 vue3)

console.log('D')

于 2024-07-30 16:51:38 发布

阅读量44

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/i_am_father_for_/article/details/140800922

版权

如果要用到跨选时间禁用（不能选择时间范围超过三个月、半年、多少天等，选择了开始日期时开始判断）

vue2:

<el-date-picker
    size="mini"
    v-model="timeArr"
    type="daterange"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd"
    style="width: 220px"
    :picker-options="pickerOptions"
    @change="onChangeTime"
    @focus="onDateFocus"
>
</el-date-picker>



data:{
    pickerObj: {},
    pickerOptions: {
         onPick: this.getPickDate,
         disabledDate: this.disabledDate,
    },
}  

methods:{
        getPickDate(e) {
            this.pickerObj = e;
        },
        disabledDate(time) {
          let authStart = dayjs(this.user.startDate, "YYYY-MM-DD").format("YYYY-MM-DD");
          let authEnd = dayjs(this.user.endDate, "YYYY-MM-DD").format("YYYY-MM-DD");
          const { minDate, maxDate } = this.pickerObj;
          if (minDate) {
                const diff = Math.abs(minDate.getTime() - time.getTime());
                if (
                    diff > 1000 * 3600 * 24 * 180 ||
                    dayjs(time).format("YYYY-MM-DD") < authStart ||
                    dayjs(time).format("YYYY-MM-DD") > authEnd
                ) {
                    return true;
                }
           } else {
             return dayjs(time).format("YYYY-MM-DD") < authStart || dayjs(time).format("YYYY-MM-DD") > authEnd;
            }
        },
}

vue3：

<el-date-picker
    @change="onChangePicker"
    @calendar-change="onChangePanel"
    style="width: 300px"
    class="data-time"
    v-model="state.timeArr"
    type="daterange"
    value-format="YYYY-MM-DD"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :disabledDate="disabledDate"
></el-date-picker>


const state = reactive({
    timeArr: [],
    sPickerTime: [], //选的日期数组 用于做跨选范围禁用
    timeRange: 31, //跨选天数
});


methods:{
const onChangePicker = (val) => {
    //点击叉号清空选中的time
    if (!val) {
        state.sPickerTime = [];
    }
};
// 选中日期
const onChangePanel = (time) => {
    state.sPickerTime = time || [];
};
// 禁止的日期范围
const disabledDate = (time) => {
    let minDate = state.sPickerTime?.length ? state.sPickerTime[0] : "";
    const currentDate = dayjs(time); // 获取当前日期
    const selectedDate = dayjs(minDate); // 获取选择的日期
    if (minDate) {
        // 计算选择日期与当前日期之间的差值（以天为单位）
        const diffInDays = selectedDate.diff(currentDate, "day");
        // 判断差值是否超过一月的范围
        if (Math.abs(diffInDays) > state.timeRange) {
            return true;
        }
    }
    return dayjs(time) > dayjs(); // 允许选择日期
};
}

大体思路如上按照需求修改对应代码即可