Pro 日期时间选择器

在同一个选择器中选择日期 + 时刻。仅选日期见 DatePicker Pro，仅选时刻见 TimePicker Pro。

由日期面板与时间列组合而成，属性说明亦可参考 DatePicker Pro 与 TimePicker Pro。

WARNING

Pro 版面板通过虚拟滚动展示年/月列表，年份范围由 calendar-range 控制（默认当前年前后各 10 年）。若业务需要选择超出该范围的年份（如历史数据录入、出生日期），必须通过 calendar-range 显式指定 [startYear, endYear]，否则超出范围的年份不可见也不可选。

单点选择

日期时间 `datetime`

含基础用法（默认 / 自定义快捷 / default-time / 轻量化 / toggle-date）与快捷增强（quick-choose 左右位置与辅助信息、selecting-shortcuts、server-time、禁用「此刻」）。

largedefaultsmallmini

默认

自定义快捷选项

默认时刻 default-time

轻量化 plain

快捷切换 toggle-date

内置快捷（左侧）

内置快捷（右侧 + 辅助信息）

快捷下拉 selecting-shortcuts

选择日期

server-time

禁用「此刻」+ 限制今日前

vue

<template>
  <w-radio-group v-model="size" aria-label="size control">
    <w-radio-button value="large">large</w-radio-button>
    <w-radio-button value="default">default</w-radio-button>
    <w-radio-button value="small">small</w-radio-button>
    <w-radio-button value="mini">mini</w-radio-button>
  </w-radio-group>
  <div class="flex flex-wrap gap-3">
    <div class="block">
      <span class="demonstration">默认</span>
      <w-date-picker-pro
        v-model="value1"
        :size="size"
        type="datetime"
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">自定义快捷选项</span>
      <w-date-picker-pro
        v-model="value2"
        :size="size"
        type="datetime"
        placeholder="请选择日期时间"
        :shortcuts="shortcuts"
        :default-value="new Date(2023, 9, 1)"
      />
    </div>
    <div class="block">
      <span class="demonstration">默认时刻 default-time</span>
      <w-date-picker-pro
        v-model="value3"
        :size="size"
        type="datetime"
        placeholder="请选择日期时间"
        :default-time="defaultTime"
      />
    </div>
    <div class="block">
      <span class="demonstration">轻量化 plain</span>
      <w-date-picker-pro
        v-model="value4"
        :size="size"
        type="datetime"
        plain
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">快捷切换 toggle-date</span>
      <w-date-picker-pro
        v-model="valueToggle"
        :size="size"
        type="datetime"
        toggle-date
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">内置快捷（左侧）</span>
      <w-date-picker-pro
        v-model="valueQuick"
        :size="size"
        type="datetime"
        quick-choose
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">内置快捷（右侧 + 辅助信息）</span>
      <w-date-picker-pro
        v-model="valueQuickRight"
        :size="size"
        type="datetime"
        quick-choose
        quick-choose-position="right"
        :show-quick-choose-label="true"
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">快捷下拉 selecting-shortcuts</span>
      <w-date-picker-pro
        v-model="valueSelecting"
        :size="size"
        type="datetime"
        quick-choose
        selecting-shortcuts
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">server-time</span>
      <w-date-picker-pro
        v-model="valueServer"
        :size="size"
        type="datetime"
        server-time
        placeholder="请选择日期时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">禁用「此刻」+ 限制今日前</span>
      <w-date-picker-pro
        v-model="valueNoNow"
        :size="size"
        type="datetime"
        :show-now="false"
        :disabled-date="disabledDate"
        placeholder="请选择日期时间"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const size = ref('default')
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const valueToggle = ref(new Date())
const valueQuick = ref('')
const valueQuickRight = ref('')
const valueSelecting = ref('')
const valueServer = ref('')
const valueNoNow = ref('')
const defaultTime = new Date(2020, 1, 1, 12, 0, 0)
const disabledDate = (time: Date) => time.getTime() <= Date.now()

const shortcuts = [
  { text: '今天', value: new Date() },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 1)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() - 7)
      return date
    },
  },
]
</script>

<style scoped>
.block {
  padding-top: 12px;
  text-align: center;
}
.demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 13px;
  margin-bottom: 8px;
}
</style>

按日期动态禁用时分秒

业务高频场景。面板点击日期会更新绑定值并保持打开，可据此实时改写 disabled-hours / disabled-minutes / disabled-seconds，为每一天配置不同的可选时段。

示例：工作日 09:00–18:00，周末 10:00–16:00（含结束整点）。

vue

<template>
  <div class="flex gap-4">
    <w-date-picker-pro
      v-model="value"
      type="datetime"
      placeholder="请选择日期时间"
      :default-time="defaultTime"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      @update:model-value="onPanelDateChange"
    />
    <p v-if="activeDateText" class="hint">
      当前面板日期：{{ activeDateText }}（{{ periodLabel }}）
    </p>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const value = ref<Date>()
/** 选日期时合并的默认时刻（取当前时分秒） */
const defaultTime = new Date()
const activeDate = ref<Date | null>(null)

const onPanelDateChange = (val: Date | string | null | undefined) => {
  if (!val) {
    activeDate.value = null
    return
  }
  activeDate.value = val instanceof Date ? val : new Date(val)
}

const getDay = () => {
  const d =
    activeDate.value || (value.value instanceof Date ? value.value : null)
  return d ? d.getDay() : null
}

const isWeekend = computed(() => {
  const day = getDay()
  return day === 0 || day === 6
})

const periodLabel = computed(() =>
  getDay() == null
    ? ''
    : isWeekend.value
    ? '周末 10:00–16:00'
    : '工作日 09:00–18:00'
)

const activeDateText = computed(() => {
  const d = activeDate.value
  if (!d) return ''
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
})

const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) result.push(i)
  return result
}

/** 工作日可选至 18:00:00；周末可选至 16:00:00 */
const disabledHours = () => {
  const day = getDay()
  if (day == null) return []
  if (day === 0 || day === 6) {
    return makeRange(0, 9).concat(makeRange(17, 23))
  }
  return makeRange(0, 8).concat(makeRange(19, 23))
}

const disabledMinutes = (hour: number) => {
  const day = getDay()
  if (day == null) return []
  if (day === 0 || day === 6) {
    if (hour === 16) return makeRange(1, 59)
    return []
  }
  if (hour === 18) return makeRange(1, 59)
  return []
}

const disabledSeconds = (hour: number, minute: number) => {
  const day = getDay()
  if (day == null) return []
  if (day === 0 || day === 6) {
    if (hour === 16 && minute === 0) return makeRange(1, 59)
    return []
  }
  if (hour === 18 && minute === 0) return makeRange(1, 59)
  return []
}
</script>

<style scoped>
.hint {
  margin: 8px 0 0;
  color: var(--w3-font-color-second);
  font-size: 13px;
}
</style>

范围选择

Pro 版范围均为单面板 + 顶部 Tab（非经典双面板）。选满开始、结束后形成范围；仅选开始未选结束就关闭时，输入框会恢复打开前状态。

日期时间范围 `datetimerange`

含基础用法、内置快捷 / toggle-range-date / selecting-shortcuts / shortcut-default-time，以及范围 default-time。

默认

自定义快捷选项

quick-choose + toggle-range-date

快捷下拉 selecting-shortcuts

选择日期

shortcut-default-time

default-time 两端 12:00:00

default-time 12:00 / 08:00

vue

<template>
  <div class="flex flex-wrap gap-3">
    <div class="block">
      <span class="demonstration">默认</span>
      <w-date-picker-pro
        v-model="value1"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">自定义快捷选项</span>
      <w-date-picker-pro
        v-model="value2"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <div class="block">
      <span class="demonstration">quick-choose + toggle-range-date</span>
      <w-date-picker-pro
        v-model="valueToggle"
        type="datetimerange"
        quick-choose
        toggle-range-date
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <div class="block">
      <span class="demonstration">快捷下拉 selecting-shortcuts</span>
      <w-date-picker-pro
        v-model="valueSelecting"
        type="datetimerange"
        quick-choose
        selecting-shortcuts
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <div class="block">
      <span class="demonstration">shortcut-default-time</span>
      <w-date-picker-pro
        v-model="valueShortcutTime"
        type="datetimerange"
        quick-choose
        shortcut-default-time
        :default-time="defaultTimeRange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <div class="block">
      <span class="demonstration">default-time 两端 12:00:00</span>
      <w-date-picker-pro
        v-model="valueDefault1"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="defaultTime1"
      />
    </div>
    <div class="block">
      <span class="demonstration">default-time 12:00 / 08:00</span>
      <w-date-picker-pro
        v-model="valueDefault2"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="defaultTime2"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2020, 10, 10, 10, 10),
  new Date(2020, 10, 11, 10, 10),
])
const value2 = ref('')
const valueToggle = ref<[Date, Date]>([
  new Date(2025, 10, 1, 0, 0, 0),
  new Date(2025, 10, 7, 23, 59, 59),
])
const valueSelecting = ref('')
const valueShortcutTime = ref('')
const valueDefault1 = ref('')
const valueDefault2 = ref('')

const defaultTimeRange: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 1, 1, 23, 59, 59),
]
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0)
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
]

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
</script>

<style scoped>
.block {
  padding-top: 12px;
  text-align: center;
}
.demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 13px;
  margin-bottom: 8px;
}
</style>

格式

输入框：`format` 与 `value-format`

使用 format / value-format 控制输入框与绑定值；默认为 Date。

Day.js 格式说明

格式	输出	描述
`YY`	18	两位数的年份
`YYYY`	2018	四位数的年份
`M`	1-12	月份，从 1 开始
`MM`	01-12	月份，两位数
`MMM`	Jan-Dec	简写的月份名称
`MMMM`	January-December	完整的月份名称
`D`	1-31	月份里的一天
`DD`	01-31	月份里的一天，两位数
`d`	0-6	一周中的一天，星期天是 0
`dd`	Su-Sa	最简写的一周中一天的名称
`ddd`	Sun-Sat	简写的一周中一天的名称
`dddd`	Sunday-Saturday	一周中一天的名称
`H`	0-23	小时
`HH`	00-23	小时，两位数
`h`	1-12	小时, 12 小时制
`hh`	01-12	Hours, 12 小时制, 两位数
`m`	0-59	分钟
`mm`	00-59	分钟，两位数
`s`	0-59	秒
`ss`	00-59	秒两位数
`SSS`	000-999	毫秒三位数
`Z`	+5:00	UTC 的偏移量
`ZZ`	+0500	UTC 的偏移量，数字前面加上 0
`A`	AM PM
`a`	am pm

WARNING

请一定要注意传入参数的大小写是否正确

Emits Date object

Value:

Use value-format

Value：

Timestamp

Value：

API

文档站中的 DateTimePicker Pro 即 w-date-picker-pro，将 type 设为 datetime 或 datetimerange 使用。

属性、事件、插槽、暴露方法 与 DatePicker Pro 完全一致，请参阅该页 API 表格。

与日期时间相关的补充说明

项目	说明
`type`	常用 `datetime`、`datetimerange`
`format` 默认	`YYYY-MM-DD HH:mm:ss`
`suffix-icon` 默认	时钟图标（`Time`）
`default-time`	范围选中日期的默认时刻，未指定时为 `00:00:00`
`disabled-hours` / `disabled-minutes` / `disabled-seconds`	禁用部分时刻
`arrow-control` / `show-now`	面板时间列与页脚「此刻」
`server-time` 1.3.4	开启后「此刻」取 `window.$w.getSysTime()`
`quick-choose` / `quick-choose-position` / `show-quick-choose-label` 1.3.4	内置快捷选项与位置、辅助信息
`selecting-shortcuts` 1.3.4	快捷项下拉：单点 `#prepend`，范围外挂左侧
`shortcut-default-time` 1.3.4	快捷项合并 `default-time` 时刻
`toggle-date` 1.3.4	单点输入框左右快捷切换
`toggle-range-date` 1.3.4	范围输入框左右快捷切换
`calendar-change`	主要在 `datetimerange` 下，选中日历日期时触发

Pro 日期

Pro 时间

Pro 日期时间选择器 ​

单点选择 ​

日期时间 datetime ​

按日期动态禁用时分秒 ​

范围选择 ​

日期时间范围 datetimerange ​

格式 ​

输入框：format 与 value-format ​

API ​

与日期时间相关的补充说明 ​