当前位置: 首页 > news >正文

el-date-picker 限制选择六个月内的日期

效果如图:在这里插入图片描述

代码:

 <el-date-picker v-model="serchTimes" type="daterange" size="small" start-placeholder="开始时间"range-separator="~" end-placeholder="结束时间" format="yyyy / MM / dd ":picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @change="changeTime":default-time="['00:00:00', '23:59:59']"  :unlink-panels="true" :validate-event="false" :clearable="false"></el-date-picker>

主要::picker-options=“pickerOptions” 中的配置:

onPick配置项中可以获取到点击时的时间,将其转换为时间戳后存储起来。

disabledDate配置项中配置只能选择前后6个月,这个配置项的参数是当前的日期,返回参数要求是Boolean值

其他属性解析:format="yyyy / MM / dd ": 选择后显示的样式

default-time 是因为需要默认的时分秒才添加的

value-format 是点击确认后,change事件中能获取到的数据格式,在这里插入图片描述
:unlink-panels=“true” 是取消两个面板之间的联动滚动

:validate-event=“false” 取消点击时的校验,按需写

:clearable=“false” 取消清除功能 ,按需写

data(){return{serchTimes: '',selectData: '',pickerOptions: {onPick: ({ maxDate, minDate }) => {this.selectData = maxDate ? maxDate.getTime() : minDate ? minDate.getTime() : ''if (!maxDate || !minDate) {this.serchTimes = ''  //只选一个的时候,日期置空}},},disabledDate: (time) => {if (this.selectData) {const curDate = this.selectData;const three = 183 * 24 * 3600 * 1000;// 6个月const threeMonthsAfter = curDate + three; // 开始时间+6个月const threeMonthsBefore = curDate - three; //开始时间-6个月return time.getTime() > threeMonthsAfter || time.getTime() < threeMonthsBefore;}}},}
},
methods:{//选择时间后的处理函数了,可以把数据保存后发送接口等等操作changeTime() {if (this.serchTimes) {this.reloadForm.begAbsTime = this.serchTimes[0]this.reloadForm.endAbsTime = this.serchTimes[1]}},
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • [图解]SysML和EA建模住宅安全系统-13-时间图
  • xss攻击
  • 容器之docker compose
  • 《简历宝典》08 - 简历中“教育背景”模块如何扬长避短
  • 48、DR+keepalive
  • JS【详解】类 class ( ES6 新增语法 )
  • Golang | Leetcode Golang题解之第227题基本计算器II
  • 架构面试-场景题-单点登录(SSO)怎么实现的
  • ELK日志分析系统概述及部署
  • x264 编码器 AArch64 汇编函数模块关系分析
  • 【数据结构】排序——快速排序
  • 计算机网络体系结构解析
  • 微生活服务平台与元宇宙的融合
  • 《长相思》第二季回归:好剧质量,永恒的王牌
  • 常用录屏软件,分享这四款宝藏软件!
  • 【RocksDB】TransactionDB源码分析
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • Angular2开发踩坑系列-生产环境编译
  • Apache的80端口被占用以及访问时报错403
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • java8-模拟hadoop
  • Linux gpio口使用方法
  • MySQL QA
  • RxJS: 简单入门
  • Service Worker
  • TypeScript迭代器
  • TypeScript实现数据结构(一)栈,队列,链表
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 回流、重绘及其优化
  • 微服务入门【系列视频课程】
  • 我是如何设计 Upload 上传组件的
  • 移动端解决方案学习记录
  • 用Visual Studio开发以太坊智能合约
  • 优化 Vue 项目编译文件大小
  • nb
  • No resource identifier found for attribute,RxJava之zip操作符
  • 第二十章:异步和文件I/O.(二十三)
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • 继 XDL 之后,阿里妈妈开源大规模分布式图表征学习框架 Euler ...
  • 摩拜创始人胡玮炜也彻底离开了,共享单车行业还有未来吗? ...
  • ​​​​​​​开发面试“八股文”:助力还是阻力?
  • # Panda3d 碰撞检测系统介绍
  • #stm32驱动外设模块总结w5500模块
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • $NOIp2018$劝退记
  • (C++)八皇后问题
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第1节 (全局数据、栈和堆)
  • (Java入门)学生管理系统
  • (Matlab)基于蝙蝠算法实现电力系统经济调度
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • (二)hibernate配置管理
  • (附源码)小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (三十五)大数据实战——Superset可视化平台搭建
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .