选择了开始时间,再选择结束时间的时候就不能早于开始时间;
选择了结束时间,再选择开始时间的时候就不能晚于结束时间;

如果开始时间为空,选择结束时间只能是今天之后的时间;

<el-date-picker v-model="ruleForm.startTime" type="date" placeholder="开始时间" :picker-options="pickerOptions0"></el-date-picker>
<el-date-picker v-model="ruleForm.endTime" type="date" placeholder="截止时间" :picker-options="pickerOptions1"></el-date-picker>
data(){
return {
    pickerOptions0: {        
     disabledDate: time => {
          if (this.ruleForm.endTime != "" && this.ruleForm.endTime) {
            let timeStr = new Date(this.ruleForm.endTime.replace(/-/g, "/"));
            return time.getTime() > timeStr;
          } else {
            return "";
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          if (this.ruleForm.startTime != "" && this.ruleForm.startTime) {
            let timeStr = new Date(this.ruleForm.startTime.replace(/-/g, "/"));
            return time.getTime() < timeStr;
          } else if (this.ruleForm.startTime == "") {
            return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天
          } else {
            return "";
          }
        }
      }
    }
}
 

选择今天以及今天之后的日期

<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0">
</el-date-picker> data(){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天
}
}
}
}

选择今天以及今天以前的日期

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天
}
},
}
}

限制结束日期不能大于开始日期

<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> data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > new Date(this.value2).getTime(); }
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < new Date(this.value1).getTime()- 1*24*60*60*1000;//减去一天的时间代表可以选择同一天;
}
},
}
}

限制选择开始时间不能小于当前时间。并且结束时间不能大于开始时间(比上面多了层限时)

pickerOptions0: {
//结束时间不能大于开始时间
disabledDate: time => {
if (this.addForm.date_range_end) {
return (
time.getTime() >
new Date(this.addForm.date_range_end).getTime()
);
} else {
//还没有选择结束时间的时候,让他只能选择今天之后的时间包括今天
return time.getTime() < Date.now() - 8.64e7;
}
}
},
pickerOptions1: {
disabledDate: time => {
if (this.addForm.date_range_start) {
return (
time.getTime() <
new Date(this.addForm.date_range_start).getTime() -
1 * 24 * 60 * 60 * 1000
); //可以选择同一天
}
}
},

限制不能选择今年之后的年份

<el-date-picker v-model="year" type="year" placeholder="选择年度" value-format="yyyy" :picker-options="pickerOptions0"></el-date-picker>
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - new Date().getFullYear();
}
},

ElementUI DatePicker 日期选择器控制选择时间范围的更多相关文章

  1. element-ui DatePicker 日期选择器 让结束日期大于开始日期

    element-ui  DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...

  2. ElementUI datepicker日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 最近做项目用到了datepicker,需要对日期选择做一些限制, ...

  3. element-ui DatePicker 日期格式处理

    1.使用DatePicker 日期选择器得到的日期格式是这样的 解决方案,添加 value-format="yyyy-MM-dd" <el-date-picker type= ...

  4. Android中DatePicker日期选择器的使用和获取选择的年月日

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  5. DatePicker 日期选择器

    用于选择或输入日期 选择日 以「日」为基本单位,基础的日期选择控件 基本单位由type属性指定.快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDa ...

  6. 【ElementUI】日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...

  7. 关于ElementUI中日期选择器时间选择范围限制

    1.组件代码 <el-date-picker v-model="value1" type="date" placeholder="选择日期&qu ...

  8. DatePicker日期选择器的使用

    效果展示: 代码如下: <el-date-picker v-model="listQuery.times" type="daterange" range- ...

  9. HTML5调用手机的Datepicker(日期选择器)

    HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型: email url number range Date pickers (date, month, ...

随机推荐

  1. WebApiClient的接口输入验证

    1. 文章目的 随着WebApiClient的不断完善,越来越多开发者选择WebApiClient替换原生的HttpClient,本文将介绍WebApiClient的接口参数输入有效性验证的新特性. ...

  2. 【面试】吃透了这些Redis知识点,面试官一定觉得你很NB(干货 | 建议珍藏)

    万字长文,干货满满. 是数据结构而非类型 很多文章都会说,redis支持5种常用的数据类型,这其实是存在很大的歧义.redis里存的都是二进制数据,其实就是字节数组(byte[]),这些字节数据是没有 ...

  3. 每周分享五个 PyCharm 使用技巧(二)

    这是 「PyCharm 技巧分享」系列的第二篇分享.由于上一篇文章得到了大家的一些赞同,所以今天又来给大家推荐一些我平时自己有用的小技巧,大家择需所取即可. 先声明下,并不保证对所有的人都是有帮助的, ...

  4. 点击菜单选项,右侧主体区新增子界面(Tab)的实现

    今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效 ...

  5. vue.js之动画篇

    本文引入类库的方式均采用CND的方式,可直接复制代码到编辑器中学习和测试 不使用动画切换元素 <div id="app"> <input type="b ...

  6. jq切换面板

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. c#封装DBHelper类

    public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> None, /// <s ...

  8. dubbo 2.7.0 中缺乏 <dubbo:annotation /> 的解决方案

    一.背景  从 dubbo 2.6.5 升级到 2.7.0,突然发现好多地方不能用了,dubbo:annotation 直接报红,原先的 @Service 和 @Reference 中直接报了过时,源 ...

  9. 使用原生php爬取图片并保存到本地

    通过一个简单的例子复习一下几个php函数的用法 用到的函数或知识点 curl 发送网络请求 preg_match 正则匹配 代码 $url = 'http://desk.zol.com.cn/bizh ...

  10. .net开源工作流引擎ccflow Pop返回值设置

    关键词: 点击字段弹出返回值填充文本框或其他字段     表单自动填充   .net开源工作流  jflow工作流   ccflow   工作流引擎 应用场景 当我们的查询信息比较多我们希望有一个比较 ...