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属性来限制可选择的日期,这 ...
随机推荐
- [转帖]mysql8.0忘记密码如何操作?
mysql8.0忘记密码如何操作? https://www.cnblogs.com/gspsuccess/p/11245314.html mark 一下 上次竟然不知道怎么弄. 很不幸,刚安装了MYS ...
- Hadoop集群搭建-02安装配置Zookeeper
Hadoop集群搭建-05安装配置YARN Hadoop集群搭建-04安装配置HDFS Hadoop集群搭建-03编译安装hadoop Hadoop集群搭建-02安装配置Zookeeper Hado ...
- Swoft2.x 小白学习笔记 (四) --- RPC
介绍 swoft 中 RPC使用:搭建访问服务端和客户端 RPC服务端: 一.配置,在文件 /app/bean.php中添加 return [ 'rpcServer' => [ 'class' ...
- Linux就该这么学——新手必须掌握的命令之文件编辑命令组
cat 命令 用途 : 用于查看纯文本文件 格式 : cat [选项] [文件] 示例 : more 命令 用途 : 用于查看纯文本文件(内容较多的),可以用”Enter” 键或者”Space”键向下 ...
- laravel-admin关联查询问题解决办法
文档是这么说的: 按照文档上来,没有成功,网上找了好久,说是没有在模型中关联,关联之后的运行结果是这样的: 还是没有成功啊,仔细研究返现是这里写错了,whereHas后面跟的是model中的方法名,而 ...
- windows上pip安装及使用详解
windows上pip安装及使用详解 2018-11-21 19:49:58 十二笔 阅读数 8229更多 分类专栏: Python学习 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...
- JavaScript例子1-给网页中所有<p>元素添加onclick事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- python爬虫redis-ip代理池搭建几十万的ip数据--可以使用
from bs4 import BeautifulSoupimport requests,os,sys,time,random,redisfrom lxml import etreeconn = re ...
- jquery 取指定class下的input checkbox选中的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Win10系统如何利用蓝牙设置动态锁?
很多小伙伴都会有这样的经历,出门之后没走多远,却已然忘记是否锁门,有强迫症的人就会重新返回查看,以确保门是否反锁. 我们在使用电脑时也是这样,遇到事情要临时离开,却忘记是否锁屏,再返回来就耽误时间了. ...