DatetimePicker 日期时间选择

同时选择日期和时间的选择器。

基础用法

<template>
  <button @click="show = true">选择日期时间</button>
  <text>{{ value }}</text>

  <dr-datetime-picker
    v-model:show="show"
    title="选择日期时间"
    @confirm="onConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const value = ref('')

const onConfirm = (e) => {
  value.value = e.value // 2024-12-13 14:30:00
}
</script>

精确到分

设置 mode="datetime-minute" 精确到分钟。

<dr-datetime-picker
  v-model:show="show"
  mode="datetime-minute"
  title="选择日期时间"
  @confirm="onConfirm"
/>

限制日期时间范围

通过 min-date 和 max-date 限制可选范围。

<script setup>
const minDate = new Date(2024, 0, 1, 9, 0, 0)
const maxDate = new Date(2024, 11, 31, 18, 0, 0)
</script>

<template>
  <dr-datetime-picker
    v-model:show="show"
    :min-date="minDate"
    :max-date="maxDate"
    title="选择日期时间"
  />
</template>

默认日期时间

通过 v-model 设置默认选中的日期时间。

<dr-datetime-picker
  v-model:show="show"
  v-model="datetime"
  title="选择日期时间"
/>

<script setup>
const datetime = ref('2024-06-15 12:00:00')
</script>

API

Props

参数	说明	类型	默认值
v-model:show	是否显示	boolean	false
v-model	当前选中日期时间	string | Date	''
mode	模式：datetime datetime-minute	string	datetime
min-date	最小可选日期时间	string | Date	十年前
max-date	最大可选日期时间	string | Date	十年后
title	标题	string	选择日期时间
show-toolbar	是否显示工具栏	boolean	true
confirm-text	确认按钮文字	string	确定
cancel-text	取消按钮文字	string	取消
mask-closable	点击遮罩是否关闭	boolean	true
z-index	层级	number	5000

Events

事件名	说明	回调参数
confirm	点击确认时触发	{ value: string, date: Date }
cancel	点击取消时触发	-
change	选择变化时触发	{ value: string, date: Date }
close	关闭时触发	-