DateTimePicker 日期时间选择器

更新: 2025/1/20 字数: 0 字 时长: 0 分钟

说明

由于vant4版本没有日期时间选择器，所以用van-picker封装了一个

基本使用

选择单个日期

默认情况下，选择器会显示年、月、日，且为单个日期。

<script setup lang="ts">
const time = ref();
</script>
<template>
  <DateTimePicker v-model="time" />
</template>

选择单个时间

如果需要选择单个时间，可以设置type为['hour', 'minute', 'second']，format为HH:mm:ss, v-model也可以设置默认时间，但格式需要与format一致。

<script setup lang="ts">
const time = ref("19:28:00");
</script>
<template>
  <DateTimePicker
    v-model="time"
    :type="['hour', 'minute', 'second']"
    format="HH:mm:ss"
  />
</template>

选择日期时间

如果需要选择日期和时间，可以设置type为['year', 'month', 'day', 'hour', 'minute', 'second']，format为YYYY-MM-DD HH:mm:ss。

<script setup lang="ts">
const time = ref();
</script>
<template>
  <DateTimePicker
    v-model="time"
    :type="['year', 'month', 'day', 'hour', 'minute', 'second']"
    format="YYYY-MM-DD HH:mm:ss"
  />
</template>

选择日期范围

如果需要选择日期范围，可以设置v-model接收一个数组，数组的第一个元素为开始时间，第二个元素为结束时间。

<script setup lang="ts">
const time = ref([]);
</script>
<template>
  <DateTimePicker v-model="time" range />
</template>

API

传参配置

参数	说明	类型	默认值
v-model	绑定值，格式需与format一致	string|array	-
type	选择器的日期或时间类型，可选值为year, month, day, hour, minute, second	array	['year','month','day']
format	显示在输入框中的日期或时间格式，需要参照dayjs的日期格式设置	string	YYYY-MM-DD
placeholder	单个日期时的占位提示文字	string	请选择日期
startPlaceholder	日期范围开始时的占位提示文字	string	开始日期
endPlaceholder	日期范围结束时的占位提示文字	string	结束日期
separate	日期范围分隔符	string	至

注意

由于type需传入数组，所以传值时注意时间的有效性，避免出现只有年月分秒等情况，