Element el-date-picker 日期选择器的使用
作者:程序员大阳 时间:2024-05-09 15:09:08
1. 前言
日期选择器用来选择一个或者多个日期,例如选择某个人的生日,再例如选择订单的创建日期,应用还是非常普遍的。
本篇就来介绍下Element提供的日期选择器的常见用法。
2. 基本用法
编写html代码如下:
选择任意日期:
<el-date-picker v-model="value" type="date" placeholder="选择日期" @change="dateChange">
</el-date-picker>
如上代码会显示一个日期选择器,且选中日期的值绑定了value
变量,且当选中日期发生变化时,会触发dateChange
方法。
对应效果如下:
3. 日期格式化
有时候我们需要,按照我们设定的格式,来处理绑定的日期值,可以通过value-format
属性来指定格式,常用的格式化字符串包括:
yyyy 年
MM 月
WW 周
dd 日
HH 时 (24小时制)
hh 时 (12小时制)
mm 分钟
ss 秒
所以,如果按照MySQL数据库对日期字符串格式化要求,我们编写代码如下:
日期格式化:{{value}}
<el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
选中某个日期后,对应效果如下,可见value已经被格式化:
4. 选择其他日期单位
除了选中某一天,有时候我们还会面临,选择某一周、某个月份、某个年份的需求,此时可以通过type
属性来设置。
例如:
选择其他日期单位
<el-date-picker v-model="valueWeek" type="week" format="yyyy 第WW周" placeholder="选择周">
</el-date-picker>
<el-date-picker v-model="valueMonth" type="month" placeholder="选择月">
</el-date-picker>
<el-date-picker v-model="valueYear" type="year" placeholder="选择年">
</el-date-picker>
效果:
5. 选择多个日期
el-date-picker还支持选中多个日期,通过将type属性值设置为dates
即可。
选择多个日期
<el-date-picker type="dates" v-model="valueDates" placeholder="选择一个或多个日期">
</el-date-picker>
效果:
6. 带快捷选项
有时候,我们希望可以直接选择昨天、上周、上月,这些经常使用的日期不需要我们去查找,就能快速选中,此时可以借助picker-options
属性来实现。
代码:
带快捷选项
<el-date-picker v-model="value" align="right" type="date" :picker-options="optionsFast" placeholder="选择日期">
</el-date-picker>
optionsFast: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
通过上述代码,点击text
对应按钮,即可将我们代码编写的值选中,效果如下:
7. 禁用部分日期
通过picker-options
还可以禁用部分日期,代码:
禁用部分日期
<el-date-picker v-model="value" align="right" type="date" :picker-options="optionsDisable" placeholder="选择日期">
</el-date-picker>
optionsDisable: {
disabledDate(time) {
return time.getTime() > Date.now();
},
}
效果如下:
8. 小结
el-date-picker日期选择器提供的功能很全面,实现起来也挺简单,还是比较好用的。
来源:https://studyingpanda.blog.csdn.net/article/details/120745535
标签:Element,el-date-picker,日期选择器
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Sql Server 索引使用情况及优化的相关Sql语句分享
2012-06-06 19:49:36
安装docker-compose的两种最简方法
2022-10-03 21:39:44
MySQL 定时器EVENT学习
2010-10-14 13:55:00
详解python的异常捕获
2023-05-27 11:24:03
![](https://img.aspxhome.com/file/2023/7/71517_0s.png)
重新认识视觉设计
2009-09-08 12:46:00
Python基于正则表达式实现检查文件内容的方法【文件检索】
2021-06-11 07:58:45
python 类对象的析构释放代码演示
2023-11-22 18:54:53
使用JavaScript获取地址栏参数的方法
2024-04-28 10:18:25
分享15 超级好用得 Python 实用技巧
2023-03-01 06:42:09
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2021-11-30 22:35:03
![](https://img.aspxhome.com/file/2023/0/91840_0s.png)
nditer—numpy.ndarray 多维数组的迭代操作
2023-10-20 20:21:10
![](https://img.aspxhome.com/file/2023/2/66852_0s.jpg)
pytorch关于Tensor的数据类型说明
2023-08-22 20:39:27
![](https://img.aspxhome.com/file/2023/8/85288_0s.png)
Python多进程编程multiprocessing代码实例
2022-11-20 20:25:51
python根据文件大小打log日志
2022-04-28 06:29:35
js 采用delete实现继承示例代码
2023-07-17 09:06:52
pygame实现俄罗斯方块游戏(基础篇3)
2022-10-10 10:45:54
![](https://img.aspxhome.com/file/2023/9/69529_0s.jpg)
Mysql中的concat函数(拼接函数)详解
2024-01-27 21:01:37
在ASP.NET2.0通过SMTP的验证发送EMAIL
2007-09-23 12:29:00
python海龟绘图之画国旗实例代码
2022-03-06 14:57:23
![](https://img.aspxhome.com/file/2023/5/86575_0s.jpg)
Python安装第三方库的3种方法
2022-02-03 03:10:47