饿了么UI 时间控件 el-date-picker时间范围限制

环境：vue:2.6 、element-ui: ^2.13.2

需求：需要在日期控件中限制选择31天，根据选择的第一个日期进行判断

组件代码：

<el-date-picker v-model="formInfo.startTime"value-format="yyyy-MM-dd"type="daterange"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptionsBegin"></el-date-picker

限制控制写在data中：

data() {

return {

pickerMinDate: "",

pickerOptionsBegin: {

onPick: (obj) => {

this.pickerMinDate = new Date(obj.minDate).getTime();

console.log(obj);

},

disabledDate: (time) => {

if (this.pickerMinDate) {

const day1 = 31 * 24 * 3600 * 1000;

let maxTime = this.pickerMinDate + day1;

let minTime = this.pickerMinDate - day1;

return (

time.getTime() > maxTime ||

time.getTime() < minTime ||

time.getTime() > Date.now() - 1 * 24 * 3600 * 1000

);

} else {

return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000;

}

},

},

};

},

效果展示：

饿了么UI 时间控件 el-date-picker时间范围限制相关推荐

前端小技巧：ELement UI时间控件el-date-picker误差8小时
问题前端使用框架与UI:Vue+ElementUI. 在项目开发中使用到了DateTimePicker组件,在选择时间后点击查询发现查询导的内容与预期内容有所偏差,之后发现前端选中的时间在后端接收时 ...
vue时间控件美化成IOS样式(移动端)，vux组件datatime添加星期几/周几教程
input的时间控件有三种类型属性 Android IOS type="date" 年+月+日(原生UI样式) 年+月+日(滚轮样式) type="datetime&q ...
bootstrap-table之通用方法（时间控件，导出，动态下拉框，表单验证，选中与获取信息）
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.s ...
jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
My97DatePicker时间控件使用
My97DatePicker时间控件使用 My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件: ...
Android自定义时间控件不可选择未来时间
本文出自:http://blog.csdn.net/dt235201314/article/details/78718066 Android自定义时间控件选择开始时间到结束时间 Android自定义时 ...
bootstrap 时间控件
最近使用了bootstrap的UI感觉确实很漂亮,非常值得学习和使用.下面先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是非常的简单,只需要引入基本的css和js就可以了需要引入 ...
bootstrap-datetimepicker时间控件添加清除按钮
本文转自:https://blog.csdn.net/gyysmile/article/details/80226993 其实这位大神写的很好了,为什么我还要在写呢,因为我想写点东西了最近测试部提出 ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
robotframe使用之时间控件
robotframe使用之时间控件正常的页面,时间控件会写在一个iframe里面,所以robotframework找不到对的ID或者xpath等. 要解决这个问题必选先显示iframe. 使用关键字 ...

饿了么UI 时间控件 el-date-picker时间范围限制

饿了么UI 时间控件 el-date-picker时间范围限制相关推荐

最新文章

热门文章