el-date-picker限制日期选择范围

2022年01月15日 阅读数:2
这篇文章主要向大家介绍el-date-picker限制日期选择范围,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

el-date-picker限制日期选择范围


el-date-picker 限制日期选择范围。vue

  • 组件 🪶code

    <el-date-picker
         v-model="dateRange"
         type="daterange"
         value-format="yyyy-MM-dd"
         placeholder="请选择日期"
         range-separator="至"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         // 经过这里限制时间选择范围,必须写在 data() 数据中的返回值
         :picker-options="setDateRange"
    ></el-date-picker>
    
  • 逻辑 🪶orm

    data() {
        return {
            dateRange:[],
            // 设置可选择的时间段,*** 必须在 data 返回数据 ***
            setDateRange: {
                disabledDate: time => {
                    // 只能选择当前 1 年内的时间
                    const year = 365 * 24 * 3600 * 1000;
                    // 只能选择当前 1 月的时间
                    const month = 30 * 24 * 3600 * 1000;
                    // 只能选择当前 1 周的时间
                    const week = 7 * 24 * 3600 * 1000;
                    // 返回小于当前日期并近【1年】【1月】【1周】内的日期
                    // 注意:这是从当前日期开始往前算,若是当前日期可选的话,不要写【-8.64e7】
                    return time.getTime() > Date.now() || time.getTime() < (Date.now() - 8.64e7) - year;
                    // 禁用今天以前的日期【当前天可选】
                    return time.getTime() < Date.now() - 8.64e7;
                     // 禁用今天以前的日期【当前天不可选】
                    return time.getTime() < Date.now();
                    // 禁用今天以后的日期【当前天不可选】
                    return time.getTime() > Date.now() - 8.64e7;
                    // 禁用今天以后的日期【当前天可选】
                    return time.getTime() > Date.now();
                }
            },
        }
    }