elementui DateTimePicker组件限制时间范围（包含时分秒）

1、基础范围控制（只控制日期，不含时分秒）

<template><el-date-pickertype="datetime"v-model="startDate"value-format="yyyy-MM-dd HH:mm:ss"placeholder="选择开始时间"size="mini" style="width: 250px;":picker-options="startPickerOptions"></el-date-picker>
</template>

<script>
export default {data() {return {startDate:'',//时间minTime:1618891200000,//时间戳，对应时间为：'2021-04-20 12:00:00'maxTime:1619323200000,//时间戳，对应时间为：'2021-04-25 12:00:00'startPickerOptions:{disabledDate: (time) => {//小于最小时间或者大于最大时间都不可选return time.getTime() < this.minTime-24*3600000|| time.getTime() > this.maxTime;}}}},</script>

效果如下
- 存在一个问题：我们设置的最小时间是2021-04-20，实际上最小时间是2021-04-21
解决
- 原因：控件会取每个日期的00:00:00作为判断条件，如2021-04-20 会被认为是2021-04-20 00:00:00。解析成时间戳为1618848000000，小于2021-04-20 00:00:00的时间戳1618891200000，所以不可选
- 处理：将最小日期减一天

startPickerOptions:{disabledDate: (time) => {// 最小时间减一天，防止当天日期无法选择return time.getTime() < this.minTime-24*3600000|| time.getTime() > this.maxTime;}
}

精确控制（控制时分秒）

动态计算可选范围

    computed:{startPickerOptions(){//选择的日期let curDate = this.$moment(this.startDate).format("YYYY-MM-DD");//最小日期let minDate = this.$moment(this.minTime).format("YYYY-MM-DD");//前推一天，防止当天日期无法选择let preTime = this.minTime-24*3600000;// 如果选择的日期为最小日期，则设置为最小日期的时分秒let str = "";if(curDate == minDate){str = this.$moment(this.minTime).format("HH:mm:ss");}else{str = "00:00:00"}return {disabledDate: (time) => {return time.getTime() < preTime || time.getTime() > this.maxTime;},selectableRange: str + " - 23:59:59"}},},

效果如下
- 当选择最小日期时，只能选择12时之后的时分秒
- 当选择非最小日期时，可以选择任意时分秒

相关问题请指正，欢迎留言讨论！

elementui DateTimePicker组件限制时间范围（包含时分秒）相关推荐

oracle时分秒修改值_Oracle SQL Developer显示的时间包含时分秒的设置方法
Oracle SQL Developer是Oracle公司出品的一个免费的集成开发环境.Oracle SQL Developer 是一个免费非开源的用以开发数据库应用程序的图形化工具,使用 SQL D ...
element组件el-date-picker禁用当前时分秒之前的日期时间选择（代码最少）
element组件el-date-picker禁用当前时分秒之前的日期时间选择(包有用) <el-date-pickerv-model="expireDate"type=&q ...
关于使用elementUI DateTimePicker组件报错[Vue warn]: Avoid mutating a prop directly since the value will be
报错信息如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the ...
让Oracle SQL Developer显示的时间包含时分秒
将工具--首选项--数据库--NLS--日期格式由DD-MON-RR修改为DD-MON-RR HH24:MI:SS
java从数据库中获取当前时间_JAVA获取当前系统时间（包含时分秒）插入数据库...
网上找到好多方法,但是貌似都是不准确,当我看到这个我内牛满面 Timestamp d= new Timestamp(System.currentTimeMillis()); //获取系统时间直接转换成 ...
2022-09-26 工作记录--React-js将时间戳转换成“时分秒”+“时分秒”的倒计时（含tab切换）
一.实现效果假如后端返了两个数据:当前时间的13位时间戳currentTimestamp.秒抢时间的13位时间戳seckillTimestamp,想实现"距开始秒抢"的倒计时,即 ...
datepick二格式化时间_My97DatePicker设置日期年月日时分秒格式
前端 JavaScript 日期插件 My97DatePicker 非常出名.N多年以前我就使用过,当时下载了之后,使用的时候默认是没有小时,分钟,秒之类的,直接是年月日的日期格式,跟一般的日期插件没 ...
java中比较日期大小，Calendar设置时分秒，HOUR和HOUR_OF_DAY的区别
网上有很多比较日期的方法,很多都用到了SimpleDateFormat进行格式化,如果只是比较大小不进行显示,没有必要格式化.如果日期比较要包含时分秒,那可以直接用Date或者calendar的bef ...
elementui时间控件限制可选时间范围(精确到时分秒)
elementui时间控件限制可选时间范围(精确到时分秒) 我们在开发web端项目时,时间控件用的非常多,限制可选时间也是比较常见的需求,比如已经过去时间不能选,或这未来的时间不可选等,如果仅仅只是限 ...

elementui DateTimePicker组件限制时间范围（包含时分秒）

1、基础范围控制（只控制日期，不含时分秒）

精确控制（控制时分秒）

elementui DateTimePicker组件限制时间范围（包含时分秒）相关推荐

最新文章

热门文章

elementui DateTimePicker组件 限制时间范围（包含时分秒）

1、基础范围控制（只控制日期，不含时分秒）

精确控制（控制时分秒）

elementui DateTimePicker组件 限制时间范围（包含时分秒）相关推荐

最新文章

热门文章

elementui DateTimePicker组件限制时间范围（包含时分秒）

elementui DateTimePicker组件限制时间范围（包含时分秒）相关推荐