I. Introduction
At work, you will encounter the date picker el-date-picker in elementUi. During the use, you may encounter a situation where you need to add a time range requirement when selecting a date. For example, the creation date must not be later. On the current date, the end date cannot be earlier than the start date, etc. If we are using el-date-picker’s type="daterange", we can better control the start and end selection ranges, but if we split the two dates into two, we need to configure the main ones separately
. The "picker-options" attribute of el-date-picker is used. Shortcut options need to be configured with shortcuts in the picker-options object. The disabled date is set through disabledDate and passed into the function.
2. Code
html part
<el-date-picker
v-model="startDate"
align="right"
type="date"
placeholder="选择开始日期"
:picker-options="startDisabled">
</el-date-picker>
<el-date-picker
v-model="endDate"
align="right"
type="date"
placeholder="选择结束日期"
:picker-options="endDisabled">
</el-date-picker>
js part
data() {
return {
//首先data里定义日期选择器关联的两个变量
startDate:"",
endDate:"",
// 然后定义不可选择限制
// 开始日期
startDisabled：{
disabledDate: (time) => {
// 首先判断是否选择了结束时间，如果选择了结束时间，那么开始时间不得晚于结束时间
if(this.endDate) {
return time.getTime() > new Date(this.endDate);
} else {
// 开始日期只能选择当天日期及之前
return time.getTime() >= Date.now();
}
}
},
endDisabled：{
disabledDate: (time) => {
// 首先判断是否选择了开始时间，如果选择了开始时间，那么结束时间不得早于开始时间
if(this.startDate) {
// 如果结束日期和开始日期不可以是同一天，就需要-86400000，如果可以，则不需要
return time.getTime() > new Date(this.startDate);
}
}
}
}
}
The renderings are as follows
The above code can simply implement two date pickers to select a time range. ① The start date must not be later than the current date and not later than the end date. ② The end date must not be earlier than the start date.
If there are other requirements for selecting dates, you can also modify them in the corresponding functions. For example, if the required start time can be selected from the day before the current date
// 此处继续使用上面data中定义的变量
// 开始日期
startDisabled：{
disabledDate: (time) => {
const start = 1 * 24 * 3600 * 1000 // 前一天
if(this.endDate) {
return time.getTime() > new Date(this.endDate)
} else {
return time.getTime() > Date.now() - start;
}
}
},
endDisabled：{
disabledDate: (time) => {
const start = 2 * 24 * 3600 * 1000 // 前一天
if(this.startDate) {
return time.getTime() < new Date(this.startDate);
} else {
return time.getTime() < Date.now() - start
}
}
}
What is mentioned above is the case of selecting only one time period for submission. You may also encounter situations where multiple time periods are selected.
multipleData:[{
startTime: "2023-09-04", endTime: "2023-09-06" }] // 定义一个储存多选时间段的数组
// 开始日期
startDisabled：{
disabledDate: (time) => {
let firstDisabled = ""
let secondDisabled = ""
if(this.endDate) {
firstDisabled = time.getTime() > new Date(this.endDate);
} else {
firstDisabled = time.getTime() >= Date.now();
}
this.multipleData.forEach((item, i) => {
secondDisabled = secondDisabled || (time.getTime() > new Date(item.startTime).getTime() - 86400000 && time.getTime() < new Date(this.endDate))
})
return firstDisabled || secondDisabled
}
},
endDisabled：{
disabledDate: (time) => {
let firstDisabled = ""
let secondDisabled = ""
if(this.startDate) {
firstDisabled = time.getTime() < new Date(this.startDate) - 86400000;
}
this.multipleData.forEach((item, i) => {
secondDisabled = secondDisabled || (time.getTime() > new Date(item.startTime).getTime() - 86400000 && time.getTime() < new Date(item.endTime))
})
return firstDisabled || secondDisabled
}
}
}
The effect is as follows.
The above code can only ensure that the previously selected date cannot be selected again, but the previous date and the subsequent date can be selected, which means that the previously selected date will be included. The suggestion at this time is to make individual judgments when submitting. Attached below is a code for judging whether the time period is repeated.
//data中定义数据
data(){
return {
multipleData: [{
startTime: "2023-09-04", endTime: "2023-09-06" }, {
startTime: "2023-09-08", endTime: "2023-09-16" }, {
startTime: "2023-09-14", endTime: "2023-09-17" }],
}
}
//methods中定义方法
methods:{
judgeTimes() {
let startArr = []
let endArr = []
this.multipleData.forEach(item => {
startArr.push(item.startTime ? new Date(item.startTime).getTime() : "")
endArr.push(item.endTime ? new Date(item.endTime).getTime() : "")
})
let sortArrS = startArr.sort()
let sortArrE = endArr.sort()
let flag = false
for (let i = 0; i < sortArrS.length; i++) {
if (i > 0) {
if (sortArrS[i] <= sortArrE[i - 1]) {
flag = true
}
}
}
if (flag) {
return false
} else {
return true
}
},
submit() {
if (!this.judgeTimes()) {
this.$message.warning("时间段重复")
} else {
this.$message.success("成功")
}
}
}
Determine whether there is a repeated time period based on the return value of the above function and give corresponding prompts
