更新记录

1.0.0（2025-12-26） 下载此版本

功能

平台兼容性

uni-app(4.83)

其他

datetime-picker-second 带秒的日期时间选择器

组件名：datetime-picker-second 版本：v1.0.0

datetime-picker-second 是一个精确到秒的日期时间选择器组件，支持年月日时分秒六级联动选择，自动处理月份天数变化。

快速开始

安装

在 HBuilderX 中，点击右上角的 使用 HBuilderX 导入插件 按钮，或者下载插件 ZIP 包解压到项目的 uni_modules/datetime-picker-second 目录下。

使用

由于使用了 uni_modules 方式，组件会自动注册，无需手动引入，可以直接在页面中使用：

<template>
  <view>
    <view @click="showPicker = true">选择时间</view>
    <datetime-picker-second
      v-model:show="showPicker"
      v-model="selectedTime"
      @confirm="handleConfirm"
    />
  </view>
</template>

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

const showPicker = ref(false);
const selectedTime = ref(Date.now());

const handleConfirm = (result) => {
  console.log('选中时间:', result.dateStr);
  console.log('时间戳:', result.value);
};
</script>

功能特性

• ✅ 精确到秒 - 支持年月日时分秒六级选择
• ✅ 智能联动 - 自动处理月份天数变化（如2月28/29天）
• ✅ 双向绑定 - 支持 v-model 绑定时间戳
• ✅ 灵活配置 - 可自定义标题、是否允许蒙版关闭
• ✅ 完整事件 - 提供确认、取消、关闭等事件
• ✅ 跨平台兼容 - 完美兼容 H5 和微信小程序
• ✅ 无依赖 - 不依赖任何第三方UI库

平台兼容性

Props

Events

使用示例

基础使用

<template>
  <view class="page">
    <view class="input-box" @click="showPicker = true">
      <text v-if="timeStr">{{ timeStr }}</text>
      <text v-else class="placeholder">请选择时间</text>
    </view>

    <datetime-picker-second
      v-model:show="showPicker"
      v-model="timestamp"
      @confirm="handleConfirm"
    />
  </view>
</template>

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

const showPicker = ref(false);
const timestamp = ref('');
const timeStr = ref('');

const handleConfirm = (result) => {
  timestamp.value = result.value;
  timeStr.value = result.dateStr;
};
</script>

自定义标题

<datetime-picker-second
  v-model:show="showPicker"
  v-model="timestamp"
  title="选择开始时间"
  @confirm="handleConfirm"
/>

禁止蒙版关闭

<datetime-picker-second
  v-model:show="showPicker"
  v-model="timestamp"
  :maskClosable="false"
  @confirm="handleConfirm"
/>

设置默认时间

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

// 设置默认时间为当前时间
const timestamp = ref(Date.now());

// 或设置为指定时间
const timestamp2 = ref(new Date('2024-01-01 12:00:00').getTime());
</script>

返回数据格式

confirm 事件返回的数据格式：

{
  value: 1704096000000,           // 时间戳（毫秒）
  dateStr: '2024-01-01 12:00:00'  // 格式化字符串
}

注意事项

1. 时间戳格式 - modelValue 接受毫秒级时间戳或空字符串
2. 默认显示 - 如果未设置 modelValue 或值无效，选择器默认显示当前时间
3. 月份天数 - 组件会自动处理不同月份的天数，包括闰年2月
4. 年份范围 - 默认显示当前年份前后各10年，共21年

更新日志

v1.0.0 (2025-01-26)

• 🎉 初始版本发布
• ✅ 支持年月日时分秒六级选择
• ✅ 支持智能月份天数联动
• ✅ 支持双向绑定
• ✅ 完美兼容 H5 和微信小程序
• ✅ 无第三方依赖

许可证

MIT License