zx-date-picker 日期选择器

基于 Element Plus 设计的日期选择器组件，适用于 uni-app 项目，支持多种日期选择模式。

功能特性

• ✅ 支持单个日期、日期时间、月份、年份选择
• ✅ 支持日期范围、日期时间范围选择
• ✅ 支持快捷选项配置
• ✅ 支持自定义格式化
• ✅ 支持禁用特定日期
• ✅ 支持默认值设置
• ✅ 响应式设计，适配移动端
• ✅ 完整的事件系统
• ✅ TypeScript 类型支持

基础用法

<template>
  <zx-date-picker 
    v-model="date" 
    placeholder="请选择日期"
    @change="handleChange"
  />
</template>

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

const date = ref('');

const handleChange = (value) => {
  console.log('选择的日期：', value);
};
</script>

组件属性

组件事件

组件方法

格式化

使用 format 指定输入框的格式；使用 value-format 指定绑定值的格式。

默认情况下，组件接受并返回 Date 对象。

使用示例

选择日期时间

<zx-date-picker 
  v-model="datetime"
  type="datetime"
  placeholder="选择日期时间"
  format="YYYY-MM-DD HH:mm:ss"
/>

选择日期范围

<zx-date-picker 
  v-model="daterange"
  type="daterange"
  range-separator=" 至 "
  start-placeholder="开始日期"
  end-placeholder="结束日期"
/>

带快捷选项

<zx-date-picker 
  v-model="value"
  type="daterange"
  :shortcuts="shortcuts"
/>

<script setup>
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  }
];
</script>

设置禁用日期

<zx-date-picker 
  v-model="value"
  :disabled-date="disabledDate"
/>

<script setup>
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
</script>

注意事项

1. 在 uni-app 中使用时，请确保项目支持 Vue 3 和 Composition API
2. 组件使用了 picker-view 原生组件，在某些平台上可能有样式限制
3. 图标字体需要在项目中引入对应的字体文件
4. 日期格式化功能较为基础，如需复杂格式化建议使用第三方库

更新日志

v1.0.0

• 初始版本
• 支持基础日期选择功能
• 支持日期范围选择
• 支持快捷选项配置
• 支持自定义格式化
• 支持禁用日期功能