Element Ui 日期控件如何限定可选择日期范围_elementui pickeroptions 指定日期范围

Element Ui 日期控件如何限定可选择日期范围

常用的几种限制日期的使用情景：

一、首选是单个日期选择框：

组件代码如下：

<el-date-picker
   v-model="value1"
   type="date"
   placeholder="选择日期"
   :picker-options="pickerOptions">
</el-date-picker>
1
2
3
4
5
6

注意：pickerOptions这个要写到data()里

情景1: 设置选择今天以及今天之前的日期

data () {
	return {
		pickeroptions: {
			disabledDate (time) {
				return time.getTime() > Date.now() - 8.64e6
			}
		}
	}
}
1
2
3
4
5
6
7
8
9

情景2：设置选择今天以及今天以后的日期

data () {
	return {
		pickeroptions: {
			disabledDate (time) {
				return time.getTime() < Date.now() - 8.64e7
			}
		}
	}
}
1
2
3
4
5
6
7
8
9

情景3：设置选择今天之前的日期(不包含今天）

data () {
	return {
		pickerOptions: {
			disabledDate (time) {
				return time.getTime() > Date.now() - 8.64e7
			}
		}
	}
}
1
2
3
4
5
6
7
8
9

情景4：设置选择今天之后的日期（不包含今天）

data () {
	return {
		pickeroptions: {
			disabledDate (time) {
				return time.getTime() < Date.now() - 8.64e6
			}
		}
	}
}
1
2
3
4
5
6
7
8
9

情景5：设置选择三个月之前到今天的日期（含当天）（可灵活设置前多久的日期到今天日期，修改函数里three数据即可实现。90代表90天，更换可灵活设置区间）

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() - 8.64e6 || time.getTime() < threeMonths;
          }
        },  
   }     
}
1
2
3
4
5
6
7
8
9
10
11
12

情景6：设置选择三个月之前到今天的日期（不含当天）（可灵活设置前多久的日期到今天日期，修改函数里three数据即可实现。90代表90天，更换可灵活设置区间）

data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() - 8.64e7 || time.getTime() < threeMonths;
          }
        },  
   }     
}
1
2
3
4
5
6
7
8
9
10
11
12

二、可选两个日期的组件

<el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
</el-date-picker>
1
2
3
4
5
6
7
8
9
10

情景7：选择日期区间为今天和今天之前的日期。（直接参考情景1，直接按照单一输入框即可判断。代码如下。参考前面单选框情景可实现第一类型中的所有情景，代码一致即可。后续代码不赘述了。）

data () {
	return {
		pickeroptions: {
			disabledDate (time) {
				return time.getTime() > Date.now() - 8.64e6
			}
		}
	}
}
1
2
3
4
5
6
7
8
9

注意：type="daterange"类型的直接按照单一的输入框为准就行。只不过初始化绑定字段由字符串变为数组形式即可。

三、两个输入框，两个组件拼接。type="date"类型。

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>
1
2
3
4
5
6
7
8
9
10
11
12

情景8：限制结束日期不能早于开始日期

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();
                }
            },
    }      
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

希望对小伙伴们的开发有帮助，喜欢的话可以收藏一下哦。一起加油吧！