更新记录

1.0.0（2025-08-29） 下载此版本

初始化

平台兼容性

uni-app(4.75)

智能日期时间选择器 (SmartDatePicker)

概述

SmartDatePicker 是一个基于 uni-datetime-picker 设计的智能日期时间选择器组件，支持 v-model 双向绑定，全屏底部弹出交互，并使用 moment.js 格式化参数。支持单日期选择、日期范围选择、时间选择等多种模式。

功能特性

• 支持 v-model 双向数据绑定
• 全屏底部弹出交互设计
• 支持多种选择类型：date, datetime, daterange, datetimerange, time
• 使用 moment.js 格式化参数，完全兼容 moment 格式
• 支持自定义返回值格式：string, timestamp, date
• 支持禁用、清除按钮、边框等配置
• 点击确认才修改v-model值，提供更好的用户体验
• 使用 moment.js 处理日期时间，提供更好的兼容性和功能

安装和引入

1. 安装依赖

确保项目中已安装 moment.js：

npm install moment

2. 引入组件

import SmartDatePicker from '@/components/SmartDatePicker/index.vue';

export default {
  components: {
    SmartDatePicker
  }
}

API 文档

Props

Events

Methods

Slots

使用示例

基础用法

<template>
  <view class="container">
    <!-- 日期选择 -->
    <SmartDatePicker 
      v-model="date" 
      type="date" 
      placeholder="请选择日期"
    />

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

    <!-- 时间选择 -->
    <SmartDatePicker 
      v-model="time" 
      type="time" 
      format="HH:mm"
    />

    <!-- 日期范围选择 -->
    <SmartDatePicker 
      v-model="dateRange" 
      type="daterange" 
      rangeSeparator="至"
    />

    <!-- 日期时间范围选择 -->
    <SmartDatePicker 
      v-model="datetimeRange" 
      type="datetimerange" 
      format="YYYY-MM-DD HH:mm"
      :hideSecond="true"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      datetime: '',
      time: '',
      dateRange: [],
      datetimeRange: []
    }
  },
  watch: {
    date(val) {
      console.log('日期:', val);
    },
    dateRange(val) {
      console.log('日期范围:', val);
    }
  }
}
</script>

高级用法

<template>
  <view>
    <!-- 返回时间戳 -->
    <SmartDatePicker 
      v-model="timestamp" 
      type="datetime" 
      returnType="timestamp"
      @change="onTimestampChange"
    />

    <!-- 自定义格式 -->
    <SmartDatePicker 
      v-model="customFormat" 
      type="date" 
      format="YYYY年MM月DD日"
    />

    <!-- 限制日期范围 -->
    <SmartDatePicker 
      v-model="limitedDate" 
      type="date" 
      start="2023-01-01"
      end="2023-12-31"
    />

    <!-- 自定义样式 -->
    <SmartDatePicker 
      v-model="customStyle" 
      type="date" 
      :border="false"
      :clearIcon="false"
      placeholder="点击选择生日"
    >
      <!-- 自定义输入框 -->
      <view class="custom-input">
        <text>{{ customStyle || '请选择生日' }}</text>
        <text class="arrow">></text>
      </view>
    </UnifiedDatePicker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timestamp: null,
      customFormat: '',
      limitedDate: '',
      customStyle: ''
    }
  },
  methods: {
    onTimestampChange(value) {
      console.log('时间戳:', value);
      // 转换为可读格式
      const date = new Date(value);
      console.log('可读时间:', date.toLocaleString());
    }
  }
}
</script>

<style>
.custom-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.arrow {
  color: #999;
}
</style>

Format 格式说明

支持所有 moment.js 的格式化参数：

类型说明

type="date"

• v-model: String
• 默认格式: YYYY-MM-DD
• 示例: "2023-12-25"

type="datetime"

• v-model: String
• 默认格式: YYYY-MM-DD HH:mm:ss
• 示例: "2023-12-25 14:30:00"

type="time"

• v-model: String
• 默认格式: HH:mm:ss
• 示例: "14:30:00"

type="daterange"

• v-model: Array[String, String]
• 默认格式: YYYY-MM-DD
• 示例: ["2023-12-01", "2023-12-31"]

type="datetimerange"

• v-model: Array[String, String]
• 默认格式: YYYY-MM-DD HH:mm:ss
• 示例: ["2023-12-01 09:00:00", "2023-12-31 18:00:00"]

注意事项

1. 确保项目中已正确安装和配置 moment.js
2. v-model 的值类型要与 type 对应：
   • 单选类型（date/datetime/time）：String
   • 范围选择类型（daterange/datetimerange）：Array
3. 使用 returnType 可以改变返回值的格式
4. format 参数支持所有 moment.js 的格式化选项
5. 组件会自动处理日期字符串的兼容性问题，避免 moment.js 格式警告
6. 只有点击确认按钮才会修改 v-model 的值，点击取消或遮罩不会改变原值
7. 组件内部使用安全的日期创建方法，确保所有日期字符串都符合 ISO 标准

依赖关系

• moment.js: 用于日期时间处理和格式化