更新记录

1.1.0（2025-12-15） 下载此版本

1

1.0.9（2025-12-11） 下载此版本

1

1.0.8（2025-12-11） 下载此版本

1

平台兼容性

uni-app(4.72)

uni-app x(4.63)

📅 lfj-time-picker (时间选择器)

🔍 功能简介

lfj-time-picker 是一个基于 UniApp 框架开发的多功能时间选择器组件，支持以下核心功能：

• ✅ 支持自定义时间格式（如 yyyy-mm-dd hh:MM:ss）
• ✅ 可按需显示年、月、日、时、分、秒等字段（通过 mode 属性配置）
• ✅ 支持开始/结束时间区间选择（范围选择）
• ✅ 可禁用或启用时间段选择
• ✅ 支持弹窗底部滑出动画，适配安全区域
• ✅ 提供丰富的回调事件与数据绑定
• ✅ 自动处理时间范围限制
• ✅ 支持双列选择时间段选择（年、月、日、时、分、秒各列支持范围选择）
• ✅ hour / minute / second 可设置可选范围
• ✅ 通过 formatter 回调自定义列的展示文案

⚠️ 本组件基于官方 uni-popup 构建，兼容 H5、小程序、App 多端。

📦 使用方式

1. 基础用法

<template>
    <view>
        <lfj-time-picker
            :show="show"
            :title="title"
            :format="format"
            :start-time="startTime"
            :end-time="endTime"
            :range="range"
            @column="onTimeSelected" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            title: '选择时间',
            format: 'yyyy-mm-dd hh:MM:ss',
            startTime: Date.now(),
            endTime: Date.now() + 10 * 365 * 24 * 60 * 60 * 1000,
            range: true,
        };
    },
    methods: {
        onTimeSelected(timeStr) {
            console.log('选中的时间:', timeStr);
            this.show = false;
        },
    },
};
</script>

2. 自定义显示字段（mode 属性）

<template>
    <view>
        <!-- 只显示年月 -->
        <lfj-time-picker :show="show1" :mode="['year', 'month']" :format="'yyyy年mm月'" @column="onMonthSelected" />

        <!-- 显示时分秒 -->
        <lfj-time-picker
            :show="show2"
            :mode="['hour', 'minute', 'second']"
            :format="'hh:MM:ss'"
            @column="onTimeSelected" />
    </view>
</template>

3. 双列时间段选择（doubleColumn 属性） （仅支持单个 mode 模式）

<template>
    <view>
        <!-- 双列选择年 -->
        <lfj-time-picker
            :show="show3"
            :range="true"
            :mode="['year']"
            :double-column="true"
            :format="'yyyy年'"
            @column="onYearMonthSelected" />
    </view>
</template>

4. 自定义区间与展示格式

<template>
    <view>
        <!-- 仅允许 08:00-18:00，并自定义展示格式 -->
        <lfj-time-picker
            :show="show4"
            :range="true"
            :mode="['hour']"
            :double-column="true"
            :hour-range="[8, 18]"
            :format="'hh:MM'"
            :formatter="customFormatter"
            @column="onTimeSelected" />
    </view>
</template>

<script>
export default {
    methods: {
        customFormatter(type, value) {
            // 仅处理小时列，其余返回默认值
            if (type === 'hour') return `${value}:00`;
            return value;
        },
        onTimeSelected(value) {
            console.log('选中的时间段:', value);
        },
    },
};
</script>

📋 Props 说明

📌 事件说明

📝 格式说明

组件支持的时间格式标记：

• yyyy：年（4 位）
• mm：月（01-12）
• dd：日（01-31）
• hh：时（00-23）
• MM：分（00-59）
• ss：秒（00-59）

示例：

• yyyy-mm-dd → 2023-12-01
• yyyy年mm月dd日 hh时MM分ss秒 → 2023 年 12 月 01 日 14 时 30 分 45 秒
• mm/dd/yyyy → 12/01/2023

💡 使用建议

1. 时间范围限制：

   • 组件会自动限制选择时间在 startTime 和 endTime 范围内
   • 若需限制用户只能选择未来时间，请确保 startTime 不早于当前时间

2. 多字段选择：

   • 使用 mode 属性控制显示哪些时间字段
   • 示例：mode="['year', 'month']" 只显示年月选择

3. 时间段选择：

   • 当 range="true" 时，用户需要先选择开始时间，再选择结束时间
   • 若未选择开始时间就切换至结束时间，系统会提示"请先选择开始时间"
   • 双列模式会自动保持结束值大于开始值，避免选反

4. 自定义展示与范围：

   • 通过 formatter(type, value) 可自定义每一列的展示文案（如追加单位、格式化双列）
   • hourRange / minuteRange / secondRange 可限制可选时间区间，常用于营业时间、排班等场景

🛠️ 开发者提示

• 组件内部通过 computed 和 watch 实现动态时间范围计算，性能良好
• setTimeValue 方法支持传入任意时间戳或时间字符串，自动适配
• 如需扩展更多时间格式，可在 format 字段中自由组合上述格式标记
• 组件已处理各平台时间格式兼容性问题

📎 示例项目

请参考项目根目录下的 pages/index/index.vue 文件，其中已包含完整使用示例。