更新记录

0.0.9（2025-08-31） 下载此版本

• chore: 更新文档

0.0.7（2025-04-24） 下载此版本

• fix: 修复uniapp v2 app 报错问题

0.0.6（2025-04-23） 下载此版本

• feat: 兼容uniappx 鸿蒙next

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-date-time-picker 时间选择器

一个功能丰富的时间选择器组件，用于选择时间，支持日期、时分等时间维度。

插件依赖：lime-shared、lime-picker

文档链接

📚 组件详细文档请访问以下站点：

• 时间选择器文档 - 站点1
• 时间选择器文档 - 站点2
• 时间选择器文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-date-time-picker
2. 首次导入可能需要重新编译

代码演示

基础使用

通过 v-model 绑定当前选中的日期，通过 start 和 end 属性来设定可选的时间范围。在实际场景中 通常搭配 Popup一起使用。

<l-date-time-picker 
    title="选择日期"
    v-model="value"
    confirm-btn="确认"
    cancel-btn="取消"
    start="2020-6-30"
    end="2025-6-30"
    @confirm="onConfirm"
    @change="onChange">
</l-date-time-picker>

const value = ref('2024-05-02');

const onConfirm = (value: string) => {
    console.log('onConfirm', value)
}
const onChange = (value: string) => {
    console.log('onChange', value)
}

类型选择

通过 mode 属性可以控制选项的类型，它可以是number,也可以是中文或英文，支持以任意顺序对 1 = 年 = year 、 2 = 月 = month 、 4 = 日 = date 、 8 = 时 = hour 、 16 = 分 = minute 、 32 = 秒 = second 进行排列组合。

比如：

传入 1 来单独选择年份
。 传入 2 来单独选择月份
。 传入 1|2 来选择年份和月份，位运算结果：3传入3也可以
。 传入 2|4 来选择月份和日期，位运算结果：6传入6也可以
。 传入 1|2|4 来选择年月日，位运算结果：7传入7也可以
。 传入 4|8 来选择日时，位运算结果：12传入12也可以
。 传入 8|16 来选择时分，位运算结果：24传入24也可以
。 传入 8|16|32 来选择时分秒，位运算结果：56传入56也可以
。 传入 1|2|4|8 来选择年月日时，位运算结果：15传入15也可以
。 传入 1|2|4|8|16 来选择年月日时分，位运算结果：31传入31也可以
。 传入 1|2|4|8|16|32 来选择年月日时分秒，位运算结果：63传入63也可以
。 任意组合，但必须是连续的。不能相隔即不能日和分这种组合，如果觉得数字不够直观，也可以直接写对应的中文或英文

// 数值
<l-date-time-picker 
    title="选择日期"
    :mode="1|2|4"
    confirm-btn="确认"
    cancel-btn="取消"
    @confirm="onConfirm"
    @change="onChange">
</l-date-time-picker>
//文本
<l-date-time-picker 
    title="选择日期"
    mode="年月日时分"
    confirm-btn="确认"
    cancel-btn="取消"
    @confirm="onConfirm"
    @change="onChange">
</l-date-time-picker>

const value = ref('2024-05-02')

自定义label

通过传入 renderLabel 函数，可以对选项文字进行格式化处理。

<l-date-time-picker 
    title="选择日期" 
    confirm-btn="确认"
    cancel-btn="取消"
    start="2020-6-30"
    end="2025-6-30"
    format="YYYY-MM-DD"
    :renderLabel="renderLabel"
    @confirm="onConfirm">
</l-date-time-picker>

import type { TimeModeValues } from '@/uni_modules/lime-date-time-picker'
const renderLabel = (type: TimeModeValues, value: string): string => {
    if(type == 'year') {
        return `${value}年`
    }
    return value
}

过滤项

通过传入 customFilter 函数，可以对选项数组进行过滤，实现自定义选项间隔。

<l-date-time-picker 
    title="选择日期" 
    confirm-btn="确认"
    cancel-btn="取消"
    start="2020-6-30"
    end="2025-6-30"
    format="YYYY-MM-DD"
    :customFilter="filter"
    @confirm="onConfirm">
</l-date-time-picker>

import type { DateTimePickerColumn, TimeModeValues } from '@/uni_modules/lime-date-time-picker'
const filter = (type: TimeModeValues, columns: DateTimePickerColumn):DateTimePickerColumn => {
    if (type == 'month') {
        return columns.filter((option) => parseInt(option.value) % 6 == 0);
    }
    return columns
}

Vue2使用说明

本插件使用了composition-api，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-date-time-picker/components/lime-date-time-picker -->
<lime-date-time-picker />

插件标签说明

• l-date-time-picker：时间选择器组件
• lime-date-time-picker：演示标签

API文档

Props

Events

主题定制

组件提供了下列CSS变量，可用于自定义样式。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助