1、组件代码

  1. <el-date-picker
  2. v-model="value1"
  3. type="date"
  4. placeholder="选择日期"
  5. :picker-options="pickerOptions0">
  6. </el-date-picker>

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

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() < Date.now() - 8.64e7;
  6. }
  7. },
  8. }
  9. }

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

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() > Date.now() - 8.64e6
  6. }
  7. },
  8. }
  9. }

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

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() < Date.now();
  6. }
  7. },
  8. }
  9. }

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

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. return time.getTime() > Date.now();
  6. }
  7. },
  8. }
  9. }

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

  1. data (){
  2. return {
  3. pickerOptions0: {
  4. disabledDate(time) {
  5. let curDate = (new Date()).getTime();
  6. let three = * * * ;
  7. let threeMonths = curDate - three;
  8. return time.getTime() > Date.now() || time.getTime() < threeMonths;;
  9. }
  10. },
  11. }
  12. }

7、两个输入框

  1. <el-date-picker
  2. v-model="value1"
  3. type="date"
  4. placeholder="开始日期"
  5. :picker-options="pickerOptions0">
  6. </el-date-picker>
  7. <el-date-picker
  8. v-model="value2"
  9. type="date"
  10. placeholder="结束日期"
  11. :picker-options="pickerOptions1">
  12. </el-date-picker>

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

  1. data(){
  2. return {
  3. pickerOptions0: {
  4. disabledDate: (time) => {
  5. if (this.value2 != "") {
  6. return time.getTime() > Date.now() || time.getTime() > this.value2;
  7. } else {
  8. return time.getTime() > Date.now();
  9. }
  10.  
  11. }
  12. },
  13. pickerOptions1: {
  14. disabledDate: (time) => {
  15. return time.getTime() < this.value1 || time.getTime() > Date.now();
  16. }
  17. },
  18. }
  19. }

关于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. LINUX笔记之一概述

    unix商业发行版三个主要的:IBM的AIX,HP的HP-UX,SUN的Solaris.AIX和HP-UX只能装在对应的机器上,只有Solaris可以装在个人PC上. 普通发行版FREE BSD和LI ...

  2. yum 安装 mongodb

    1 .添加阿里源 vi /etc/yum.repos.d/mongodb.repo [mongodb-org] name=MongoDB Repository baseurl=http://mirro ...

  3. IntelliJ IDEA常用快捷键总结

    之前开发项目一直用的是eclipse进行开发,近期在使用IDEA这个工具进行项目开发,之前在eclipse上能使用的快捷键方法放在IDEA上很多都不适用了,因此在此总结一下关于IDEA快捷键的使用方法 ...

  4. HTML标签与属性

    HTML中常用的一些标签和属性. 1.lang属性:搜索引擎      en:英文,  zh:中文 2.meta:元数据     charset属性:字符集编码方式 3.h1~h6:标题   一级标题 ...

  5. pgadmin4 csrf错误导致docker-compose postgres服务下线

    docker-compse up 启动的前台服务, 过一会就自动停止 检查半天,发现是pgadmin4没安装正确不断报400 和 csrf error 然后pgadmin4为啥报这个, 因为pytho ...

  6. python模块turtle简单用法

    ##初始化turtle:t = turtle.Turtle() 或者 t = turtle.Pen()##查询turtle状态#位置t.position() #箭头朝向,箭头朝向按照顺时针或者逆时针偏 ...

  7. linux crontab 定时任务,任务命令单独linux执行正常,放定时任务就不执行了,解决办法 (原)

    这是我crontab里面的内容 */30 * * * *  ./usr/bin/wget -q -O sync_log.txt http://fly.dllm.cn/index.php/Home/In ...

  8. [CSP-S模拟测试]:花(DP)

    题目传送门(内部题111) 输入格式 一个整数$T$,表示测试数据组数. 每组测试数据占一行,两个整数,分别表示$L$和$S$. 输出格式 对每组数据,输出一个整数表示答案. 样例 样例输入1: 13 ...

  9. oracle判断一个字段为空

    比如 insert into table a (a1,b1)values("a1",''); 对于这种情况,因为表里存的是'',其实是没有内容的,要查询这个字段,不能直接使用 se ...

  10. 安装OpenCV 3 on Raspbian Jessie

    环境: 硬件:树莓派三代B型, 5MP Camera Board Module 软件:Raspbian,Opencv 安装依赖 $ sudo apt-get update   $ sudo apt-g ...