美文网首页
el-date-picker限制选择日期

el-date-picker限制选择日期

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-12-05 10:48 被阅读0次
<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>
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();
            }
        },
    }
}

相关文章

网友评论

      本文标题:el-date-picker限制选择日期

      本文链接:https://www.haomeiwen.com/subject/jznbfdtx.html