It’s a very confusing situation. For the disabled time under the datetime type, the timestamp is disabled in pickerOptions, but the time division cannot be disabled.
Idea:
- disabledDate in pickerOptions disables overall date selection
- Disable time range through selectableRange
Disadvantage: still cannot disable the second range
// view interface
<el-date-picker
v-model="remindTime"
type="datetime"
placeholder="Select time"
value-format="timestamp"
:picker-options="pickerOptions"
/>
Set pickerOptions as a calculated attribute so that the time range can be changed in real time by updating the value of selectableRange.
computed: {<!-- -->
pickerOptions() {<!-- -->
return {<!-- -->
disabledDate: this.disabledDate,
selectableRange: this.selectableRange,
}
}
},
You need to monitor the value of remindTime so that you can know what time range is required for dynamic setting after the date.
watch: {<!-- -->
remindTime(newValue, oldValue) {<!-- -->
if(newValue == oldValue) {<!-- -->
return;
}
this.selectableRange = this.timeRange(newValue);
}
},
Finally, two methods are implemented in methods
// disabledDate controls the date selection range, for example, controls 30 days from today’s date
disabledDate(time) {<!-- -->
const currentDate = new Date();
const thirtyDaysLater = new Date();
thirtyDaysLater.setDate(currentDate.getDate() + 30);
return time.getTime() < (currentDate.getTime() - 60 * 60 * 1000 * 24) || time.getTime() > thirtyDaysLater.getTime();
},
// timeRange is used to calculate the current time to give the required time range. For example, if it is today's date, the setting can only be selected after the current hour and minute.
timeRange(time = null) {<!-- -->
const currentTime = new Date().getTime();
//dateFormat self-made method, used to convert timestamp into the string structure of 'YYYY-MM-DD HH:mm:ss'
const currentDate = dateFormat(currentTime, 'YYYY-MM-DD');
const currentTimeStr = dateFormat(currentTime, 'HH:mm:ss');
const formDate = time ? dateFormat(time, 'YYYY-MM-DD') : '';
// Prove that it is today's time
if(!time || currentDate == formDate) {<!-- -->
return [`${<!-- -->currentTimeStr} - 23:59:59`];
}
return ['00:00:00 - 23:59:59'];
},
The code for the overall structure is as follows:
<template>
<el-date-picker
v-model="remindTime"
type="datetime"
placeholder="Select time"
value-format="timestamp"
:picker-options="pickerOptions"
/>
</template>
<script>
import { dateFormat } from '@/utils';
export default {
data() {
return {
remindTime: null,
selectableRange: [],
}
},
computed: {
pickerOptions() {
return {
disabledDate: this.disabledDate,
selectableRange: this.selectableRange,
}
}
},
watch: {
remindTime(newValue, oldValue) {
if(newValue == oldValue) {
return;
}
this.selectableRange = this.timeRange(newValue);
}
},
methods: {
disabledDate(time) {
const currentDate = new Date();
const thirtyDaysLater = new Date();
thirtyDaysLater.setDate(currentDate.getDate() + 30);
return time.getTime() < (currentDate.getTime() - 60 * 60 * 1000 * 24) || time.getTime() > thirtyDaysLater.getTime();
},
timeRange(time = null) {
const currentTime = new Date().getTime();
const currentDate = dateFormat(currentTime, 'YYYY-MM-DD');
const currentTimeStr = dateFormat(currentTime, 'HH:mm:ss');
const formDate = time ? dateFormat(time, 'YYYY-MM-DD') : '';
if(!time || currentDate == formDate) {
return [`${currentTimeStr} - 23:59:59`];
}
return ['00:00:00 - 23:59:59'];
},
}
}
</script>
```It’s a very tricky situation. For the disabled time under the datetime type, the timestamp is disabled in pickerOptions, but the time and minute cannot be disabled.
Idea:
1. disabledDate in pickerOptions disables overall date selection
2. Disable the time range through selectableRange
**Disadvantage: still cannot disable the seconds range**
```vue
// view interface
<el-date-picker
v-model="remindTime"
type="datetime"
placeholder="Select time"
value-format="timestamp"
:picker-options="pickerOptions"
/>
Set pickerOptions as a calculated attribute so that the time range can be changed in real time by updating the value of selectableRange.
computed: {<!-- -->
pickerOptions() {<!-- -->
return {<!-- -->
disabledDate: this.disabledDate,
selectableRange: this.selectableRange,
}
}
},
You need to monitor the value of remindTime so that you can know what time range is required for dynamic setting after the date.
watch: {<!-- -->
remindTime(newValue, oldValue) {<!-- -->
if(newValue == oldValue) {<!-- -->
return;
}
this.selectableRange = this.timeRange(newValue);
}
},
Finally, two methods are implemented in methods
// disabledDate controls the date selection range, for example, controls 30 days from today’s date
disabledDate(time) {<!-- -->
const currentDate = new Date();
const thirtyDaysLater = new Date();
thirtyDaysLater.setDate(currentDate.getDate() + 30);
return time.getTime() < (currentDate.getTime() - 60 * 60 * 1000 * 24) || time.getTime() > thirtyDaysLater.getTime();
},
// timeRange is used to calculate the current time to give the required time range. For example, if it is today's date, the setting can only be selected after the current hour and minute.
timeRange(time = null) {<!-- -->
const currentTime = new Date().getTime();
//dateFormat self-made method, used to convert timestamp into the string structure of 'YYYY-MM-DD HH:mm:ss'
const currentDate = dateFormat(currentTime, 'YYYY-MM-DD');
const currentTimeStr = dateFormat(currentTime, 'HH:mm:ss');
const formDate = time ? dateFormat(time, 'YYYY-MM-DD') : '';
// Prove that it is today's time
if(!time || currentDate == formDate) {<!-- -->
return [`${<!-- -->currentTimeStr} - 23:59:59`];
}
return ['00:00:00 - 23:59:59'];
},
The code for the overall structure is as follows:
<template>
<el-date-picker
v-model="remindTime"
type="datetime"
placeholder="Select time"
value-format="timestamp"
:picker-options="pickerOptions"
/>
</template>
<script>
import { dateFormat } from '@/utils';
export default {
data() {
return {
remindTime: null,
selectableRange: [],
}
},
computed: {
pickerOptions() {
return {
disabledDate: this.disabledDate,
selectableRange: this.selectableRange,
}
}
},
watch: {
remindTime(newValue, oldValue) {
if(newValue == oldValue) {
return;
}
this.selectableRange = this.timeRange(newValue);
}
},
methods: {
disabledDate(time) {
const currentDate = new Date();
const thirtyDaysLater = new Date();
thirtyDaysLater.setDate(currentDate.getDate() + 30);
return time.getTime() < (currentDate.getTime() - 60 * 60 * 1000 * 24) || time.getTime() > thirtyDaysLater.getTime();
},
timeRange(time = null) {
const currentTime = new Date().getTime();
const currentDate = dateFormat(currentTime, 'YYYY-MM-DD');
const currentTimeStr = dateFormat(currentTime, 'HH:mm:ss');
const formDate = time ? dateFormat(time, 'YYYY-MM-DD') : '';
if(!time || currentDate == formDate) {
return [`${currentTimeStr} - 23:59:59`];
}
return ['00:00:00 - 23:59:59'];
},
}
}
</script>