elementui时间控件限制可选时间范围(精确到时分秒)

我们在开发web端项目时，时间控件用的非常多，限制可选时间也是比较常见的需求，比如已经过去时间不能选，或这未来的时间不可选等，如果仅仅只是限制年月日那非常好解决，那如果是精确到时分秒呢？其实也很简单，接下来看看我的需求（我的需求是过去的时间不能选并且要精确到时分秒），话不多说上代码：

//我们在vue中的data中定义一个对象，绑定给时间组件
expireTimeOption: {selectableRange:`${moment().format('HH:mm:SS')} - 23:59:59`,//这里是限制可选时间到时分秒//用当前时间减去一整天的时间，得到的就是当前时间到晚上13：59：59的区间disabledDate(date) {//这里是限制可选时间到年月日的//disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Booleanreturn date.getTime() < Date.now() - 3600 * 1000 * 24;},},

本以为就这样结束了，一个限制年月日，一个限制时分秒，但是会有一个bug，假如现在是早上8点，那明天的8点之前都不可以选了，这明显是不对的，那我们如何解决呢？上代码

//使用watch时间监听时间控件的值
watch: {'form.startTime'(selectTime) {const date = moment(selectTime).format('YYYY-MM-DD');const today = moment().format('YYYY-MM-DD');if (date === today){//如果选择是日期是当天// 先把时间控件的值赋值当前时间this.form.startTime = moment().format('YYYY-MM-DD HH:mm:SS')//然后限制时间小于此时此刻的时分秒不可选this.expireTimeOption.selectableRange = `${moment().format('HH:mm:SS')} - 23:59:59`} else {//如果选择是日期是明天或者更远的时间// 先把时间控件的值赋值为一天的的开始this.form.startTime = moment().format('YYYY-MM-DD 00:00:00')// 然后把时分秒的限制放开this.expireTimeOption.selectableRange = '00:00:00 - 23:59:59'}},
}

elementui时间控件限制可选时间范围(精确到时分秒)相关推荐

vue elementUI 时间控件优化选择起始时间不能在结束时间之后,结束时间不能在起始时间之前
时间控件优化 elementUI 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前 <el-form-item label="起始时间:" class=" ...
Vue elementui时间控件编辑时报错：date.getHours is not a function
时间控件,这里用了type="datetime",并且设置了格式化, value-format="yyyy-MM-dd HH:mm:ss" <el-for ...
elementUI时间控件重置踩过的坑
<el-col :span="8"><el-form-item label="采购时间"><el-date-pickerstyle ...
veu中时间转换----element-UI上Date-Picker时间控件
veu中时间转换如果 this.startTime 为2020-09-20 则 new Date(this.startTime) // Sun Sep 20 2020 08:00:00 GMT+08 ...
Vant时间控件精确到秒
Vant时间控件精确到秒 Vant-ui里面的时间控件最多精确到分钟,但是项目需求要精确到秒钟, 我们可以用popup弹框和picker选择器自己封装一个时间选择控件精确到秒下面是封装的效果图 1. ...
layui 日期范围选择器_layui时间控件选择时间范围的实现方法
解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择共有两种解决方式: 方式一(layui 1.x): html代码: placeholder="开始时间(修改时间)&qu ...
elementUI日期时间控件控制选择时间区间不超过一个月
pickerBeginDateBefore: {disabledDate: (time) => {// this.electricityStatisticsEndDate是结束时间date控件的 ...
基于vue和ElementUI时间选择控件的封装
基于vue和ElementUI时间选择控件的封装最近有个需求就是需要把查询控制在最近六个月,还要要求时间的可选范围,在网上找了好久都没有找到,于是就自己动手写了一个,希望对大家有所帮助,也是记录自己 ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...

elementui时间控件限制可选时间范围(精确到时分秒)

elementui时间控件限制可选时间范围(精确到时分秒)

elementui时间控件限制可选时间范围(精确到时分秒)相关推荐

最新文章

热门文章