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一天
}
},
# 说明。添加多个时间限制,使用||而不是&&,因为这里返回的是disabledDate
processDate() {
const self = this
return {
disabledDate(time) {
if (self.form.beginTime) { //如果开始时间不为空,则结束时间大于开始时间,且大于当前时间
return new Date(self.form.beginTime).getTime() > time.getTime() || time.getTime() < Date.now() - 1000*3600*24
} else {
return time.getTime() < Date.now() - 1000*3600*24//开始时间不选时,结束时间最大值大于等于当天
}
}
}
},
elementUI 日期时间选择器el-date-picker开始时间与结束时间约束的更多相关文章
- 解决elementui日期时间选择器提交时与后台date类型不匹配问题
问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...
- elementUI 日期时间选择器 只能选择当前及之后的时间
日期时间选择器 只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...
- Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
- 24款最好的jQuery日期时间选择器插件
如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...
- Bootstrap-datepicker日期时间选择器的简单使用
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- 微信小程序----日期时间选择器(自定义精确到分秒或时段)
声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- 日期时间选择器插件flatpickr
前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
随机推荐
- Hadoop安装和使用
1.安装 1.1.下载hadoop-2.5.1.tar.gz 1.2.解压至安装目录 tar -zxv -f hadoop-2.5.1.tar.gz -C ../soft/ 1.3.配置hadoop相 ...
- NOIP2018提高组省一冲奖班模测训练(五)
NOIP2018提高组省一冲奖班模测训练(五) http://www.51nod.com/Contest/ContestDescription.html#!#contestId=79 今天有点浪…… ...
- STM32 ADC多通道转换DMA模式与非DMA模式两种方法(HAL库)
一.非DMA模式(转) 说明:这个是自己刚做的时候百度出来的,不是我自己做出来的,因为感觉有用就保存下来做学习用,原文链接:https://blog.csdn.net/qq_24815615/arti ...
- echarts在vue里面使用,以及基础配置。
基础的图表和基础的配置. 效果图如下: 1.安装图表依赖包:npm install echarts 2.在main.js里面 引入echarts import echarts from 'echart ...
- BJFU fudq的等式
/* BJFU fudq的等式 http://101.200.220.237/contest/19/problem/118/ 数论 勒让德定理 二分答案 */ #include <cstdio& ...
- 计算机-禁止USB服务
接到一个任务,禁止集团内所有电脑的USB接口进行文件拷贝,但不能妨碍打印机.鼠标键盘.扫描仪.加密狗等等一切需要USB接口工作的外部设备. 纠结了,这不摆明了让我蛋疼吗? 不过,疼归疼,办法总是要想滴 ...
- [SharePoint][SharePoint Designer 入门经典]Chapter13 客户端Silverlight编程
1.使用Silverlight,CAML和Linq取得数据 2.编程性创建更新删除列表数据项 3.修饰列表和库的配置 4.管理文件和文件夹 5.修改快速启动和顶部导航条 [使用Silverlight, ...
- Linux下I/O复用 Select与Poll
Select #include <sys/time.h>#include <sys/types.h>#include <sys/unistd.h> int sele ...
- [Tailwind] Style Elements on hover and focus with Tailwind’s State Variants
In this lesson, we learn how to target specific states of elements and apply styles only when those ...
- hdu 4603 Color the Tree
这道题细节真的非常多 首先能够想到a和b的最优策略一定是沿着a和b在树上的链走,走到某个点停止,然后再依次占据和这个点邻接的边 所以,解决这道题的过程例如以下: 预处理阶段: step 1:取随意一个 ...