更新记录

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

初始版本

平台兼容性

uni-app(4.72)

uni-app x(4.63)

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

🔍 功能简介

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

• ✅ 支持自定义时间格式（如 YYYY-MM-DD HH:mm:ss）
• ✅ 可按需显示年、月、日、时、分、秒等字段
• ✅ 支持开始/结束时间区间选择（范围选择）
• ✅ 支持带单位显示（如“年”、“月”）
• ✅ 可禁用或启用时间段选择
• ✅ 支持弹窗底部滑出动画，适配安全区域
• ✅ 提供丰富的回调事件与数据绑定

⚠️ 本组件基于官方 uni-popup 与 picker-view 构建，兼容 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>

📋 Props 说明

📌 事件说明

💡 使用建议

• 若需限制用户只能选择未来时间，请确保 startTime 不早于当前时间。
• 在 range 模式下，若未选择开始时间就切换至“结束时间”，系统会提示“请先选择开始时间”。

🛠️ 开发者提示

• 本组件内部通过 computed 和 watch 实现动态时间范围计算，性能良好。
• setTimeValue 方法支持传入任意时间戳或时间字符串，自动适配。
• 如需扩展更多时间格式（如 YYYY/MM/DD），可在 format 字段中调整。

📎 示例项目

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