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

1. 前言

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

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

2. 基本用法

代码如下：

基本用法，选择任意日期时间：{{value1}}

   <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">

   </el-date-picker>

1

2

3

通过type="datetime"，设定了组件类型为日期时间选择器，通过value-format设置了值的格式，所以效果如下：

3. 设置默认时间

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

  设置默认时间

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

  </el-date-picker>

效果如下，就算不手动选择时间，也会有一个默认值：

4. 选择范围

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

选择日期时间的范围

   <el-date-picker v-model="value3" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期">

效果如下：

5. 设置默认起止时刻

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

 设置默认的起止时刻

   <el-date-picker v-model="value4" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">

效果：

6. 小结

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

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

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