更新记录

1.0.0（2026-03-06） 下载此版本

支持自定义标题 模式 single / range 单时间模式 和 区间模式 时间格式 例如:2026-3-6 2026/3/6

平台兼容性

uni-app(3.6.17)

其他

日期选择组件使用说明

该组件是基于 Vue3 + uni-app + uv-popup 实现的 日期选择器，支持：

• 单日期选择
• 日期区间选择
• 自定义格式
• 默认值回显
• 年月日 / 数字格式切换

组件通过 ref.open() 打开，通过 confirm 事件返回选择结果。

一、引入组件

<script setup>
import DatePicker from '@/components/date-picker.vue'
import { ref } from 'vue'

const dateRef = ref()
</script>

二、基础使用

<template>
  <view>
    <button @click="openDate">选择日期</button>

    <DatePicker ref="dateRef" @confirm="getDate" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import DatePicker from '@/components/date-picker.vue'

const dateRef = ref()

function openDate() {
  dateRef.value.open()
}

function getDate(e) {
  console.log(e)
}
</script>

三、单日期模式

设置 mode="single"

<DatePicker
  ref="dateRef"
  mode="single"
  @confirm="getDate"
/>

返回数据：

{
  date: "2025-03-06"
}

四、区间模式（默认）

<DatePicker
  ref="dateRef"
  mode="range"
  @confirm="getDate"
/>

返回数据：

{
  start: "2025-03-01",
  end: "2025-03-06"
}

组件内部会自动校验：

结束日期不能小于开始日期

五、默认日期回显

单日期

<DatePicker
  ref="dateRef"
  mode="single"
  date="2025-03-01"
/>

日期区间

<DatePicker
  ref="dateRef"
  mode="range"
  start="2025-03-01"
  end="2025-03-10"
/>

六、日期格式

默认格式：

2025-03-06

如果需要 / 格式：

<DatePicker
  format="/"
/>

返回：

2025/03/06

七、年月日显示模式

默认显示：

2025 03 06

开启 showYM：

<DatePicker
  :showYM="true"
/>

显示：

2025年 3月 6日

八、标题与按钮自定义

<DatePicker
  title="选择时间"
  cancelText="取消"
  confirmText="确定"
  cancelColor="#999"
  confirmColor="#2979ff"
/>

九、组件属性

十、组件事件

十一、返回数据示例

单日期

{
  date: "2025-03-06"
}

日期区间

{
  start: "2025-03-01",
  end: "2025-03-06"
}

十二、组件方法

通过 ref 调用

打开选择器

dateRef.value.open()

十三、完整示例

<template>
  <view>
    <button @click="openDate">选择日期</button>

    <DatePicker
      ref="dateRef"
      mode="range"
      title="选择时间"
      :start="start"
      :end="end"
      @confirm="getDate"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import DatePicker from '@/components/date-picker.vue'

const dateRef = ref()

const start = ref('2025-03-01')
const end = ref('2025-03-06')

function openDate() {
  dateRef.value.open()
}

function getDate(e) {
  console.log(e)
}
</script>