需求场景如下:

  1. 指定起止日期,后选的将会受到先选的限制
  2. 不同的日期选择器,不过也存在关联关系

实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDate 即可。

 

标签中 <el-form-item label="统计起期" prop="contract_start_date" >
<el-date-picker
v-model="formInline.contract_start_date"
placeholder="选择时间"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:default-value="startDate"
:picker-options="pickerOptionsStart"
style="width: 100%;"
></el-date-picker>
</el-form-item>
picker-options="pickerOptionsStart"的设置
<el-date-picker />使用会出现起始日期和结束日期,结束日期不能早于起始日期,选择了起始日期后,结束日期大于起始日期的不可选,置灰,
同理先选结束日期后再选起始日期,那么起始日期不能选截止日期后面的。
//设定时间
console.log("----------now-----"+now)
var startDate=new Date(Date.UTC(now.getFullYear(),Mmonth,Dday));
console.log("----------startDate-----"+startDate
---------------------------------------------------

pickerOptionsStart: {
                    disabledDate: time => {
let endDateVal = this.formInline.contract_end_date;
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime(); //选则的时间
}
}
},
//结束时间
var endDate=new Date(Date.UTC(now.getFullYear(),"11","31"));
console.log("----------endDate-----"+endDate)
this.formInline.contract_end_date = endDate ;
------------------------------------------

pickerOptionsEnd: {
                    disabledDate: time => {
let beginDateVal = this.formInline.contract_start_date;
if (beginDateVal) {
return (
time.getTime() <
new Date(beginDateVal).getTime() //return 小于今天的时间,昨天,前天
);
}
}
},

参考:https://www.cnblogs.com/zyz-s/p/11972599.html

atzhang

vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用的更多相关文章

  1. element UI+vue关于日期范围选择的操作,picker-options属性的使用

    一般 <el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么 ...

  2. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  3. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  4. 如何在 Vite 中使用 Element UI + Vue 3

    在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...

  5. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  6. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  7. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  8. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  9. 第五十三篇:Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

随机推荐

  1. Mybati-Plus的用法 记录

    参考文件下载地址:  https://files.cnblogs.com/files/bulter/MyBatis-Plus.zip --------------------------------- ...

  2. noip2012 总结

    Vigenère 密码 题目描述 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法――Vigenère 密码.Vigenère 密码的加密解密算法简单易用,且破译 ...

  3. VBS脚本编程(10)——编写WMI脚本

    WMI介绍 1.WMI是什么? WMI--Windows管理规范(Windows Management instrumentation). 是一项核心的Windows管理技术. 采用统一的.基于开放标 ...

  4. 电容三点式振荡电路详解及Multisim实例仿真

    电容三点式振荡器也称考毕兹(Colpitts,也叫科耳皮兹)振荡器,是三极管自激LC振荡器的一种,因振荡回路中两个串联电容的三个端分别与三极管的三个极相接而得名,适合于高频振荡输出的电路形式之一.电容 ...

  5. Vue.js的基础学习

    Vue.js的基础网上很多,这里不记录 开始正式页面的开发 1.页面加载时请求数据 methods: { post() { //发送post请求 this.$http.post('../../ashx ...

  6. 什么是OSI的第7层

    1.什么是Internet的第7层? 第7层是指Internet的7层OSI模型的顶层,也称为"应用程序层".这是数据处理的顶层,位于用户与之交互的软件应用程序的表面之下或幕后.例 ...

  7. 8、ITSM基本概念(2)

    6.流程和职能: 7.故障管理: (1)故障管理的输入和输出: (2)故障管理的目标: 优先解决影响度大的事件: (3)故障管理的指标: (4)故障管理的流程: 8.问题管理: (1)问题管理的输入和 ...

  8. 8、基本数据类型(dict)

    8.1.字典: 1.字典元素用大括号括起来,用逗号分割每个元素,字典元素是"key:value"的形式 dic = { "k1": 'v1', #键值对 &qu ...

  9. Java核心基础第3篇-Java流程控制

    Java流程控制 本章一起来探讨下Java的流程控制语句.主要从以下几个方面展开: Java分支语句 Java循环语句 Java其实和其他任何的开发语言一样,分支语句和循环语句是必不可少的,有个这两个 ...

  10. 华为高级研究员谢凌曦:下一代AI将走向何方?盘古大模型探路之旅

    摘要:为了更深入理解千亿参数的盘古大模型,华为云社区采访到了华为云EI盘古团队高级研究员谢凌曦.谢博士以非常通俗的方式为我们娓娓道来了盘古大模型研发的"前世今生",以及它背后的艰难 ...