el-date-picker type="datetime"日期时间选择器组件除了支持日期限制也支持时分秒的时间限制,但是文档上并没有直接体现,先上效果图
开始时间:
![](https://i-blog.csdnimg.cn/blog_migrate/d6d11552047a5b5775fe3171885f568b.png)
结束时间:
![](https://i-blog.csdnimg.cn/blog_migrate/9a2f4c1cf3ee6998e79b6e7b69c765f6.png)
:Picker Options中用selectableRange: '00:00:00 - 23:59:59'来限制时间可选择的区间,整个实现方法就是围绕着这个属性来实现的,其中由于业务需求限制了结束时间需在开始时间后两小时内,且组件model值使用了对象内的;下面贴上代码
这是组件部分:
<el-form-item class="text-align-left" label="开始时间" prop="start_time">
<el-date-picker
class="w-100"
popper-class="hidBtn"
v-model="ruleForm.start_time"
type="datetime"
@change="startTimeChange"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
:picker-options="startPickerOptions"
:placeholder="$t('data.PleaseSelect')">
</el-date-picker>
</el-form-item>
<el-form-item class="text-align-left" label="结束时间" prop="end_time">
<el-date-picker
class="w-100"
popper-class="hidBtn"
type="datetime"
v-model="ruleForm.end_time"
@change="endTimeChange"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
:picker-options="endPickerOptions"
:placeholder="$t('data.PleaseSelect')">
</el-date-picker>
</el-form-item>
这是data部分
startPickerOptions: {
disabledDate(time) {
return time.getTime() < (Date.now() - 3600 * 1000 * 24)
},
selectableRange: '00:00:00 - 23:59:59',
},
endPickerOptions: {
disabledDate(time) {
return time.getTime() < (Date.now() - 3600 * 1000 * 24)
},
selectableRange: '00:00:00 - 23:59:59',
},
这是methods部分
setStartTime() {
const date = new Date(Date.now())
const hours = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const startTime = `${hours}:${minute}:${second} - 23:59:59`
this.startPickerOptions.selectableRange = startTime
},
在created或者mounted钩子中调用setStartTime()为开始时间附上当前时间的初始值
这是监听部分
startTime(nval, oval) {
console.log(nval)
const date = new Date(nval)
const hours = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
let endTime = ''
if (Number(hours) + 2 > 24) {
const endHours = Number(hours) + 2 - 24
endTime = `${hours}:${minute}:${second} - ${endHours}:${minute}:${second}`
} else {
const endHours = Number(hours) + 2
endTime = `${hours}:${minute}:${second} - ${endHours}:${minute}:${second}`
}
this.endPickerOptions.selectableRange = endTime
},
由于个人业务需求,限制结束时间需在开始时间后的两小时内,同学们可以根据自己需求修改;前面提到,组件使用了对象内的数据,想要监听对象内数据的变化需要加一层计算属性做中间层代理
computed: {
startTime() {
return this.ruleForm.start_time
},
},
至此就实现了el-date-picker组件的日期和时间限制