vue3移动端使用的时间选择器

### 时间选择器组件概述

对于 Vue 3 移动端项目而言，时间选择器是一个重要的组成部分。为了满足不同场景的需求，开发者可以选择现成的库或是自定义实现。

#### 使用 `vant` 库中的 DateTimePicker 组件

Vant 是一套基于 Vue 的移动端 UI 框架，在 Vant 中提供了功能强大的 `DateTimePicker` 组件来处理日期和时间的选择操作[^1]。此组件支持多种配置选项，可以灵活调整显示模式、范围限制等功能特性以适应具体的应用需求。

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

<script setup lang="ts">
import { ref } from 'vue';
import { DatetimePicker as VanDatetimePicker, type Dayjs } from 'vant';

const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 10, 1);
const currentDate = ref(new Date());
</script>

<style scoped>
/* 自定义样式 */
</style>

通过上述方式引入并使用 Vant 提供的时间选择器能够快速搭建起所需的功能模块，并且得益于其良好的文档和支持社区，遇到问题时也更容易获得帮助。