ElementUI 日期选择器 datepicker选择范围限制

ElementUI 日期选择器 datepicker选择范围限制

在使用 el-date-picker 的时候,经常会对选择的时间进行一定限制,所以今天就总结了一些范围

1、第一步 给 el-date-picker 组件添加 picker-options 属性,并绑定 对应数据 pickerOptions

在这里插入图片描述

2、对绑定的数据进行限制

单个选择框的限制

2.1 设置今天及最近一年内的日期(包含今天)

data(){
return {
pickerOptions:{
 disabledDate(time){
   let nowDate = (new Date()).toString()  // 当前时间转字符串
   let nowDateYear = (new Date()).getFullYear()  // 当前时间的年份
   let oneYearAgoDate = nowDate.replace(nowDateYear,nowDateYear-1)  //字符串年份替换为一年前
   let oneYear = new Date(oneYearAgoDate).getTime()  //一年前字符串转为时间戳
   return time.getTime() > Date.now() || time.getTime() < oneYear
 }},}}

2.2 设置今天及今天之后的日期

data(){
return {
pickerOptions:{
 disabledDate(time){
   return time.getTime() < Date.now() - 8.64e7;
 }},}}

2.3 设置今天及今天以前的日期

data(){
return {
pickerOptions:{
 disabledDate(time){
   return time.getTime() > Date.now() - 8.64e7;
 }},}}

2.4 设置选择今天之后的日期(不包含当天时间)

data(){
return {
pickerOptions:{
 disabledDate(time){
   return time.getTime() < Date.now();
 }},}}

2.5 选择今天之前的时间(不包含当天时间)

data(){
return {
pickerOptions:{
 disabledDate(time){
   return time.getTime() > Date.now();
 }},}}

2.6 设置选择三个月之前到今天的日期

data(){
return {
pickerOptions:{
 disabledDate(time){
	let nowDate = (new Date()).getTime();
	let three = 90*24*3600*1000;
	let threeMonths = nowDate - three;
		return time.getTime() > Date.now() || time.getTime() < threeMonths
 }},}}

两个日期选择框的限制

3.1 设置开始时间不能大于结束时间 (且只能选择当前时间之前的日期)

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();
            }
        }
    }    
}

3.2 设置开始时间不能大于结束时间(可以选择所有日期)

data(){
    return {
        pickerOptions0: {
            disabledDate: (time) => {
                if (this.value2) {
                   return time.getTime() > this.searchForm.endTime
                }
            }
        },
        pickerOptions1: {
            disabledDate: (time) => {
                return time.getTime() < this.searchForm.startTime
            }
        }
    }    
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值