html日期选择限制,element-ui 日期选择器范围时间限制
来自 https://www.cnblogs.com/xjcjcsy/p/7977966.html 侵删
elementui是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充。
官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充。
单个输入框的
组件代码:
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickeroptions0">
情景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;;
}
},
}
}
两个输入框
组件代码
v-model="value1"
type="date"
placeholder="开始日期"
:picker-options="pickeroptions0">
v-model="value2"
type="date"
placeholder="结束日期"
:picker-options="pickeroptions1">
情景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进行判断
html日期选择限制,element-ui 日期选择器范围时间限制相关推荐
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep 22 2017 00:00:00 GM ...
- 【vue开发问题-解决方法】(五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
- php日期选择插件,优雅的日期选择插件daterangepicker
插件描述:jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择 使用方法 第一步:引入css文件: bootstrap.min.css.font-awesome ...
- java 的日期选择控件_Java日期选择控件
一起学习 一次项目研发中需要日期时间选择控件, 网上提供的不多, 且质量一般, 所以只好自己做,参考了 网上某位同学的 作品 Jave 日期选择控件 DateChooser . 目前的代码将日期时间选 ...
- element 日期选择图标_element-ui 限制日期选择的方法(datepicker)
这篇文章主要为大家详细介绍了element-ui 限制日期选择的方法(datepicker),具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! El ...
- java界面日期选择控件,JavaFX界面设计之时间选择器(1)
本章我们主要介绍javafX时间选择器的使用,描述了DatePicker控件的基本特性. javaFX的DatePicker控件可以让我们从一个给定的日历中选择一天,主要用于网站或应用中需要用户输入一 ...
- Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
- element ui 级联选择器,渲染后不显示数据
element ui 的级联选择器只能用 value label 来渲染,而往往后端发给我们的数据并不是按照这个来命名的,所以element ui给我们提供了Props来进行配置 但鉴于本人水平有限, ...
- html引入kendo日期控件,kendo ui 日期插件:kendoDatePicker详解
项目中引入了kendoUI,为了保持风格一致,项目中引入的组件,尽量优先使用kendoUI中已有的,避免引入更多的第三方库文件,不利于日后的管理和维护. kendoUI2018最新版库文件中的日期插件 ...
- 【NG-ZORRO、Angular】日期选择框时间段nz-range-picker设置开始结束时间00:00:00~23:59:59
<nz-range-picker [(ngModel)]="dateRange" nzFormat="yyyy-MM-dd HH:mm:ss" style ...
最新文章
- 【ASP.NET】ASP.NET中权限验证使用OnAuthorization实现
- 《软件构架实践》阅读笔记三
- Nginx-07:Nginx配置实例之动静分离
- android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
- Atitti.java exp ast java表达式语法ast构造器
- php memcached 方法,php操作使用Memcached常用方法代码和例子大全
- 汶川地震《生死不离》歌词
- jquery 所有contenteditable=true的元素_JavaScript学习笔记(三十一) jQuery(上)
- Visual C++ 2010 Express使用教程
- ps怎么更改背景图层大小_PS怎么修改图片尺寸大小?ps修改图片大小方法图解
- 结构化数据 VS 半结构化数据 VS 非结构化数据
- 微信邮箱怎么弄怎么写?手机可以移动办公吗?
- 嵌入式系统C语言编程基础
- linux 查看硬盘空间
- 3.Hadoop3.x 项目测试
- 网络摄像机镜头毫米数如何选择
- 基因表达半衰期 | mRNA Half-Life
- 3DMAX如何打开mat文件
- CP1202官方串口驱动
- Windows Server 2003上搭建FTP服务器(IIS同理)
热门文章
- hub设备_五年内任何问题,直接换新,毕亚兹 USB3.0四口HUB分线器体验
- 牛顿插值java_java实现牛顿插值法
- c语言科学计数法 10的负8次方,3*10的负8次方等于多少?为什么计算
- 微信云开发实现微信支付与退款的两种思路
- Python:企业微信批量发工资条工具 -应用消息发送模块
- 佳博GprinterApp编辑软件使用说明
- JSzip 前端处理下载打包文件夹
- 2021深圳杯数学建模D题思路分析
- vnc远程访问linux服务器,如何通过 VNC 远程访问 Linux 虚拟机
- 【详解】P问题、NP问题和NPC问题详解(千禧年问题之首)