Table of contents
Requirement 1: Select a date before today (divided into including today and excluding today)
Requirement 2: Set and select the date after today (divided into today and after today)
Requirement 3: Set and select a date within 30/60/90 to today
Chapter 2 Several scenarios in which the Element time and date selector limits the selection range
Requirement 1: Select a date before today (divided into including today and excluding today)
Requirement 2: Set and select the date after today (divided into today and after today)
Requirement 3: Set and select a date within 30/60/90 to today
Requirement: I recently received a requirement to use the Ant Design time and date selector component to only select the time before the current day, and prohibit selection after the current day. So the editor summarized some common methods of this component based on this requirement and implemented it in his own way.
Chapter 1 Several scenarios in which the Ant Design time and date selector limits the selection range
- code show as below
<a-date-picker
style="width: 400px"
@change="onDataChange"
:disabled-date="disabledDate"
placeholder="请选择日期"/>
export default {
data () {
return {
deathTime: ''
}
},
components: {
},
methods: {
// 日期变化时调用
onDataChange (date, dateString) {
console.log('data', date, dateString)
this.deathTime = dateString
},
// 禁止日期选择的函数
disabledDate (value) {
console.log(value)
return new Date(value).getTime() > Date.now()
}
}
}- Check out our method details here
Requirement 1: Select a date before today (divided into including today and excluding today)
- 1.Including today
// 禁止日期选择的函数(替代前面该函数即可)
disabledDate (value) {
// value:为当前时间
console.log(value)
// 意思是：将返回的value时间戳大于当前时间的时间戳如果为true，禁止选择
return new Date(value).getTime() > Date.now()
}(Here the editor outputs the value, and you can see that there are many times. The editor's guess is that there are many times returned by a certain method inside the plug-in, and then compared with the current time we wrote to determine which dates are prohibited from selection. When compared When true is returned, a method inside the plug-in can know where to start prohibiting date selection) --> You can ignore it, it does not affect our development. If anyone knows, please leave a message in the comment area!
Effect: Available today and before today
- 2.Excluding today
disabledDate (value) {
console.log('value', value)
return new Date(value).getTime() > Date.now() - 8.64e7
}
/*
注意一下这里：8.64e7是科学计数法的表示形式,时间戳ms的形式
8.64e7 = 8.64 * 10^7 = 24 * 60 * 60 * 1000 (ms)
*/Effect: Available before today
Requirement 2: Set and select the date after today (divided into today and after today)
- 1.Including today
disabledDate (value) {
return new Date(value).getTime() < Date.now() - 8.64e7
}
- 2.Excluding today
disabledDate (value) {
console.log('value', value)
return new Date(value).getTime() < Date.now()
}
Requirement 3: Set and select a date within 30/60/90 to today
disabledDate (value) {
const curDate = new Date().getTime()
// 这里设置天数
const numMonth = 3 * 30 * 24 * 3600 * 1000
const threeMonths = curDate - numMonth
return new Date(value).getTime() > Date.now() || new Date(value).getTime() < threeMonths
}Summarize
- Through the above three requirements, I believe we have a certain understanding of how the date picker controls the selection range. If there are any other special requirements, we can also implement them.
Chapter 2 Several scenarios in which the Element time and date selector limits the selection range
Notice
The difference between Element and Ant Design components, as shown below
In the Elemen component, the function that prohibits date selection is under pickeOption, not directly a configuration item. The code is as follows:
<el-date-picker
v-model="time"
type="date"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
Add the pickerOptions object under the data configuration item and set the prohibited date range:
data () {
return {
pickerOptions: {
disabledDate (value) {
return new Date(value).getTime() > Date.now()
}
}
}
},Okay, so far the rest of the content is the same as Ant Design!
Requirement 1: Select a date before today (divided into including today and excluding today)
data () {
return {
pickerOptions: {
disabledDate (value) {
return new Date(value).getTime() > Date.now()
// return new Date(value).getTime() > Date.now() - 8.64e7
}
}
}
}, 
Requirement 2: Set and select the date after today (divided into today and after today)
data () {
return {
pickerOptions: {
disabledDate (value) {
return new Date(value).getTime() < Date.now() - 8.64e7
// return new Date(value).getTime() < Date.now()
}
}
}
},
Requirement 3: Set and select a date within 30/60/90 to today
data () {
return {
pickerOptions: {
disabledDate (value) {
const curDate = new Date().getTime()
// 这里设置天数
const numMonth = 3 * 30 * 24 * 3600 * 1000
const threeMonths = curDate - numMonth
return new Date(endValue).getTime() > Date.now() || new Date(endValue).getTime() < threeMonths
}
}
}
},