elementUI 日期时间选择器el-date-picker开始时间与结束时间约束
主要思路: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开始时间与结束时间约束相关推荐
- element-ui 日期时间选择器el-date-picker 设置禁止选择日期
element-ui 日期时间选择器el-date-picker 设置禁止选择日期 使用日期选择器时,有的时候需要禁止选择一些日期,我们可以通过快捷选项 picker-options 对象中的禁用日期 ...
- ElementUI日期时间选择器禁止此刻之前的所有时间选择(精确到,时、分、秒)、pickerOptions、日期选择器范围选择
elementUI日期时间选择器范围(精确到,时.分.秒.
- elementUI 日期时间选择器添加默认时间
GetDateStr(AddDayCount) { var dd = new Date();dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后 ...
- element-UI日期时间选择器el-date-picker
<template><div><el-form :model="form" label-width="150px" ref=&qu ...
- vue2 + elementui 日期时间选择器 禁止选择当前时间之前的日期及时间,并添加相应校验规则
项目里有这样一个需求:文章设置的预发布时间不得早于当前时间(包括日期和时分秒时间). 具体实现如下: 1.在日期时间选择其中设置禁止选中(包括日期和时间) (1)在html(template)中, 通 ...
- ElementUI日期时间选择器限制时间范围,禁止此刻之前的所有时间选择(精确到,时、分、秒)、pickerOptions、日期选择器范围选择
需求:可选择的时间大于当前时间,不符合条件的全部禁用 以下实现方式可精确到年.月.日.时.分.秒 HTML <el-form-item label="盘点开始时间" prop ...
- elementUI日期时间选择器
1.只能选择今天和今天以后的时间范围 <el-date-pickerv-model="shop.receive_time[0]"type="date"si ...
- Vue iview时间组件DatePicker,设置开始时间和结束时间约束
html模板代码: <FormItem label=""><Row><Col span="11"><DatePicke ...
- element-UI组件之日期时间选择器与时间格式转化
element-UI组件之日期时间选择器与时间格式转化 日期选择器与时间选择器的一般使用 日期时间选择器 选择日期时间点 选择日期范围 日期选择器 月份范围选择器 禁选日期 用time.getTime ...
- Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案
官方文档 https://element.eleme.cn/#/zh-CN/component/datetime-picker 问题分析 el-date-picker组件需要 :picker-opti ...
最新文章
- Android中的意图匹配--IntentFilter的作用
- Topcoder SRM570 900 CurvyonRails
- Transformer入门篇-深度万字长文带你轻松入门深度学习框架
- 编码练习——Java-String-API-练习
- SSM中jsp向后台Controller传值中文乱码的奇葩解决!!!
- 1.11 超过人的表现
- 注册app短信验证平台_免费的短信验证码平台弊端竟然这么多!
- centos7.9使用rpm安装Jenkins_亲测成功---持续集成部署Jenkins工作笔记0022
- antv g6 禁止移动_十 AntV
- 如何在苹果MacBook Pro上打开和使用Touch Bar Zoom?
- 线性表的顺序存储C++代码实现
- SpringMVC学习(五)处理前端的请求参数及数据回显
- 启动FastDFS,安装nginx,整合fdfs与nginx,进行上传下载测试
- java数组名加括号_数组作参数被使用时,数组名后必须加方括号
- 关于SQL注入及防御
- 模糊C均值聚类算法matlab实现,FCMClust(模糊c均值聚类算法MATLAB实现)
- 【PyCharm】PyCharm破解版在系统崩溃后无法启动
- 华为交换机基于IP地址划分VLAN配置实验
- 货币时间价值(学习笔记)
- killall为什么有时候会找不到进程?