更新记录

1.0.3（2026-03-15） 下载此版本

新增

1. 新增 mode，支持 date(日期)、time(时间)、custom(自定义)的列显示
2. 新增 modeCustom，自定义模式下显示的列，默认列为 y-m-d-h-i-s (年-月-日-时-分-秒)
3. 修复 v-show 在小程序的兼容问题

1.0.2（2023-05-24） 下载此版本

新增

1. 新增 valueFormat，支持是否格式化回调的时间

1.0.1（2023-05-23） 下载此版本

优化

1. 默认值，除了 Date，还支持 Number、String格式

平台兼容性

uni-app(4.0)

da-datetime-picker

一个基于 Vue3 的日期时间选择器组件，一个支持精确到秒的日期时间选择器。

组件一直在更新，遇到问题可在下方讨论。

关于使用

可在右侧的使用 HBuilderX 导入插件或下载示例项目ZIP，方便快速上手。

可通过下方的示例及文档说明，进一步了解使用组件相关细节参数。

插件地址：https://ext.dcloud.net.cn/plugin?id=12518

组件示例

<template>
  <view class="picker-box">
    <button class="picker-btn" @click="handlePickerShow()">选择时间</button>
    <view class="picker-text">已选时间：{{ datePickerValue || '--' }}</view>
  </view>
  <da-datetime-picker
    :visible="showDatePicker"
    :value="datePickerValue"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />
</template>

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

const showDatePicker = ref(false)
const datePickerValue = ref<string | null>(null)

function handlePickerShow() {
  showDatePicker.value = true
}

function handleConfirm(v: string | Date | null) {
  datePickerValue.value = v as string
  showDatePicker.value = false
}

function handleCancel() {
  showDatePicker.value = false
}
</script>

组件参数

组件事件

组件版本

v1.0.3

差异化

已通过测试

• H5 页面
• 微信小程序
• 支付宝、钉钉小程序
• 字节跳动、抖音、今日头条小程序
• 百度小程序
• 飞书小程序
• QQ 小程序
• 京东小程序

未测试

• 快手小程序由于非企业用户暂无演示
• 快应用、360 小程序因 Vue3 支持的原因暂无演示