ElementUI datepicker日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充。 最近做项目用到了datepicker,需要对日期选择做一些限制, 以下情景:选择的时间范围最多为一年,而且只能选择当前日期之前的,2016-01-01之后的日期,代码如下:
data() {
return {
type: 2,
dateRange: [],
pickerMinDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
console.log('maxDate=' + maxDate);
console.log('minDate=' + minDate);
this.pickerMinDate = minDate;
},
disabledDate: (time) => {
if (this.pickerMinDate !== '') {
let maxTime = new CDate(this.pickerMinDate).addYear(1);
if (maxTime > new Date()) {
maxTime = new Date();
}
return time.getTime() > maxTime.getTime() || time.getTime() > Date.now() - 8.64e6;
} else {
return time.getTime() <= new Date('2016-01-01').getTime() || time.getTime() > Date.now() - 8.64e6;
}
}
}
};
},
刚开始用time.getTime()>Date.now(),怎么也选择不了今天的日期,后来改成以下才可以
time.getTime() > Date.now() - 8.64e6; 以下代码为参考:
单个输入框:
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0">
</el-date-picker>
情景1: 设置选择今天以及今天之后的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
情景2: 设置选择今天以及今天以前的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}
情景3: 设置选择今天之后的日期(不能选择当天时间)、
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}
情景4: 设置选择今天之前的日期(不能选择当天)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
情景5: 设置选择三个月之前到今天的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 90 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
}
}
两个输入框
组件代码
<el-date-picker
v-model="value1"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v-model="value2"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1">
</el-date-picker>
情景1: 限制结束日期不能大于开始日期
data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
} }
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},
}
}
针对选择范围(type="daterange")的日期筛选,类似于单个输入框的情况,直接使用参数time进行判断
参考链接:https://www.cnblogs.com/xjcjcsy/p/7977966.html
ElementUI datepicker日期选择器时间选择范围限制的更多相关文章
- element-ui DatePicker 日期选择器 让结束日期大于开始日期
element-ui DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...
- 【ElementUI】日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...
- ElementUI DatePicker 日期选择器控制选择时间范围
选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...
- ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期
<el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...
- 关于ElementUI中日期选择器时间选择范围限制
1.组件代码 <el-date-picker v-model="value1" type="date" placeholder="选择日期&qu ...
- element-ui DatePicker 日期格式处理
1.使用DatePicker 日期选择器得到的日期格式是这样的 解决方案,添加 value-format="yyyy-MM-dd" <el-date-picker type= ...
- DatePicker 日期选择器
用于选择或输入日期 选择日 以「日」为基本单位,基础的日期选择控件 基本单位由type属性指定.快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDa ...
- Android中DatePicker日期选择器的使用和获取选择的年月日
场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...
- ElementUI日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...
随机推荐
- (转)新手入局 你必须要知道的四类Equity
许多人缠着我教他们打牌,开始几乎所有的问题都是问,你都玩什么牌. 这个话外行又很难解释,想来想去,我这样总结给他们(我也忘记自己过去有没有说过,我觉得总结的挺好的,只怕初学者听着又和天书一样了). 是 ...
- SecureCRT设置 log file
SecureCRT设置 log filelog file name:D:\1-SecureCRT-log\com-6\%S_%Y%M%D_%h.log on each line:[%Y%M%D_%h: ...
- input框改变默认样式
input[type="radio"] { width: 2rem; height: 2rem; -webkit-appearance: none; /*清除复选框默认样式*/ ...
- Prefix to Infix Conversion
Infix : An expression is called the Infix expression if the operator appears in between the operands ...
- 分词搜索 sphinx3.1.1+php+mysql
sphinx3.1.1的安装与使用 下载sphinx3.1.1 wget http://sphinxsearch.com/files/sphinx-3.1.1-612d99f-linux-amd64. ...
- MyBatis学习存档(1)——入门
一.简介 MyBatis的前身是iBatis,本是Apache的一个开源的项目 MyBatis是一个数据持久层(ORM)框架,把实体类和SQL语句之间建立了映射关系,是一种半自动化的ORM实现 MyB ...
- ASP.NET_正则表达式_匹配HTML中的一行或多行
一.匹配数字串/flash/([0-9]+).htm 二.匹配不含双引号的字符串<p class=\"w490\">([^\"]+)</p> 三. ...
- kali入侵服务器的那一套实战
dnsenum -enum xxxxx.com 枚举出网站的所有域名和服务器的ip地址 打开百度查询ip地址的所在地 whatweb xxxx.com 查看那些网站入口可以访问 以状 ...
- 点击登录页面成功后,后端返回数据需要保存,在另外一个页面,发送ajax请求的时候需要登录返回数据的其中的一部分当做参数然后拿到新的数据
对于这个怎么操作首先我们要在登录的ajax请求中把后端的数据保存到sessionstorage中,代码如下 登录ajax $.ajax({ type:'post', url:xxxxxxxxx, da ...
- 云端js动态效果
效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...