DateTimePicker 日期時間選擇器

在同一個選擇器里選擇日期和時間

DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他選項可以參照 DatePicker 和 TimePicker。

日期和時間點

通過設置type屬性為datetime，即可在同一個選擇器里同時進行日期和時間的選擇。快捷選項的使用方法與 Date Picker 相同。

<template>
  <div class="block">
    <span class="demonstration">默認</span>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="選擇日期時間">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">帶快捷選項</span>
    <el-date-picker
      v-model="value2"
      type="datetime"
      placeholder="選擇日期時間"
      align="right"
      :picker-options="pickerOptions1">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    }
  };
</script>

日期和時間范圍

設置type為datetimerange即可選擇日期和時間范圍

<template>
  <div class="block">
    <span class="demonstration">默認</span>
    <el-date-picker
      v-model="value3"
      type="datetimerange"
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結束日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">帶快捷選項</span>
    <el-date-picker
      v-model="value4"
      type="datetimerange"
      :picker-options="pickerOptions2"
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      align="right">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一個月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三個月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value4: ''
      };
    }
  };
</script>

默認的起始與結束時刻

使用datetimerange進行范圍選擇時，在日期選擇面板中選定起始與結束的日期，默認會使用該日期的00:00:00作為起始與結束的時刻；通過選項default-time可以控制選中起始與結束日期時所使用的具體時刻。default-time接受一個數組，數組每項值為字符串，形如12:00:00，其中第一項控制起始日期的具體時刻，第二項控制結束日期的具體時刻。

<template>
  <div class="block">
    <span class="demonstration">起始日期時刻為 12:00:00</span>
    <el-date-picker
      v-model="value5"
      type="datetimerange"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">起始日期時刻為 12:00:00，結束日期時刻為 08:00:00</span>
    <el-date-picker
      v-model="value6"
      type="datetimerange"
      align="right"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      :default-time="['12:00:00', '08:00:00']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value5: '',
        value6: ''
      };
    }
  };
</script>

 

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	—	—
time-arrow-control	是否使用箭頭進行時間選擇	boolean	—	false
type	顯示類型	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	顯示在輸入框中的格式	string	見日期格式	yyyy-MM-dd
align	對齊方式	string	left, center, right	left
popper-class	DateTimePicker 下拉框的類名	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

¶Picker Options

參數	說明	類型	可選值	默認值
shortcuts	設置快捷選項，需要傳入 { text, onClick } 對象用法參考 demo 或下表	Object[]	—	—
disabledDate	設置禁用狀態，參數為當前日期，要求返回 Boolean	Function	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7

¶Shortcuts

參數	說明	類型	可選值	默認值
text	標題文本	string	—	—
onClick	選中后的回調函數，參數是 vm，可通過觸發 'pick' 事件設置選擇器的值。例如 vm.$emit('pick', new Date())	function	—	—

¶Events

Event Name	Description	Parameters
change	用戶確認選定的值時觸發	組件綁定值。格式與綁定值一致，可受 value-format 控制
blur	當 input 失去焦點時觸發	組件實例
focus	當 input 獲得焦點時觸發	組件實例

¶Methods

方法名	說明	參數
focus	使 input 獲取焦點	—