vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间
vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间
总结一下日期控件实现开始日期、结束日期的选择范围限制,以便更符合实际情况。
需求:
-
开始日期和结束日期都必须是今天之前;
-
先选择开始日期,那么结束日期必须在开始日期之后,即只能选择开始日期之后的日期;
-
先选择结束日期,那么开始日期必须在结束日期之前,即只能选择结束日期之前的日期;
三个条件是【且】的关系。
实现效果:
实现代码:
vue template 代码:
script 代码
//时间限制,符合日期先后顺序的实际情况
pickerOptionsStart: {
disabledDate: time => {
if (this.addDrillRecordRow.endTime) {
return (
time.getTime() > Date.now() - 8.64e6 ||
time.getTime() > this.addDrillRecordRow.endTime /*开始日期要在选择的结束日期之前*/
);
}
// return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
return time.getTime() > Date.now() - 8.64e6; /*今天及之前,注意数字不一样*/
}
},
pickerOptionsEnd: {
disabledDate: time => {
if (this.addDrillRecordRow.startTime) {
return (
time.getTime() > Date.now() - 8.64e6 ||
time.getTime() < this.addDrillRecordRow.startTime /*结束日期要在选择的开始日期之后*/
);
}
return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
}
}
这里的addDrillRecordRow是表单数据的绑定对象。
原文链接:https://blog.csdn.net/acoolgiser/article/details/106378033
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)