主要思路:el-date-picker组件需要 :picker-options属性,属性值为data,data的数据来自于methods中的方法。

##template代码
<el-form-item label="开始时间" prop="startTime" >  <el-date-picker v-model="form.startTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%"  :picker-options="startDatePicker" :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入订阅开始时间'"></el-date-picker></el-form-item><el-form-item label="结束时间" prop="endTime">  <el-date-picker v-model="form.endTime"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%" :picker-options="endDatePicker"  :disabled="dialogStatus=='view'" type="datetime"  :placeholder="dialogStatus=='view'?'':'请输入订阅结束时间'"></el-date-picker></el-form-item>

##data数据
data() {  return { startDatePicker: this.beginDate(),    endDatePicker: this.processDate(),  }}

##methods方法

beginDate(){  const self = this  return {    disabledDate(time){      if (self.form.endTime) {  //如果结束时间不为空,则小于结束时间        return new Date(self.form.endTime).getTime() < time.getTime()      } else {        // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天      }    }  }},processDate() {  const  self = this  return {    disabledDate(time) {      if (self.form.startTime) {  //如果开始时间不为空,则结束时间大于开始时间        return new Date(self.form.startTime).getTime() > time.getTime()      } else {        // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天      }    }  }}

附加:只可以选择今天以及今天以后的时间:

pickerOptions0: {  disabledDate(time) {    return time.getTime() < Date.now() - 8.64e7;//8.64e7=1000*60*60*24一天  }},

转载于:https://www.cnblogs.com/luoxuemei/p/9667652.html

elementUI 日期时间选择器el-date-picker开始时间与结束时间约束相关推荐

  1. element-ui 日期时间选择器el-date-picker 设置禁止选择日期

    element-ui 日期时间选择器el-date-picker 设置禁止选择日期 使用日期选择器时,有的时候需要禁止选择一些日期,我们可以通过快捷选项 picker-options 对象中的禁用日期 ...

  2. ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到,时、分、秒)、pickerOptions、日期选择器范围选择

    elementUI日期时间选择器范围(精确到,时.分.秒.

  3. elementUI 日期时间选择器添加默认时间

    GetDateStr(AddDayCount) { var dd = new Date();dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后 ...

  4. element-UI日期时间选择器el-date-picker

    <template><div><el-form :model="form" label-width="150px" ref=&qu ...

  5. vue2 + elementui 日期时间选择器 禁止选择当前时间之前的日期及时间,并添加相应校验规则

    项目里有这样一个需求:文章设置的预发布时间不得早于当前时间(包括日期和时分秒时间). 具体实现如下: 1.在日期时间选择其中设置禁止选中(包括日期和时间) (1)在html(template)中, 通 ...

  6. ElementUI日期时间选择器限制时间范围,禁止此刻之前的所有时间选择(精确到,时、分、秒)、pickerOptions、日期选择器范围选择

    需求:可选择的时间大于当前时间,不符合条件的全部禁用 以下实现方式可精确到年.月.日.时.分.秒 HTML <el-form-item label="盘点开始时间" prop ...

  7. elementUI日期时间选择器

    1.只能选择今天和今天以后的时间范围 <el-date-pickerv-model="shop.receive_time[0]"type="date"si ...

  8. Vue iview时间组件DatePicker,设置开始时间和结束时间约束

    html模板代码: <FormItem label=""><Row><Col span="11"><DatePicke ...

  9. element-UI组件之日期时间选择器与时间格式转化

    element-UI组件之日期时间选择器与时间格式转化 日期选择器与时间选择器的一般使用 日期时间选择器 选择日期时间点 选择日期范围 日期选择器 月份范围选择器 禁选日期 用time.getTime ...

  10. Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案

    官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...

最新文章

  1. Android中的意图匹配--IntentFilter的作用
  2. Topcoder SRM570 900 CurvyonRails
  3. Transformer入门篇-深度万字长文带你轻松入门深度学习框架
  4. 编码练习——Java-String-API-练习
  5. SSM中jsp向后台Controller传值中文乱码的奇葩解决!!!
  6. 1.11 超过人的表现
  7. 注册app短信验证平台_免费的短信验证码平台弊端竟然这么多!
  8. centos7.9使用rpm安装Jenkins_亲测成功---持续集成部署Jenkins工作笔记0022
  9. antv g6 禁止移动_十 AntV
  10. 如何在苹果MacBook Pro上打开和使用Touch Bar Zoom?
  11. 线性表的顺序存储C++代码实现
  12. SpringMVC学习(五)处理前端的请求参数及数据回显
  13. 启动FastDFS,安装nginx,整合fdfs与nginx,进行上传下载测试
  14. java数组名加括号_数组作参数被使用时,数组名后必须加方括号
  15. 关于SQL注入及防御
  16. 模糊C均值聚类算法matlab实现,FCMClust(模糊c均值聚类算法MATLAB实现)
  17. 【PyCharm】PyCharm破解版在系统崩溃后无法启动
  18. 华为交换机基于IP地址划分VLAN配置实验
  19. 货币时间价值(学习笔记)
  20. killall为什么有时候会找不到进程?

热门文章

  1. wps改照片底色有红边_Excel怎么给证件照换底色?Excel中快速将证件照蓝底换红底的方法介绍...
  2. sql:mysql:分析为什么like模糊查询效率低
  3. Ubuntu环境下制作win7-U盘引导盘
  4. 如何使用 CSS 使表格居中(快速指南)
  5. 数据安全:Mock数据
  6. 字符串和数字相加,结果为字符串
  7. Python实现求矩阵的伴随矩阵
  8. 解决谷歌浏览器 Google Chrome不能拖拽安装离线插件的办法
  9. GPS从入门到放弃(二十二) --- 站点位移
  10. aso优化师是什么_什么是ASO优化?