Element el-date 日期时间选择器详解

我就是我 2022-09-16 03:58 365阅读 0赞

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

### 本文目录 ###

*  1. 前言
 *  2. 基本用法
 *  3. 设置默认时间
 *  4. 选择范围
 *  5. 设置默认起止时刻
 *  6. 小结

# 1. 前言 #

之前我们已经讲述了时间选择器，日期选择器的用法。

Element还提供了集日期时间与一体的选择器，即日期时间选择器，用于同时选择日期时间的场景。

# 2. 基本用法 #

代码如下：

基本用法，选择任意日期时间：{
       {value1}}
        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>

通过`type="datetime"`，设定了组件类型为日期时间选择器，通过`value-format`设置了值的格式，所以效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16]

# 3. 设置默认时间 #

可以为日期时间选择器设定一个默认的时间。

设置默认时间
       <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
       </el-date-picker>

效果如下，就算不手动选择时间，也会有一个默认值：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16 1]

# 4. 选择范围 #

通过将type设置为`datetimerange`，可以将日期时间选择器的功能设置为选择一个范围，代码：

选择日期时间的范围
        <el-date-picker v-model="value3" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

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

# 5. 设置默认起止时刻 #

当用于选择范围时，还可以设置默认的起、止的时间点：

设置默认的起止时刻
        <el-date-picker v-model="value4" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>

效果：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

# 6. 小结 #

我个人感觉Element提供的日期选择器、时间选择器堪称完美，界面简洁功能又强大。

而日期时间选择器的界面容易让人迷糊，尤其是选择时间的部分不够明确。

所以也可以考虑用一个日期选择器+一个时间选择器来解决同时选择日期和时间的问题。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/70de2ff53d0d4a568a96125a63b2b43d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_11_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/6ae40cdf665d4ccda5e6ce6168b2d958.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c9911c0989c04572ad2ebc5dee368d08.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/a58fad92a8ad4680a24381dd6fbfa776.png