关于ElementUI中日期选择器时间选择范围限制
1、组件代码
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0">
</el-date-picker>
2、设置选择今天以及今天之后的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
3、设置选择今天以及今天以前的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}
4、设置选择今天之后的日期(不能选择当天时间)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}
5、 设置选择今天之前的日期(不能选择当天)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
6、设置选择三个月之前到今天的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = * * * ;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
}
}
7、两个输入框
<el-date-picker
v-model="value1"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v-model="value2"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1">
</el-date-picker>
限制结束日期不能大于开始日期
data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},
}
}
关于ElementUI中日期选择器时间选择范围限制的更多相关文章
- 【ElementUI】日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期, ...
- ElementUI datepicker日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 最近做项目用到了datepicker,需要对日期选择做一些限制, ...
- ElementUI】日期选择器时间选择范围限制,只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期
<el-date-picker v-model="value1" type="date" placeholder="选择日期" :pi ...
- element-ui DatePicker 日期选择器 让结束日期大于开始日期
element-ui DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...
- ElementUI日期选择器时间选择范围限制
ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...
- iview和element中日期选择器快捷选项的定制控件
公司的两个vue项目中都用到了iview和element这个框架,最近的两个需求都有关于日期选择的定制控件,就是要求日期选择的快捷选项左边栏有包含今日.昨日.本周.上周.最近一周.本月.上月.上季 ...
- ElementUI DatePicker 日期选择器控制选择时间范围
选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...
- element-ui 时间日期选择器格式化后台需要的格式
<el-date-picker v-model="startTime" type="datetime" format="yyyy-MM-dd H ...
- element-ui 中日期控件限制时间跨度
支持点击今天及之前任意日期,前后跨度不超过31天,且不超过今天 <el-date-picker v-model="searchForm.dateRange" type=&qu ...
随机推荐
- 胡昊—第6次作业—static关键字、对象
#题目1:编写一个类Computer,类中含有一个求n的阶乘的方法.将该类打包,并在另一包中的Java文件App.java中引入包,在主类中定义Computer类的对象,调用求n的阶乘的方法(n值由参 ...
- 从hive中读取数据推送到kafka
由python2.7语言实现的,包也比较旧了. # -*- coding: utf-8 -*- # Version: 1.0.0 # Description: py_Hive2Kafka2kafka ...
- Acwing-278-数字组合(背包)
链接: https://www.acwing.com/problem/content/280/ 题意: 给定N个正整数A1,A2,-,AN,从中选出若干个数,使它们的和为M,求有多少种选择方案. 思路 ...
- JAVA笔记10-抽象类
(1)abstrac关键字类修饰的类是抽象类,用abstract修饰的方法是抽象方法: (2)含有抽象方法的类必须被定义为抽象类: (3)抽象类必须被继承,抽象方法必须被重写(或者将子类也声明为抽象类 ...
- Spring Controller RequestMapping
不同的Controller,可以标记相同的RequestMapping 但是精确到函数上时,不可以标记相同的RequestMapping构成完成相同的请求路径,如果标记,运行会报错,提示有相同的路径, ...
- 使用 Reactjs + Mobx + React-Router 开发项目时 VSCode 编辑器报警 TS 相关的问题(提示experimentalDecorators )
vscode 对于 JS support 的支持需要配置,在项目根目录下创建一个 jsconfig.json 文件,把以下内容贴入后保存,重启项目即可生效(去掉提示). { "compile ...
- Spring boot之MyBatis
文章目录1. 环境依赖2. 数据源2.1. 方案一 使用 Spring Boot 默认配置2.2. 方案二 手动创建3. 脚本初始化4. MyBatis整合4.1. 方案一 通过注解的方式4.1.1. ...
- Redis Cluster with SpringBoot
前提: 按照 https://www.cnblogs.com/luffystory/p/12081074.html 配置好Redis Cluster in Ubuntu 按照如下结构搭建项目结构: P ...
- DS博客作业08—课程总结
1.当初你是如何做出选择计算机专业的决定的? 开始时我选择的专业就是网络/物联网,计算机专业是一个充满创造性的专业 2.对比开篇博客,哪些方面还存在哪些不足? 这个人就像戏台上的老将军,全身插满fla ...
- spark中使用的内存文件系统-Tachyon FS 简介
转自:http://blog.csdn.net/u014252240/article/details/41810849 发布人:南京大学PASA大数据实验室顾荣 1. Tachyon是什么 Tach ...