更新记录

1.0.6（2026-03-16） 下载此版本

修复bug

1.0.5（2026-03-16） 下载此版本

修复上一个版本日期选择确认无效的bug

1.0.4（2026-03-14） 下载此版本

优化代码

平台兼容性

uni-app(4.76)

jx-datetime-picker 日期时间选择器

一个简洁易用的日期时间选择组件，支持多种日期格式和时间戳。

功能特性

• 支持多种日期模式：年、年月、年月日、时分、时分秒、完整日期时间
• 支持字符串和时间戳两种返回格式
• 自动格式映射，根据模式自动匹配日期格式
• 智能解析，支持各种格式的输入
• 支持自定义 placeholder
• 支持多种边框模式：全边框、下边框、无边框
• 当值为 0 时显示 placeholder

Props

格式映射

使用示例

基础用法

<template>
  <jx-datetime-picker
    v-model="date"
    mode="year-month-date"
    format="string"
  />
</template>

<script>
export default {
  data() {
    return {
      date: ''
    }
  }
}
</script>

显示 placeholder（值为 0 时）

<template>
  <jx-datetime-picker
    v-model="date"
    placeholder="请选择日期"
  />
</template>

<script>
export default {
  data() {
    return {
      date: 0  // 值为 0 时显示 placeholder
    }
  }
}
</script>

不同边框模式

<!-- 全边框（默认） -->
<jx-datetime-picker v-model="date" border-mode="full" />

<!-- 只有下边框 -->
<jx-datetime-picker v-model="date" border-mode="bottom" />

<!-- 无边框 -->
<jx-datetime-picker v-model="date" border-mode="none" />

返回时间戳

<jx-datetime-picker
  v-model="date"
  mode="datetime"
  format="timestamp"
/>

不同模式示例

<!-- 只选择年 -->
<jx-datetime-picker v-model="year" mode="year" />

<!-- 选择年月 -->
<jx-datetime-picker v-model="yearMonth" mode="year-month" />

<!-- 选择年月日 -->
<jx-datetime-picker v-model="fullDate" mode="year-month-date" />

<!-- 选择时分 -->
<jx-datetime-picker v-model="hourMinute" mode="hour-minute" />

<!-- 选择时分秒 -->
<jx-datetime-picker v-model="time" mode="hour-minute-second" />

<!-- 完整日期时间 -->
<jx-datetime-picker v-model="datetime" mode="datetime" />

限制时间范围

可以使用 start 和 end 参数限制可选择的时间范围，支持时间戳和字符串两种格式：

<!-- 日期模式:使用字符串限制范围 -->
<jx-datetime-picker
  mode="year-month-date"
  start="2024-01-01"
  end="2024-12-31"
  v-model="date"
/>

<!-- 日期时间模式:使用时间戳限制范围 -->
<jx-datetime-picker
  mode="datetime"
  :start="1609459200000"
  :end="1640995200000"
  v-model="datetime"
  format="timestamp"
/>

<!-- 时分模式:限制营业时间 9:00-21:00 -->
<jx-datetime-picker
  mode="hour-minute"
  start="09:00"
  end="21:00"
  v-model="time"
/>

<!-- 时分秒模式:限制具体时间范围 -->
<jx-datetime-picker
  mode="hour-minute-second"
  start="09:00:00"
  end="18:00:00"
  v-model="time"
/>

重要说明

1. 纯时间模式（hour-minute、hour-minute-second）：

   • 只限制时间部分，不受日期影响
   • 支持格式："HH:mm" 或 "HH:mm:ss" 或 "H:mm"（小时可以是单数字）
   • 示例：
     • start="9:00" end="21:00" → 可选时间 9:00 到 21:00
     • start="09:00:00" end="18:00:00" → 可选时间 09:00:00 到 18:00:00
     • start="8:59:59" end="21:59:59" → 注意：小时8只能选59分钟

2. 日期模式（year-month-date、datetime 等）：

   • 限制完整的日期时间范围
   • 支持格式：
     • 时间戳（数字）：Date.now() 或 1609459200000
     • 完整日期时间："YYYY-MM-DD HH:mm:ss"
     • 完整日期："YYYY-MM-DD"
     • 年月："YYYY-MM"
     • 年份："YYYY"

3. 混合使用：

   <!-- 时间戳 + 字符串 -->
   <jx-datetime-picker
    mode="datetime"
    :start="Date.now()"
    end="2030-12-31 23:59:59"
   />
   
   <!-- 纯时间格式 -->
   <jx-datetime-picker
    mode="hour-minute"
    start="09:00"
    end="21:00"
   />

4. 联动效果：

   • 选择器会自动联动更新可选范围
   • 例如选择 2024年时，月份会自动限制；选择小时后，分钟会自动调整

5. 时间格式解析：

   • 组件会智能识别各种格式
   • 支持单数字小时："8:59" 和 "08:59" 都有效
   • 支持秒数省略："09:00" 会自动补齐为 "09:00:00"

事件监听

<jx-datetime-picker
  v-model="date"
  @change="handleDateChange"
/>

change 事件返回的数据：

{
  date: Date,          // 日期对象
  timestamp: Number,   // 时间戳
  formatted: String,   // 格式化字符串
  mode: String,        // 当前模式
  formatTemplate: String  // 格式模板
}