Element el-date-picker 日期选择器详解

女爷i 2022-09-15 15:48 377阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 基本用法
 *  3. 日期格式化
 *  4. 选择其他日期单位
 *  5. 选择多个日期
 *  6. 带快捷选项
 *  7. 禁用部分日期
 *  8. 小结

# 1. 前言 #

日期选择器用来选择一个或者多个日期，例如选择某个人的生日，再例如选择订单的创建日期，应用还是非常普遍的。

本篇就来介绍下Element提供的日期选择器的常见用法。

# 2. 基本用法 #

编写html代码如下：

选择任意日期：
        <el-date-picker v-model="value" type="date" placeholder="选择日期" @change="dateChange"> 
        </el-date-picker>

如上代码会显示一个日期选择器，且选中日期的值绑定了`value`变量，且当选中日期发生变化时，会触发`dateChange`方法。

对应效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_10_color_FFFFFF_t_70_g_se_x_16]

# 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已经被格式化：  
![在这里插入图片描述][a39aab04b75e4d2c8a45bea89cb7bbaa.png]

# 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>

效果：  
![在这里插入图片描述][52daa77c513b4ae09b2a591ffb23e148.png]

# 5. 选择多个日期 #

el-date-picker还支持选中多个日期，通过将type属性值设置为`dates`即可。

选择多个日期
        <el-date-picker type="dates" v-model="valueDates" placeholder="选择一个或多个日期">
        </el-date-picker>

效果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16]

# 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`对应按钮，即可将我们代码编写的值选中，效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16]

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

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16 1]

# 8. 小结 #

el-date-picker日期选择器提供的功能很全面，实现起来也挺简单，还是比较好用的。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/db31bfdcdeb444ec9f25c04f411db0ad.png
[a39aab04b75e4d2c8a45bea89cb7bbaa.png]: /images/20220828/9a60a4c9535949cc976af1a719b9c8d8.png
[52daa77c513b4ae09b2a591ffb23e148.png]: /images/20220828/afae873c737341bf9a8f60b1b70a2e1c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d11beb43f8f949ce927fc1a834c73a55.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c47b8d44b4d944e1a47c61fdba4009fe.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/5d16c6404ee24a7081f99ce80ec021b3.png