Element-UI饿了么时间组件控件按月份周日期,开始时间结束时间范围限制参数
时间:2022-07-24
本文章向大家介绍Element-UI饿了么时间组件控件按月份周日期,开始时间结束时间范围限制参数,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在日常开发中,我们会遇到一些情况,在使用Element-UI 限制用户的日期时间范围的选择控制(例如:查询消息开始和结束时间,需要限制不能选择今天之后的时间)。
看了网上的一些文档,零零散散、各式各样的都是简单的吧代码列出来,并没有详细的说明各参数的含义,用途,对新手及其不友好。
我们这里使用的是 DatePicker 日期选择器: Element官网日期控件地址,新手对于日期使用限制时间,可能不太理解写限制规则的方式。接下来我们将详细的解读日期限制的参数设置。全方位的透彻理解怎么限制日期控件的时间。
官方文档日期限制说明:
先看饿了么这里的官方文档,这里写的很简洁,使用 disabledDate 参数来限制, disabledDate 是一个函数,函数内有一个形参,以下是简单伪代码示例
// HTML 首先在日期选择器加上:picker-options属性
// 例如:
<el-date-picker
v-model="endDate"
:picker-options="disabledDate"
>
</el-date-picker>
// Vue 中 data里面写入相关参数
disabledDate: (time) => {
return time.getTime() < new Date().getTime()
// 此处 time 的形参,time默代表选择器的每一个当前时间,用于判断这些时间是否可选.
// 通过 return time > 某个时间 或者 return time < 某个时间来限制时间的选择范围.
// 记得时间需要使用 .getTime() 转换成 毫秒.
})
以上是个简单的示例,相信仔细阅读后的同学,现在一定已经了解时间限制的方法,很简单其实就是通过设置 disabledDate 的形参 time, return 出一个大于或者小于的公式,即可来设置日期的使用范围。
接下来,我们使用两个详细的案列来更清晰解读一下,日期控件的使用方法、
两个日期联动控制(限制开始和结束时间为最近一个月)
其实思路很简单,开始时间显示当前时间为最大,结束时间通过拿到开始时间的数据,限制最大为 开始时间或者当前时间即可;下面详细代码解读;
Tip: 日期控件需要的参数是 “2020-12-31”这种格式,但是在限制时间的函数使用 “<”、“>”、">="、“<=”,这些比较方法是,需要使用.getTime()转化成毫秒,否则“2020-12-31”这种格式是无法对比的哦~
// HTML 代码
<el-date-picker
v-model="value1"
placeholder="开始时间"
:picker-options="start">
</el-date-picker>
<el-date-picker
v-model="value2"
placeholder="结束时间"
:picker-options="end">
</el-date-picker>
// Vue 中 data 中代码
value1: '2020-12-31',
value2: '2020-12-31',
start: {
disabledDate: (time) => {
// 此处为30天时间的毫秒数
const space = 30 * 24 * 3600 * 1000
// 设置最小时间毫秒数,当前时间减去30天的毫秒数
const minTime = new Date().getTime() - space
// 设置最大时间毫秒数,当前时间加上今天天的毫秒数
const maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
// return 一个公式 最大为当前时间,最小为30天前
return time.getTime() < minTime || time.getTime() > maxTime
}
},
end: {
disabledDate: (time) => {
// 此处为30天时间的毫秒数
const space = 30 * 24 * 3600 * 1000
// 拿到开始时间的日期
const startTime = value1
// 设置当前选择时间
const startTimes = startTime || new Date().getTime() - space
// 设置最小选择时间,dateRange为当前时间需要手动方法获取当前时间,下方代码有展示获取当前时间的方式
const minTime = (startTimes === dateRange) ? new Date(startTimes).getTime() : new Date(startTimes).getTime() - (1 * 24 * 3600 * 1000)
// 设置最大选择时间为今天
const maxTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
// 这里依旧是return 一个公式 最大为今天或者开始框中选择的时间,最小为30天前
return time.getTime() < minTime || time.getTime() > maxTime
}
},
// 获取当前时间的函数写法
var dd = new Date()
dd.setDate(dd.getDate() + addDate) // 获取第addDate天后的日期
var y = dd.getFullYear()
var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
// 获取当前几号,不足10补0
let dateRange = y + '-' + m + '-' + d
授人以鱼不如授人以渔,希望大家可以更好地去理解,这个日期控件限制方法的使用,而不是一味地去复制相关的代码,短时间内复制可能更快,但是想要提高自己就要不断地去理解每一个参数的设计、用法、理念。
如果大家有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家!
本文为Tz张无忌原创文章,读后有收获可以右侧边栏请作者喝咖啡,转载请文章注明出处:https://www.cnblogs.com/zhaohongcheng/
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 树的重心
- PostgreSQL 13:索引并行vacuum
- 『数据库』震惊,某博主为吸引眼球拿出压箱底SQL总结,如果你没看那就吃亏了!(超级详细的SQL基础,你还不会的话就别学数据库了)
- 萌新不看会后悔的C++基本类型总结(一)
- 2019 ICPC 银川网络赛 D. Take Your Seat (疯子坐飞机问题)
- 2019 ICPC 银川网络赛 H. Fight Against Monsters
- 状态压缩DP(大佬写的很好,转来看)
- 2019 ICPC 银川网络赛 F-Moving On (卡Cache)
- 树形结构--二叉树的遍历算法应用(十九)
- POJ1088 滑雪题解+HDU 1078(记忆化搜索DP)
- 2019 ICPC 南京网络赛 F Greedy Sequence
- 补题Codeforces 1102E. Monotonic Renumeration
- 2019 ICPC 南京网络赛 H-Holy Grail
- 写代码?程序猿?你不能不懂的八大排序算法的Python实现
- Java开发编程规范:5.集合处理