uni-date-picker

一个美观的 uni-app 日期选择器组件，支持中英文切换。

特性

• 📅 美观的日历界面
• 🌐 支持中文和英文
• 📱 适配 uni-app 多端（H5、小程序、App）
• 🎨 现代化的 UI 设计
• ⚡ 轻量级，基于 dayjs
• 🔧 易于使用和自定义

安装

npm install uni-date-picker

使用方法

1. 在页面中引入组件

<template>
  <view>
    <date-picker 
      v-model="selectedDate" 
      placeholder="请选择日期"
      lang="zh"
      @change="onDateChange"
    ></date-picker>
  </view>
</template>

<script>
import DatePicker from 'uni-date-picker'

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      selectedDate: ''
    }
  },
  methods: {
    onDateChange(date) {
      console.log('选中的日期:', date)
    }
  }
}
</script>

2. 全局注册（可选）

在 main.js 中全局注册：

import Vue from 'vue'
import DatePicker from 'uni-date-picker'

Vue.component('DatePicker', DatePicker)
// 或者使用 Vue.use()
// Vue.use(DatePicker)

API

Props

| 参数 | 说明 | 类型 | 默认值 | 必填 | |------|------|------|--------|------| | value | 当前选中的日期值，格式：YYYY-MM-DD 或 YYYY/MM/DD | String | '' | 否 | | placeholder | 输入框占位符 | String | '' | 否 | | disabled | 是否禁用 | Boolean | false | 否 | | lang | 语言设置，'zh' 或 'en' | String | 'zh' | 否 |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | input | 日期值改变时触发（用于 v-model） | (date: string) | | change | 日期值改变时触发 | (date: string) |

示例

中文模式

<date-picker 
  v-model="date" 
  placeholder="请选择日期"
  lang="zh"
></date-picker>

英文模式

<date-picker 
  v-model="date" 
  placeholder="Select a date"
  lang="en"
></date-picker>

设置默认值

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

<script>
export default {
  data() {
    return {
      date: '2026-01-04' // 默认日期
    }
  }
}
</script>

禁用状态

<date-picker 
  v-model="date" 
  :disabled="true"
></date-picker>

日期格式

• 输入/输出格式: YYYY-MM-DD (例如: 2026-01-04)
• 显示格式: YYYY/MM/DD (例如: 2026/01/04)

依赖

• dayjs - 轻量级日期处理库

浏览器支持

支持所有 uni-app 支持的平台：

• H5
• 微信小程序
• 支付宝小程序
• 百度小程序
• 字节跳动小程序
• App (iOS/Android)

开发

# 克隆项目
git clone https://github.com/yourusername/uni-date-picker.git

# 进入目录
cd uni-date-picker

# 安装依赖
npm install

许可证

MIT

更新日志

1.0.0

• 初始版本
• 支持中英文切换
• 基础日期选择功能