時間選擇器限制可選時間范圍

添加時間選擇器時直接使用element的組件更方便，詳細參考官網：http://element-cn.eleme.io/#/zh-CN/component/date-picker

需要限制選擇時間的格式和范圍時，請詳細閱讀屬性接口

Attributes

參數	說明	類型	可選值	默認值
readonly	完全只讀	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可輸入	boolean	—	true
clearable	是否顯示清除按鈕	boolean	—	true
size	輸入框尺寸	string	large, small, mini	—
placeholder	非范圍選擇時的占位內容	string	—	—
start-placeholder	范圍選擇時開始日期的占位內容	string	—	—
end-placeholder	范圍選擇時結束日期的占位內容	string	—	—
type	顯示類型	string	year/month/date/dates/ week/datetime/datetimerange/daterange	date
format	顯示在輸入框中的格式	string	見日期格式	yyyy-MM-dd
align	對齊方式	string	left, center, right	left
popper-class	DatePicker 下拉框的類名	string	—	—
picker-options	當前時間日期選擇器特有的選項參考下表	object	—	{}
range-separator	選擇范圍時的分隔符	string	—	'-'
default-value	可選，選擇器打開時默認顯示的時間	Date	可被new Date()解析	—
default-time	范圍選擇時選中日期所使用的當日內具體時刻	string[]	數組，長度為 2，每項值為字符串，形如12:00:00，第一項指定開始日期的時刻，第二項指定結束日期的時刻，不指定會使用時刻 00:00:00	—
value-format	可選，綁定值的格式。不指定則綁定值為 Date 對象	string	見日期格式	—
name	原生屬性	string	—	—
unlink-panels	在范圍選擇器里取消兩個日期面板之間的聯動	boolean	—	false
prefix-icon	自定義頭部圖標的類名	string	—	el-icon-date
clear-icon	自定義清空圖標的類名	string	—	el-icon-circle-close
validate-event	輸入時是否觸發表單的校驗	boolean	-	true

運行DEMO:

<template>
  <div>
    <div class="block">
      <span class="demonstration">默認</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="選擇日期">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">帶快捷選項</span>
      <el-date-picker
        v-model="value2"
        align="right"
        type="date"
        placeholder="選擇日期"
        :picker-options="pickerOptions1">
      </el-date-picker>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>