详解element-ui动态限定的日期范围选择器代码片段


Posted in Javascript onJuly 03, 2020

何开此题

我是一个码农,缘起就是这次需求遇到了之前实现过的功能细节,不想再从头翻组件文档实现一遍,最好是直接拷贝粘贴。

细节

picker-options 设定规则:时间范围最大可选择30天, 最晚时间为今天。
element-ui 的日期选择器的组件是 el-date-picker.

设定 pickerOptions2,

data() {
  return {
   pickerOptions2: {
    disabledDate: theDate => {
     const oneDay = 3600 * 1000 * 24

     const current = theDate.getTime()
     const now = Date.now()

     const condition1 = current > now
     if (!this.minDateTimestamp) return condition1

     const pickerRangeNum = 30

     // 时间范围最大可选择30天,最晚时间为今天
     const lastMonthBegin = this.minDateTimestamp
     const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay

     return (
      condition1 || current < lastMonthBegin || current > lastMonthEnd
     )
    },
    onPick: ({ maxDate, minDate }) => {
     this.minDateTimestamp = minDate.getTime()
     if (maxDate) {
      this.minDateTimestamp = 0
     }
    },
   },
  }
 },

模板的设定,

<template>
<el-date-picker
 class="form-item-control"
 v-model="qo2.dateRange2"
 type="daterange"
 range-separator=" 至 "
 start-placeholder="开始日期"
 end-placeholder="结束日期"
 placeholder="请选择时间段"
 :picker-options="pickerOptions2"
/>
</template>

总结

element-ui 动态限定的日期范围选择器,再回首,不用愁。

 到此这篇关于element-ui动态限定的日期范围选择器代码片段的文章就介绍到这了,更多相关element-ui动态限定的日期范围选择器代码片段内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 #Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 #Javascript
Vue使用预渲染代替SSR的方法
Jul 02 #Javascript
node运行js获得输出的三种方式示例详解
Jul 02 #Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 #Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 #Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 #Javascript
You might like
php下实现农历日历的代码
2007/03/07 PHP
php 静态变量的初始化
2009/11/15 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php的debug相关函数用法示例
2016/07/11 PHP
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
小学生安全保证书
2014/02/01 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
预备党员入党感言
2015/08/01 职场文书
家长会感言
2015/08/01 职场文书
校园广播稿范文
2015/08/19 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Python进程间的通信之语法学习
2022/04/11 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python