element-ui日期选择器datepicker限制最大选择日期范围

如图,需求为最多选择范围为七天

 <el-date-picker
        v-model="pickerDate"
        type="daterange"
        :picker-options="pickerOptions"
        @change="handlePickerDate"
        range-separator="至"
        format="yyyy-MM-dd"
        value-format="timestamp"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
  </el-date-picker>
 timeOptionRange:null,

pickerOptions: {
        onPick :time =>{
              this.searchList.timeOptionRange = time.minDate
        },
        disabledDate :time =>{
              let timeOptionRange = this.searchList.timeOptionRange
              let seven = 3600 * 1000 * 24 * 6
              if(timeOptionRange){
                // /*选择的日期 与 当前日期 小于7天*/
                let current =new Date(new Date().toLocaleDateString()) - timeOptionRange.getTime()
                return (time.getTime() > timeOptionRange.getTime()+ (current < seven?current:seven) ||
                  time.getTime() < timeOptionRange.getTime()-seven)
              }else {
                return time.getTime() > Date.now();
              }
            },
            shortcuts: [{
              text: ‘最近三天‘,
              onClick(picker) {
                const end = new Date(new Date().toLocaleDateString());
                const start = new Date(new Date().toLocaleDateString());
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
                picker.$emit(‘pick‘, [start, end]);
              }
            }, {
              text: ‘最近七天‘,
              onClick(picker) {
                const end = new Date(new Date().toLocaleDateString());
                const start = new Date(new Date().toLocaleDateString());
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                picker.$emit(‘pick‘, [start, end]);
              }
            }, {
              text: ‘最近三十天‘,
              onClick(picker) {
                const end = new Date(new Date().toLocaleDateString());
                const start = new Date(new Date().toLocaleDateString());
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
                picker.$emit(‘pick‘, [start, end]);
              }
        }]
  },             
handlePickerDate(e){  if(!e){    this.timeOptionRange = null  }},
 

原文地址:https://www.cnblogs.com/zzzzzwt/p/11314970.html

时间: 2024-08-05 21:17:28

element-ui日期选择器datepicker限制最大选择日期范围的相关文章

Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker

在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习Android中常用选择器,今天学习的是DatePicker和TimePicker. 一.DatePicker DatePicker是一个比较简单的组件,从FrameLayout派生而来,供用户选择日期.其在FrameLayout的基础上提供了一些方法来获取当前用户所选择的日期,如果程序需要获取用户选择的日期则可通过为DatePicker添加 OnDateChangedListener 进行监听来实现. 使

日期选择器(DatePicker)

日期选择器(DataPicker) 显示一个可供日期选择的界面 监听器方法init(year,month,day,OnDateChangedListener) 监听器 DataPicker.OnDateChangedListener 下面我们直接看代码: 1.Activity //日期选择器 public class DatePickerActivity extends Activity { private DatePicker datePicker; protected void onCrea

jQuery UI 实例 - 日期选择器(Datepicker)

默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

Element Ui 日期选择器 范围限制 + value-format

Element Ui 日期选择器 范围限制 一个日期范围 // el-date-picker <el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"> // </el-date-picker> // 选择 今天或以后的日期(不包含今天则去掉下面 - 8.64e7) pic

jQuery UI 日期选择器(Datepicker)

设置JqueryUI DatePicker默认语言为中文 <!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期选择器(Datepicker) - 默认功能</title> <link rel="stylesheet" href="//code.jque

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: <script src="js/jquery-1.7.1.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type=&qu

日期选择器:jquery datepicker的使用

helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui 在jquery ui中,提供了一个非常实用的日期选择器:datepicker,使用它能非常方便的展现日历中的日期,灵活配置相关选项,包括日期格式.范围等.我们经常在WEB应用中用到datepicker,比如要求用户输入日期进行相关查询的.我们很早之前就应用datepicker到很多项目中,今天整理成文与大家分享. 查看演示 下载源码 准备工作 首先

Windows Phone 8.1中日期和时间选择器DatePicker,TimePicker

开篇之前,推荐王磊老师的Windows 8.1中关于DatePicker和TimePicker的讲解 链接:重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 首先Windows Phone 8.1的这两个选择器的使用和在Windows 8.1中的使用差不多. 1.前台DatePicker和TimePicker标签的使用没什么太大的问题,其中Header属性其实就是给选择器起个名字而已 DateChanged和TimeC

Android中实现日期时间选择器(DatePicker和TimePicker)

利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.xml): <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"