详解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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
js实现右键自定义菜单
Dec 03 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
详解JS预解析原理
Jun 16 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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 discuz 主题表和回帖表的设计
2009/03/13 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
详解php中反射的应用
2016/03/15 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python 查看文件的读写权限方法
2018/01/23 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python调用摄像头拍摄数据集
2019/06/01 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
python中实现词云图的示例
2020/12/19 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
《孔子游春》教学反思
2014/02/25 职场文书
企业员工培训感言
2014/02/26 职场文书
护士求职自荐信范文
2014/03/19 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
应届生面试求职信
2014/07/02 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
基层党组织整改方案
2014/10/25 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
继承权公证书范本
2015/01/23 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL