ElementPlus DateTimePicker 日期時(shí)間選擇器

在同一個(gè)選擇器里選擇日期和時(shí)間

DateTimePicker 由 DatePicker 和 TimePicker 派生，相關(guān)屬性可以參照 DatePicker 和 TimePicker。

日期和時(shí)間點(diǎn)

通過(guò)設(shè)置type屬性為datetime，即可在同一個(gè)選擇器里同時(shí)進(jìn)行日期和時(shí)間的選擇?？旖葸x項(xiàng)的使用方法與 Date Picker 相同。

<template>
  <div class="block">
    <span class="demonstration">默認(rèn)</span>
    <el-date-picker v-model="value1" type="datetime" placeholder="選擇日期時(shí)間">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">帶快捷選項(xiàng)</span>
    <el-date-picker
      v-model="value2"
      type="datetime"
      placeholder="選擇日期時(shí)間"
      :shortcuts="shortcuts"
    >
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">設(shè)置默認(rèn)時(shí)間</span>
    <el-date-picker
      v-model="value3"
      type="datetime"
      placeholder="選擇日期時(shí)間"
      :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>

日期和時(shí)間范圍

設(shè)置type為datetimerange即可選擇日期和時(shí)間范圍

<template>
  <div class="block">
    <span class="demonstration">默認(rèn)</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="開(kāi)始日期"
      end-placeholder="結(jié)束日期"
    >
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">帶快捷選項(xiàng)</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="至"
      start-placeholder="開(kāi)始日期"
      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: '最近一個(gè)月',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            },
          },
          {
            text: '最近三個(gè)月',
            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>

默認(rèn)的起始與結(jié)束時(shí)刻

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

<template>
  <div class="block">
    <span class="demonstration">起始日期時(shí)刻為 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="開(kāi)始日期"
      end-placeholder="結(jié)束日期"
      :default-time="defaultTime1"
    >
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration"
      >起始日期時(shí)刻為 12:00:00，結(jié)束日期時(shí)刻為 08:00:00</span
    >
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      start-placeholder="開(kāi)始日期"
      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ù)	說(shuō)明	類(lèi)型	可選值	默認(rèn)值
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	非范圍選擇時(shí)的占位內(nèi)容	string	—	—
start-placeholder	范圍選擇時(shí)開(kāi)始日期的占位內(nèi)容	string	—	—
end-placeholder	范圍選擇時(shí)結(jié)束日期的占位內(nèi)容	string	—	—
time-arrow-control	是否使用箭頭進(jìn)行時(shí)間選擇	boolean	—	false
type	顯示類(lèi)型	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	顯示在輸入框中的格式	string	見(jiàn)日期格式	YYYY-MM-DD HH:mm:ss
popper-class	DateTimePicker 下拉框的類(lèi)名	string	—	—
range-separator	選擇范圍時(shí)的分隔符	string	-	'-'
default-value	可選，選擇器打開(kāi)時(shí)默認(rèn)顯示的時(shí)間	Date	可被new Date()解析	—
default-time	選中日期后的默認(rèn)具體時(shí)刻	Date / 范圍選擇時(shí)：Date[]	非范圍選擇時(shí)：Date 對(duì)象；范圍選擇時(shí)：數(shù)組，長(zhǎng)度為 2，每項(xiàng)值為 Date 對(duì)象，第一項(xiàng)指定開(kāi)始日期的時(shí)刻，第二項(xiàng)指定結(jié)束日期的時(shí)刻。不指定會(huì)使用時(shí)刻 00:00:00	—
name	原生屬性	string	—	—
unlink-panels	在范圍選擇器里取消兩個(gè)日期面板之間的聯(lián)動(dòng)	boolean	—	false
prefix-icon	自定義頭部圖標(biāo)的類(lèi)名	string	—	el-icon-date
clear-icon	自定義清空?qǐng)D標(biāo)的類(lèi)名	string	—	el-icon-circle-close
shortcuts	設(shè)置快捷選項(xiàng)，需要傳入數(shù)組對(duì)象	object[{ text: string, value: date / function }]	—	—
disabledDate	設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期，要求返回 Boolean	Function	—	—
cellClassName	設(shè)置日期的 className	Function(Date)	—	—

Events

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

Methods

方法名	說(shuō)明	參數(shù)
focus	使 input 獲取焦點(diǎn)	—

Slots

Name	說(shuō)明
range-separator	自定義分隔符