关于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 ...
随机推荐
- LINUX笔记之一概述
unix商业发行版三个主要的:IBM的AIX,HP的HP-UX,SUN的Solaris.AIX和HP-UX只能装在对应的机器上,只有Solaris可以装在个人PC上. 普通发行版FREE BSD和LI ...
- yum 安装 mongodb
1 .添加阿里源 vi /etc/yum.repos.d/mongodb.repo [mongodb-org] name=MongoDB Repository baseurl=http://mirro ...
- IntelliJ IDEA常用快捷键总结
之前开发项目一直用的是eclipse进行开发,近期在使用IDEA这个工具进行项目开发,之前在eclipse上能使用的快捷键方法放在IDEA上很多都不适用了,因此在此总结一下关于IDEA快捷键的使用方法 ...
- HTML标签与属性
HTML中常用的一些标签和属性. 1.lang属性:搜索引擎 en:英文, zh:中文 2.meta:元数据 charset属性:字符集编码方式 3.h1~h6:标题 一级标题 ...
- pgadmin4 csrf错误导致docker-compose postgres服务下线
docker-compse up 启动的前台服务, 过一会就自动停止 检查半天,发现是pgadmin4没安装正确不断报400 和 csrf error 然后pgadmin4为啥报这个, 因为pytho ...
- python模块turtle简单用法
##初始化turtle:t = turtle.Turtle() 或者 t = turtle.Pen()##查询turtle状态#位置t.position() #箭头朝向,箭头朝向按照顺时针或者逆时针偏 ...
- linux crontab 定时任务,任务命令单独linux执行正常,放定时任务就不执行了,解决办法 (原)
这是我crontab里面的内容 */30 * * * * ./usr/bin/wget -q -O sync_log.txt http://fly.dllm.cn/index.php/Home/In ...
- [CSP-S模拟测试]:花(DP)
题目传送门(内部题111) 输入格式 一个整数$T$,表示测试数据组数. 每组测试数据占一行,两个整数,分别表示$L$和$S$. 输出格式 对每组数据,输出一个整数表示答案. 样例 样例输入1: 13 ...
- oracle判断一个字段为空
比如 insert into table a (a1,b1)values("a1",''); 对于这种情况,因为表里存的是'',其实是没有内容的,要查询这个字段,不能直接使用 se ...
- 安装OpenCV 3 on Raspbian Jessie
环境: 硬件:树莓派三代B型, 5MP Camera Board Module 软件:Raspbian,Opencv 安装依赖 $ sudo apt-get update $ sudo apt-g ...