DateTimePicker 日期时间选择器 ​

在同一个选择器中同时选择日期和时间。本组件由 DatePicker 通过 type="datetime" / "datetimerange" 实现。

ts
import { createApp } from 'vue'
import { DatePicker as ElDatePicker } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElDatePicker)

日期和时间点 ​

将 type 设为 datetime 即可同时选择日期与时间，并可通过 shortcuts 配置快捷选项。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间"
      style="width: 100%"
    />
    <el-date-picker
      v-model="value2"
      type="datetime"
      placeholder="带快捷选项"
      :shortcuts="shortcuts"
      style="width: 100%"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePicker as ElDatePicker } from '@szhn/dh-design-pc'


const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: '此刻',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const d = new Date()
      d.setTime(d.getTime() - 3600 * 1000 * 24)
      return d
    },
  },
  {
    text: '一周前',
    value: () => {
      const d = new Date()
      d.setTime(d.getTime() - 3600 * 1000 * 24 * 7)
      return d
    },
  },
]
</script>

日期时间格式 ​

使用 format 指定展示格式，使用 value-format 指定绑定值的格式；不设置时绑定值为 Date 对象。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-date-picker v-model="v1" type="datetime" placeholder="默认 Date 对象" style="width: 100%" />
    <div style="font-size: 12px; color: var(--dh-text-color-secondary, #909399);">值：{{ v1 }}</div>

    <el-date-picker
      v-model="v2"
      type="datetime"
      placeholder="字符串格式"
      format="YYYY/MM/DD HH:mm"
      value-format="YYYY-MM-DD HH:mm:ss"
      style="width: 100%"
    />
    <div style="font-size: 12px; color: var(--dh-text-color-secondary, #909399);">值：{{ v2 }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePicker as ElDatePicker } from '@szhn/dh-design-pc'


const v1 = ref<Date | ''>('')
const v2 = ref('')
</script>

日期和时间范围 ​

设置 type 为 datetimerange 即可选择一段日期时间范围。

<template>
  <el-date-picker
    v-model="range"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    style="width: 380px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePicker as ElDatePicker } from '@szhn/dh-design-pc'


const range = ref<[Date, Date] | []>([])
</script>

默认起止时刻 ​

范围选择时可通过 default-time 控制选中日期后使用的默认时刻，数组中两项分别对应开始和结束。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 420px;">
    <el-date-picker
      v-model="range"
      type="datetimerange"
      :default-time="defaultTime"
      range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      style="width: 100%"
    />
    <div style="font-size: 12px; color: var(--dh-text-color-secondary, #909399);">
      起止默认时刻：12:00:00 / 08:00:00
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePicker as ElDatePicker } from '@szhn/dh-design-pc'


const range = ref<[Date, Date] | []>([])
const defaultTime: [Date, Date] = [
  new Date(2000, 0, 1, 12, 0, 0),
  new Date(2000, 0, 1, 8, 0, 0),
]
</script>

禁用状态 ​

通过 disabled 属性禁用选择器；通过 disabled-date 函数禁用指定的日期。

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <el-date-picker v-model="v1" type="datetime" disabled placeholder="禁用" style="width: 100%" />
    <el-date-picker
      v-model="v2"
      type="datetime"
      :disabled-date="disabledDate"
      placeholder="今天之前不可选"
      style="width: 100%"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePicker as ElDatePicker } from '@szhn/dh-design-pc'


const v1 = ref('')
const v2 = ref('')

function disabledDate(date: Date) {
  return date.getTime() < Date.now() - 24 * 3600 * 1000
}
</script>

API ​

Attributes ​

属性说明类型默认值
model-value / v-model绑定值Date / string / number / array—
type选择器类型datetime / datetimerangedate
format展示格式stringYYYY-MM-DD HH:mm:ss
value-format绑定值格式string—
default-time默认时刻Date / [Date, Date]—
shortcuts快捷选项array—
disabled-date禁用日期判断函数Function—
range-separator范围分隔符string-

Events ​

事件说明参数
change用户确认选值后触发val
blur / focus失焦 / 获焦—
visible-change下拉面板显示状态变化visible

详见 Element Plus DateTimePicker 文档。