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提供的日期選擇器、時間選擇器堪稱完美，界面簡潔功能又強大。

而日期時間選擇器的界面容易讓人迷糊，尤其是選擇時間的部分不夠明确。

是以也可以考慮用一個日期選擇器+一個時間選擇器來解決同時選擇日期和時間的問題。