更新记录

1.0.0（2024-12-07） 下载此版本

✨ 新特性

• 全新的移动端日期时间选择器
• 支持多种选择模式：
  • 日期时间选择
  • 日期选择
  • 时间选择
  • 年份选择
  • 年月选择
  • 日期时间区间选择
  • 日期区间选择
  • 时间区间选择
• 支持快捷选项配置
• 支持自定义日期格式
• 支持秒级选择
• 优雅的界面设计和动画效果

平台兼容性

wht-datetime-picker

一个功能强大、灵活的日期时间选择器组件，支持多种日期时间格式选择，包括日期范围选择和快捷选项。

特性

• 支持多种日期时间格式选择
• 支持日期范围选择
• 支持自定义快捷选项
• 灵活的显示控制
• 支持年份范围设置
• 可自定义高度

安装方法

在插件市场中搜索并导入 wht-datetime-picker，或者直接通过插件市场导入。

基础用法

<template>
  <wht-datetime-picker
    v-model="dateTime"
    mode="datetime"
    title="选择时间"
  />
</template>

<script>
export default {
  data() {
    return {
      dateTime: new Date()
    }
  }
}
</script>

API

Props

Mode 可选值

快捷选项配置

quickOptions 的配置格式如下：

[
  {
    label: '今天',
    value: new Date()
  },
  {
    label: '昨天',
    value: // 昨天的日期
  }
  // ... 更多选项
]

Events

示例

基础日期时间选择

<template>
  <wht-datetime-picker
    v-model="dateTime"
    mode="datetime"
    title="选择日期和时间"
  />
</template>

日期范围选择

<template>
  <wht-datetime-picker
    v-model="dateRange"
    mode="date-range"
    title="选择日期范围"
  />
</template>

带快捷选项的选择器

<template>
  <wht-datetime-picker
    v-model="dateTime"
    mode="datetime"
    :quickOptions="[
      { label: '今天', value: new Date() },
      { label: '昨天', value: getYesterday() }
    ]"
  />
</template>

注意事项

1. 在范围选择模式下，value 需要传入数组格式：[startDate, endDate]
2. quickOptions 中的每个选项必须包含 label 和 value 属性
3. 自定义年份范围时，确保 startYear 小于 endYear