el-datepicker动态禁用日期

需求：限制只能选择点击的日期前后6个月的数据。

比如，我点击了2021年6月1号，只有2020年12月1号到2021年6月1号的区间，以及2021年6月1号到2022年1月1号的日期可以选择

第一步：给el-date-picker加上一个属性picker-options,如下

<el-date-picker :editable="false" :clearable="false" size="small" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="yyyyMMdd" >
</el-date-picker>

第二步：在pick-options中加上onPick回调函数，disabledDate属性，如下

data() {return {startDate: '',endDate: ''}
},
pickerOptions: {onPick: (obj) => {this.startDate = new Date(obj.minDate).getTime(); //获取你第一次点击的日期this.endDate = new Date(obj.maxDate).getTime();//获取你第二次点击的日期},disabledDate: (time) => {if (this.startDate && !this.endDate) {const timeZone = 182 * 24 * 3600 * 1000; //6个月let maxTime = this.startDate + timeZone; let minTime = this.startDate - timeZone;let limitDate =time.getTime() > maxTime ||time.getTime() < minTimereturn limitDate;} else {return ''}}}

el-datepicker动态禁用日期相关推荐

elementUI 日期选择器datepicker 设置禁用日期
本例记录ElementUI中DatePicker(日期选择器)设置日期项禁用状态的实现. 下图中将DatePicker的type设置为year,展示为年份选择器: 可以看到上图中2022.2023.2 ...
el-date-picker中自定义快捷选项picker-options，动态设置禁用日期
1.需求在table表格中,有后端传回的List,每一条list数据中都有一个发生日期occur_time,点击报告延期出现历史记录对话框,点击申请延期后除开一个填写信息的对话框.用户可以选择的计划 ...
EL表达式中格式化日期显示
场景在Jsp中通过EL表达式格式化显示日期. 实现在jsp中引入标签: <%@ taglib prefix="fmt" uri="http://java.sun ...
element el-time-picker 时间段动态禁用禁用时间段
element el-time-picker 时间段动态禁用禁用时间段 // value-format 时间格式 //picker-options 绑定禁用时间段 // 需要默认值 <el-t ...
iview日期选择器更改显示日期书_如何动态设置 iview DatePicker 控件的禁用日期（option）...
在公司开发的过程中遇到的问题,我们采用了iview的Vue框架. 现有一个需求:用户在初始时页面后,DatePicker 的可选时间范围不作限制,用户可选择任意一天.当用户选择了某一天(planTim ...
jquery 毫秒转换成日期_jQuery Datepicker – 如何将日期格式化为纪元时间戳(以秒为单位,而不是毫秒)...
我正在使用 jquery datepicker插件来设置一个日期字段,该字段存储为db中的纪元时间戳(字段,publish_time,直接映射到表模式). 看来Datepicker只支持以毫秒为单位的 ...
datepicker动态初始化
datepicker 初始化动态表单的input,需要调用jquery的on方法来给未来元素初始化. //对动态添加的时间文本框进行动态初始化$('table').on("focus&quo ...
jquery datepicker 点击日期控件不会自动更新input的值
页面代码: <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel=" ...
jquery 时间相减获取天数_JQuery Datepicker实现JavaScript日期相减的小例子
最近水母一直在发关于银行利息的文章,看他算得连脚趾头都快用上了,O(∩_∩)O哈哈~,索性做回好人,帮他写个网页程序算一下. 开始想用PHP写,但是还要做个输入界面,干脆用js了.写js代码的好帮手首 ...

el-datepicker动态禁用日期

需求：限制只能选择点击的日期前后6个月的数据。

el-datepicker动态禁用日期相关推荐

最新文章

热门文章