在使用elementUI中日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期。

  查阅官方文档,我们发现它介绍的并不详细,下面我们就来详细介绍一下:

 1.给 el-date-picker 组件添加 picker-options 属性,并绑定对应数据 pickerOptions

  

 2. 对绑定的数据值进行限制

   2.1 单个选择框的限制

    2.1.1 设置选择今天及最近一年内的日期(包括今天)

data(){
return {
pickerOptions: {
disabledDate(time) {
let curDate = (new Date()).toString() // 当前时间戳转为字符串
let curDateYear = (new Date()).getFullYear() // 当前时间的年份
let oneYearAgoDate = curDate.replace(curDateYear,curDateYear-1)// 字符串年份替换为一年前
let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
return time.getTime() > Date.now() || time.getTime() < oneYear;
}
}
}
}

    2.1.2  设置选择今天及今天以后的日期

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
}
}

    2.1.3 设置选择今天及今天以前的日期

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
}
}
}

    2.1.4 设置选择今天之后的日期(不能选择当天时间)

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
}
}
}

    2.1.5 设置选择今天之前的日期(不能选择当天)

data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
}

    2.1.6 设置选择三个月之前到今天的日期

data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 90 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
}
}
}

   2.2 两个输入框的限制

  

      设置开始时间不能大于结束时间(且只能选择当前时间以前的日期)

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();
}
}
}
}

      设置开始时间不能大于结束时间(能选择所有日期)

data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2) {
return time.getTime() > this.searchForm.endTime
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.searchForm.startTime
}
}
}
}

  

ElementUI 日期选择器 datepicker 选择范围限制的更多相关文章

  1. element-ui日期组件DatePicker选择日期范围赋值编辑问题

    最近在项目中使用element-UI的日期范围组件时遇到一个问题,相信很多人也做过这种场景,一个录入页面也同时是编辑页面,编辑的时候就需要先赋值.但是我给date组件赋值后,确无法操作了,change ...

  2. Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker

    原文:Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker 在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习And ...

  3. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

  4. elementui 日期选择器设置当前默认日期(picker-options),以及当前日期以后的无法选择(default-value)

    目前官方的日期默认是当前日期,打开之后长这样子:现在是三月13日,但是有的需求是当前日期在后面. 就像这样: 代码如下: default-value是设置当前日期默认值的."timeDefa ...

  5. ElementUI日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择的日期,这 ...

  6. element-ui 日期选择器范围时间限制

    来自 https://www.cnblogs.com/xjcjcsy/p/7977966.html 侵删 ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一 ...

  7. vue element-ui 日期选择器组件 日期时间格式化

    vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...

  8. ElementUI DatePicker 日期选择器控制选择时间范围

    选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...

  9. elementUI日期选择器 el-date-picker根据所选日期选择禁用

    我遇到这样一个场景,需要动态渲染时间表单,但是后端传过来的数据, 这个时候就不能预先找到想要限制的date了,因为连date本身,也是根据后端传来的数据生成的. 如图: 代码如下: //templat ...

随机推荐

  1. [洛谷P4463] calc (生成函数)

    首先注意到题目中 \(a\) 数组是有序的,那我们只用算有序的方案乘上 \(n!\) 即可. 而此时的答案显然 \[Ans=[x^n](1+x)(1+2x)\dots (1+Ax)=\prod_{i= ...

  2. 精简版logging

    # coding=utf-8 import logging import time import os import logging.handlers import re def logger(sch ...

  3. django ForeignKey ManyToMany 前后端联动

    总结 外键基本和普通的字段是一样的 多对多 获取 getlist() 更新 clear() add() remove() 前端和后端是通过字符串沟通的,所以使用ajax的时候如果是数据类型,记得要JS ...

  4. Springmvc-crud-01错误

    错误:无法显示图书列表内容 原因:获取存储域对象中的名字写错了 controller层: 前端页面: 解决方案:前后端的代码要保持一致(名字自己定义),写代码要细心 修改成功后的界面

  5. springboot项目部署到服务器上

    链接:https://blog.csdn.net/qq_22638399/article/details/81506448#commentsedit 链接2:https://blog.csdn.net ...

  6. Spring基础篇——通过Java注解和XML配置装配bean(转载)

      作者:陈本布衣 出处:http://www.cnblogs.com/chenbenbuyi 本文版权归作者和博客园共有,欢迎转载分享,但必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留 ...

  7. 【MySQL】安装及配置

    " 目录 #. 概述 1. 什么是数据(Data) 2. 什么是数据库(DataBase, 简称DB) 3. 什么是数据库管理系统(DataBase Management System) 4 ...

  8. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真(06)

    在知网看到了江南大学的硕士论文: 双有源层a-IGZO薄膜晶体管的特性仿真 IGZO/IZO双有源层薄膜晶体管特性的模拟研究 发现,我昨天的文章中参数的设置存在重大失误,如下材料定义语句中: mate ...

  9. POJ 1995 Raising Modulo Numbers(快速幂)

    嗯... 题目链接:http://poj.org/problem?id=1995 快速幂模板... AC代码: #include<cstdio> #include<iostream& ...

  10. 2.3.FastDFS-单机拆分版-与Nginx整合配置

    Centos610系列配置 我们在Centos610FastDFS单机模式-FastDFS安装 中已经完成了FastDFS的安装,接下来我们进行FastDFS调度器的安装. 1.找到先前解压出来的fa ...