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

DateTimePicker 由 DatePicker 和 TimePicker 派生，相關屬性可以參照 DatePicker 和 TimePicker。

日期和時間點

通過設置type屬性為datetime，即可在同一個選擇器里同時進行日期和時間的選擇?？旖葸x項的使用方法與 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="選擇日期時間"
      :shortcuts="shortcuts"
    >
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">設置默認時間</span>
    <el-date-picker
      v-model="value3"
      type="datetime"
      placeholder="選擇日期時間"
      :default-time="defaultTime"
    >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shortcuts: [
          {
            text: '今天',
            value: new Date(),
          },
          {
            text: '昨天',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              return date
            },
          },
          {
            text: '一周前',
            value: () => {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              return date
            },
          },
        ],
        value1: '',
        value2: '',
        value3: '',
        defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
      }
    },
  }
</script>

日期和時間范圍

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

<template>
  <div class="block">
    <span class="demonstration">默認</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結(jié)束日期"
    >
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">帶快捷選項</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結(jié)束日期"
    >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shortcuts: [
          {
            text: '最近一周',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            },
          },
          {
            text: '最近一個月',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            },
          },
          {
            text: '最近三個月',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            },
          },
        ],
        value1: [
          new Date(2000, 10, 10, 10, 10),
          new Date(2000, 10, 11, 10, 10),
        ],
        value2: '',
      }
    },
  }
</script>

默認的起始與結(jié)束時刻

使用?datetimerange?進行范圍選擇時，在日期選擇面板中選定起始與結(jié)束的日期，默認會使用該日期的00:00:00作為起始與結(jié)束的時刻；通過選項default-time可以控制選中起始與結(jié)束日期時所使用的具體時刻。?default-time?接受一個數(shù)組，其中第一項控制起始日期的具體時刻，第二項控制結(jié)束日期的具體時刻。

<template>
  <div class="block">
    <span class="demonstration">起始日期時刻為 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="開始日期"
      end-placeholder="結(jié)束日期"
      :default-time="defaultTime1"
    >
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration"
      >起始日期時刻為 12:00:00，結(jié)束日期時刻為 08:00:00</span
    >
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      start-placeholder="開始日期"
      end-placeholder="結(jié)束日期"
      :default-time="defaultTime2"
    >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
        defaultTime2: [
          new Date(2000, 1, 1, 12, 0, 0),
          new Date(2000, 2, 1, 8, 0, 0),
        ], // '12:00:00', '08:00:00'
      }
    },
  }
</script>

Attributes

參數(shù)	說明	類型	可選值	默認值
model-value / v-model	綁定值	date(DateTimePicker) / array(DateTimeRangePicker)	—	—
readonly	完全只讀	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可輸入	boolean	—	true
clearable	是否顯示清除按鈕	boolean	—	true
size	輸入框尺寸	string	large/medium/small/mini	large
placeholder	非范圍選擇時的占位內(nèi)容	string	—	—
start-placeholder	范圍選擇時開始日期的占位內(nèi)容	string	—	—
end-placeholder	范圍選擇時結(jié)束日期的占位內(nèi)容	string	—	—
time-arrow-control	是否使用箭頭進行時間選擇	boolean	—	false
type	顯示類型	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	顯示在輸入框中的格式	string	見日期格式	YYYY-MM-DD HH:mm:ss
popper-class	DateTimePicker 下拉框的類名	string	—	—
range-separator	選擇范圍時的分隔符	string	-	'-'
default-value	可選，選擇器打開時默認顯示的時間	Date	可被new Date()解析	—
default-time	選中日期后的默認具體時刻	Date / 范圍選擇時：Date[]	非范圍選擇時：Date 對象；范圍選擇時：數(shù)組，長度為 2，每項值為 Date 對象，第一項指定開始日期的時刻，第二項指定結(jié)束日期的時刻。不指定會使用時刻 00:00:00	—
name	原生屬性	string	—	—
unlink-panels	在范圍選擇器里取消兩個日期面板之間的聯(lián)動	boolean	—	false
prefix-icon	自定義頭部圖標的類名	string	—	el-icon-date
clear-icon	自定義清空圖標的類名	string	—	el-icon-circle-close
shortcuts	設置快捷選項，需要傳入數(shù)組對象	object[{ text: string, value: date / function }]	—	—
disabledDate	設置禁用狀態(tài)，參數(shù)為當前日期，要求返回 Boolean	Function	—	—
cellClassName	設置日期的 className	Function(Date)	—	—

Events

Event Name	Description	Parameters
change	用戶確認選定的值時觸發(fā)	組件綁定值
blur	當 input 失去焦點時觸發(fā)	組件實例
focus	當 input 獲得焦點時觸發(fā)	組件實例
calendar-change	選中日歷日期后會執(zhí)行的回調(diào)，只有當 datetimerange 才生效	[Date, Date]

Methods

方法名	說明	參數(shù)
focus	使 input 獲取焦點	—

Slots

Name	說明
range-separator	自定義分隔符