正文：
element-ui 與大部分的樣式框架一樣，皆有提供時間選擇器，這邊就讓我們來看一下使用方式吧
固定區間的時間選擇器

<el-time-select v-model="time" :picker-options="{
    start: '00:00', step: '00:30', end: '23:00'
}" placeholder="選擇時間">
</el-time-select>

在 el-time-select 中，透過 picker-option 的 start 設置起始時間，step 設置時間區隔，end 設置結束時間
這邊需要注意的是時間選擇器的間隔僅能支援到分鐘
我們也可以設定兩個時間選擇器，當一個時間選擇完後將此時間設為另一個時間的禁止時間，這邊可以選擇 minTime 在這時間前的皆無法使用，或是選擇 maxTime 在這時間後皆無法使用

<el-time-select v-model="beforeTime" :picker-options="{
    start: '00:00', step: '00:30', end: '23:00'
}" placeholder="選擇時間">
</el-time-select>
<el-time-select v-model="afterTime" :picker-options="{
    start: '00:00', step: '00:30', end: '23:00', minTime: 'beforeTime'
}" placeholder="選擇時間">
</el-time-select>

如果我們要使用具有小時、分鐘和秒鐘的時間選取器，則是使用el-time-picker

<el-time-picker v-model="time"></el-time-picker>

這邊 v-model 會接收一個時間格式，並且我們可以設定允許時間，除了允許時間外皆無法選擇

<el-time-picker
    v-model="time"
    :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }">
  </el-time-picker>

最後，我們可以在 el-time-picker 中添加 is-range 屬性，將時間選取器變成時間範圍選取器，range-separator 屬性可以設置時間範圍選取器中間區隔的字符，而start-placeholder 則是設置起始時間預設文字， end-placeholder 則是設置結束時間預設文字，這邊 v-model 內的型態為接受兩個時間格式的陣列

<el-time-picker
    is-range
    v-model="time"
    range-separator="至"
    start-placeholder="開始時間"
    end-placeholder="結束時間">
  </el-time-picker>