element时间范围选择添加限制条件

需求：vue 基于element 时间控件，选择范围做控制，如下图

转载地址： https://blog.csdn.net/juse__we/article/details/80496980#commentBox

disabled的值是个布尔值，就是判断选择值是否为禁止日期(生成日历的时候也会触发一次判断)

组件代码：

<el-date-pickerv-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();}},  }
}

情景3: 设置选择今天之后的日期（不能选择当天时间）

data (){return {pickerOptions0: {disabledDate(time) {return time.getTime() <  Date.now(); } }, }
}

情景4: 设置选择今天之前的日期（不能选择当天）

data (){return {pickerOptions0: {disabledDate(time) {return time.getTime() >  Date.now()-8.64e7; } }, }
}

择三个月之前到今天的日期

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;;}},  }
}

情景6: 设置从4.12日开始，到今天的前一天结束

data (){return {pickerOptions0: {let Y = (new Date()).getFullYear();let M = (new Date()).getMonth();let D = (new Date()).getDate();let curDate = (new Date()).getTime();let defDate = (new Date(Y,M,D)).getTime() - new Date(2019,3,11).getTime(); // 14 * 24 * 3600 * 1000;因为月份取出来的值小1，所以直接用了new Date(2019,3,11).getTime()let chooseDate = curDate - defDate;return time.getTime() > Date.now()-8.64e7 || time.getTime() < chooseDate;},  }
}

两个输入框—组件代码：

<el-date-pickerv-model="value1"type="date"placeholder="开始日期":picker-options="pickerOptions0">
</el-date-picker>
<el-date-pickerv-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();}},}
}

转载地址：element时间范围选择添加限制条件_juse__we的博客-CSDN博客_element 时间选择限制

element时间范围选择添加限制条件相关推荐

使用PerfView监测.NET程序性能（四）：折叠，过滤和时间范围选择
在上一篇文章使用PerfView监测.NET程序性能(三):分组中,我们使用了Perfview的分组功能.分组功能旨在对某些函数按照某个格式进行分组,以减少视图中的各种无关函数的数量.但仅有分组还不够 ...
element级联选择框的使用~干货分享
下面是对element级联选择框的使用介绍,跟小编来看看吧~ 文章目录使用级联选择框的步骤导入使用的级联选择框渲染级联选择框获取数据解决级联选择框过长问题级联选择框过长的问题及解决办法使 ...
Qt实现时间范围选择
以前我们写过一篇利用Qt ScrollBar实现滚动屏时间选择器的文章,也写过一篇QComboBox自定义设置 - 下拉列表自定义为表格的文章,今天我们就利用前面已经完成的这两篇文章实现一个时间范围选 ...
给element的select添加复选框
需求:要求给select多选的时候,给下拉框前加上复选框样式 element select原样式需要更改后的样式 html <el-selectv-model="searchObj. ...
vue2使用element日期选择控件显示农历数据
需求:使用el-date-picker组件时显示农历数据. 修改思路:提取element-ui源码,添加相应样式,农历转化数据写在公共文件中引用. 一.提取组件将在node_modules > ...
layui时间范围选择
html <div class="layui-inline"><label class="layui-form-label">时间范围: ...
PictureSelector框架的简单实现（图片选择添加，不包括视频）
github源码:https://github.com/LuckSiege/PictureSelector 需要创建三个类,最后在activity中完成逻辑代码.1.FullyGridLayoutMa ...
基于qt中QCalendarWidget的双日历时间范围选择控件（自定义）
控件预览: 控件基于QT设计,单击日历设置时间范围起点,再次单击日历设置时间范围终点: 当起止时间为同一天时,所选日期右上角显示"单"字样: 控件设计说明: 控件基于QT中QDia ...
element 日期选择图标_更换 App 图标，自制透明小组件！这可能是最全的 iPhone 桌面美化指南...
说到个性化手机,你会想到换主题.换图标这些方法,不论是小清新还是偶像派,喜欢什么你就换什么.可如果你是 iPhone 用户,除了更换壁纸,也就能想想修改 app 文件夹名称了.Android 手机拥有 ...

element时间范围选择添加限制条件

element时间范围选择添加限制条件相关推荐

最新文章

热门文章