element-ui 时间日期选择器限制类型到当前时分
以前做的主要是datatime类型的时间日期选择器去限制到过去的日期（精确到时分），而现在做的是datetimerange类型的，它支持disabledDate（专门限制日期的属性）属性，但是对于selectableRange（专门限制时分的属性）属性并不生效。在网上看了篇文章，任然无法解决datetimerange类型selectableRange失效问题。网络上全是提出datetimerange类型selectableRange失效问题，并没有看见人怎么解决，解决的都是些datatime类型的，但是这种类型本来就支持。因此我在这里记录一下本篇。
我们这里使用的是滚动模式，有人在滚动模式中不仅仅想要限制时分，也要想限制秒数，但是我翻看element-ui源码发现并不支持秒的限制，箭头模式也只支持时的限制
以下是滚动模式源码
那我们如何去禁言时分？
HTML结构
<el-form-item prop="timeValue" label="直播时间">
<el-date-picker
align="right" //对齐方式
@change="dateChange" //当你选择日期后，点击确认触发，这个可以控制你给后端的日期
v-model="insertData.timeValue" // 绑定值
type="datetimerange" // datetimerange类型
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOption()"
format="yyyy-MM-dd HH:mm:ss" // 选择后显示的格式
:default-time="defaultTime" // 默认时间
>
</el-date-picker>
</el-form-item>限制时间主要是通过picker-options属性去控制，配合default-time跳转到规定时间
picker-options中主要用到两个配置项，disabledDate和onClick，第一个是限制日期，第二个是选中后回调，我们可以通过这个回调，拿到你选择的两个时间点，再通过拿到他的实例去限制时分，不多说，上代码
注意：网上很多人都是把picker-options定义在data中的，我这里是定义在methods中，你也可以将他定义在data
VUE代码
new Vue({
methods:{
pickerOption() {
return {
disabledDate: (time) => {
return Date.now() - 3600 * 1000 * 24 > time.getTime();
},
onPick({ maxDate,minDate}) {
const {
minTimePicker,
maxTimePicker
} = this.$refs // 点击时，他只会拿到这个组件的实例，通过这个实例拿到两个时间对象，去这两个事件对象中禁用时间
// 封装时间格式函数，当然你也可以使用第三方库
function timeConversion(e) {
const inputDate = new Date(e);
const year = inputDate.getFullYear();
const month = inputDate.getMonth() + 1; // 月份从0开始，需要加1
const date = inputDate.getDate();
let hours = inputDate.getHours();
hours = hours < 10 ? '0' + hours : hours
let minutes = inputDate.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes
let seconds = inputDate.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds
const formattedDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
return formattedDate;
}
// 如果是选择的小日期与当天相等，则设置当天的时分作为限制，否则不做限制
if (timeConversion(new Date().getTime()).substring(0, 11) == timeConversion(minDate).substring(0, 11)) {
//设置当天的时分作为限制
minTimePicker.selectableRange = [
// 这里一定要看清楚格式
[new Date(timeConversion(new Date().getTime())), new Date('9999-12-01 23:59:59')]
]
} else {
// 不做限制
minTimePicker.selectableRange = []
}
// 如果是选择的大日期与当天相等，则设置当天的时分作为限制，否则不做限制
if (timeConversion(new Date().getTime()).substring(0, 11) == timeConversion(maxDate).substring(0, 11)) {
//设置当天的时分作为限制
maxTimePicker.selectableRange = [
// 这里一定要看清楚格式
[new Date(timeConversion(new Date().getTime())), new Date('2999-12-01 23:59:59')]
]
} else {
// 不做限制
maxTimePicker.selectableRange = []
}
// 这里是判断默认时间。如果都是当天，默认时间则是当天时分到23.59.59，否则就是00.00.00 到 23.59.59
if (!(maxDate && minDate)) {
if (timeConversion(new Date().getTime()).substring(0, 11) == timeConversion(minDate).substring(0, 11) || timeConversion(new Date().getTime()).substring(0, 11) == timeConversion(maxDate).substring(0, 11)) {
this.$set(this.defaultTime, 0, timeConversion(new Date().getTime()).substring(11, 18))
this.$set(this.defaultTime, 1, '23:59:59')
} else {
this.$set(this.defaultTime, 0, '00:00:00')
this.$set(this.defaultTime, 1, '23:59:59')
}
}
}
}
},
}
})以上就是datetimerange类型的逻辑代码，一定要去他的实例中去拿selectableRange去限制时间，这些代码主要就是这个核心
