1、组件代码

<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0">
</el-date-picker>

2、设置选择今天以及今天之后的日期

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}

3、设置选择今天以及今天以前的日期

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}

4、设置选择今天之后的日期(不能选择当天时间)

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}

5、 设置选择今天之前的日期(不能选择当天)

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}

6、设置选择三个月之前到今天的日期

data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = * * * ;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
}
}

7、两个输入框

<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() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
} }
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},
}
}

关于ElementUI中日期选择器时间选择范围限制的更多相关文章

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

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

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

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

  3. ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期

    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...

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

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

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

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

  6. iview和element中日期选择器快捷选项的定制控件

      公司的两个vue项目中都用到了iview和element这个框架,最近的两个需求都有关于日期选择的定制控件,就是要求日期选择的快捷选项左边栏有包含今日.昨日.本周.上周.最近一周.本月.上月.上季 ...

  7. ElementUI DatePicker 日期选择器控制选择时间范围

    选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...

  8. element-ui 时间日期选择器格式化后台需要的格式

    <el-date-picker v-model="startTime" type="datetime" format="yyyy-MM-dd H ...

  9. element-ui 中日期控件限制时间跨度

    支持点击今天及之前任意日期,前后跨度不超过31天,且不超过今天 <el-date-picker v-model="searchForm.dateRange" type=&qu ...

随机推荐

  1. Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器

    [文章作者:张宴 本文版本:v6.3 最后修改:2010.07.26 转载请注明原文链接:http://blog.zyan.cc/nginx_php_v6/] 前言:本文是我撰写的关于搭建“Nginx ...

  2. C# 常用方法——生成验证码

    其他常用方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html 原文链接:https://www.cnblogs.com/morang/p/405 ...

  3. shell练习--PAT试题1010:一元多项式求导 (25 分)(失败案例喜加一)

    ---恢复内容开始--- 1010 一元多项式求导 (25 分) 设计函数求一元多项式的导数.(注:x​n​​(n为整数)的一阶导数为nx​n−1​​.) 输入格式: 以指数递降方式输入多项式非零项系 ...

  4. java正则表达式验证邮箱、手机号码

    /** * 验证邮箱地址是否正确 * @param email * @return */ public static boolean checkEmail(String email){ boolean ...

  5. Android_(游戏)打飞机04:绘画敌机、添加子弹

    (游戏)打飞机01:前言 传送门 (游戏)打飞机02:游戏背景滚动 传送门 (游戏)打飞机03:控制玩家飞机 传送门 (游戏)打飞机04:绘画敌机.添加子弹   传送门 (游戏)打飞机05:处理子弹, ...

  6. sqlmap自动注入 --DETECTION

    --level /usr/shar/sqlmap/xml/payloads 多个脚本 sqlmap里面的payload都在这里面 --risk 1-4(默认 1/ 无害) Risk升高可造成数据被串改 ...

  7. 计算机网络&http学习笔记持续整理

    http不常见状态码: 204: 请求处理成功,但是没有资源可返回. 206: 只返回请求资源的某一部分(客户端只想请求某一部分),响应报文中包含由Content-Range指定范围的实体内容. 30 ...

  8. ionic1使用imagepicker在安卓手机上闪退问题

    在上一篇文章中,提到了如何在ionic1中使用imagepicker插件,并且实现该插件显示中文(汉化)问题有兴趣可以看看:ionic1使用ImagePicker插件并且显示中文(汉化) 1.这次要解 ...

  9. Shell执行脚本

    Shell作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行这一条,这种方式称为交互式,但还有另一种执行命令的方式称为批处理方式,用户事先写一个Shell脚本,Shell可以一次把这些命 ...

  10. spark 笔记 3:Delay Scheduling: A Simple Technique for Achieving Locality and Fairness in Cluster Scheduling

    spark论文中说他使用了延迟调度算法,源于这篇论文:http://people.csail.mit.edu/matei/papers/2010/eurosys_delay_scheduling.pd ...