element-UI时间控件:日期时间的选择范围的控制方法
例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 ;
当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选;实现如下;
<el-form-item label="时间选择" prop="addTime">
<el-date-picker
:editable="false"
unlink-panels
v-model="form.addTime"
type="daterange"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
:default-value="defaultValue">
</el-date-picker>
</el-form-item>
export default {
data() {
let tool = this.tool
let _this = this
return {
form:{
time:[], //为时间范围段
addTime:[], //为最终选择的时间,组件绑定的时间
},
formRules:{
addTime:[{ required: true,message: '时间不能为空!', trigger: 'blur' }],
},
pickerOptions: {
disabledDate (time) {
let t = _this.tool.date.format(new Date(), "yyyy-MM-dd")
t= t+' 00:00:00'
let myDate = new Date(_this.form.time[0])
let year = myDate.getFullYear()
let month = myDate.getMonth()
let date = myDate.getDate()
if(_this.form.time[1]){
if(new Date(year, month, date).getTime() < new Date(t).getTime()){
return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(t).getTime()
}
return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(year, month, date).getTime()
}else {
if(new Date(year, month, date).getTime() < new Date(t).getTime()){
return time.getTime() < new Date(t).getTime()
}
return time.getTime() < new Date(year, month, date).getTime()
}
}
},
defaultValue:tool.date.format(new Date(),'yyyy-MM-dd'),
}
}
}
element-UI时间控件:日期时间的选择范围的控制方法的更多相关文章
- 自定义EasyUI的datetimebox控件日期时间的显示格式(转)
工作中遇到的问题,在此记录一下. 需求:前台页面使用了EasyUI框架,在某一个html页面中要求datetimebox显示格式为年月日和小时,如图所示: 尝试过两种方法,分别如下: 第一种方法: d ...
- angular1时间控件之时间比较大小,比如入住日期和离店日期,入住不能晚于离店时间
功能可能是大家有时遇到的,不过angluar1现在用的人很少了,希望帮上和我一样掉坑里的朋友吧,之前自己也在网上找过几乎没找到angluar1和我代码需求一样的控件,没办法自己造 了,看代码图 就差不 ...
- jquery-ui日期时间控件实现
日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:htt ...
- UWP学习记录8-设计和UI之控件和模式5
UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...
- element ui 时间控件 多个日期
前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...
- jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
- 学习日期时间控件 daterangepicker
aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...
- VB6.0中,DTPicker日期、时间控件不允许为空时,采用文本框与日期、时间控件相互替换赋值(解决方案)
VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...
- jquery 时间控件怎么能禁止输入只能选择日期?
jsp一个input输入框用的是easyui时间控件,现在问题是如何是这个input只能点击选择日期,而禁止手动输入 解决方法::: 在日期的input标签里面添加::::editable=" ...
- 令人头痛的ExtJS日期时间控件
1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...
随机推荐
- linux 访问 windows 共享文件夹
http://www.01happy.com/linux-access-windows-shares-folders/
- 案例54-crm练习新增联系人
1 前台页面部分 1 linkman/add.jsp <%@ page language="java" contentType="text/html; charse ...
- Deferred跟promise跟js同步问题记录
之前的时候,碰到过几次同事问我,说js的同步怎么处理,就是我想先执行这段代码(耗时相对较长的一行,多数是异步的一些api调用),执行完了之后我再执行下边这句,每次我都很无奈的说不晓得,如果是ajax的 ...
- ZK使用
1. 关注问题 1. zookeeper集群如何保证请求的均匀分布? 由client建立连接时会随机取server保证均匀分布, 2.已布置完成的ZK集群如何扩容? 修改配置后逐台重启即可 2. ZK ...
- GitKraken使用教程-基础部分(4)
6. 打开现有的Git仓库 点击左上角 File ==> open repo ,出现如图 6‑1的界面: 图 6‑1 打开本地仓库 点击图中的 按钮就会出现一个对话框,如图 6‑2,以 G:\ ...
- ASP.NET那点不为人知的事(一)
http://www.cnblogs.com/OceanEyes/archive/2012/08/13/aspnetEssential-1.html#_label0 我们上网时,在浏览器地址输入网址: ...
- jeecg3.8在子表页面中使用WebUploader组件
bcAbout-update.jsp改动如下: 因为默认子表的上传组件不能回显,所以改造成WebUploader 1.在更新页面注销掉生成代码 <%--<script type=" ...
- 单元测试模拟request后台
编写测试单元 @RunWith(SpringJUnit4ClassRunner.class) 让测试运行于Spring测试环境 @WebAppConfiguration是一个类级别的注释,用于声明Ap ...
- npm package.json字段全解
name 在package.json中最重要的就是name和version字段.他们都是必须的,如果没有就无法install.name和version一起组成的标识在假设中是唯一的.改变包应该同时改变 ...
- 巧用CSS属性visibility与opacity代替鼠标经过的jQuery事件
一直使用jQuery的hover()函数来写鼠标经过事件,这几天发现其他同行直接使用CSS就搞定了.自己在线下也试了试: 当然也并不是没有前提条件,需要配合一些定位属性来使用(position/top ...