更新记录

1.0.0（2026-07-20） 下载此版本

1.0.0

• 支持 single 单时间模式和 range 时间段模式
• range 模式支持开始时间、结束时间两步选择
• 开始时间点击“下一步”自动进入结束时间
• 结束时间点击“确定”返回时间段
• 支持自定义主题色，默认蓝色
• 支持自定义返回格式，默认 yyyy-mm-dd hh:mm
• 支持跨年日期选择，内部使用真实年份参与格式化和时间戳计算
• 支持点击蒙层关闭开关，默认不关闭
• 结束时间必须大于开始时间；若结束时间小于或等于开始时间，会自动调整到开始时间后的一个分钟步进

平台兼容性

uni-app(5.05)

una-picker-plus

una-picker-plus 是一个基于 picker-view 的 uni-app 日期时间选择器组件，支持单时间选择和开始/结束时间段选择。

特性

• 支持 single 单时间模式和 range 时间段模式
• range 模式支持开始时间、结束时间两步选择
• 开始时间点击“下一步”自动进入结束时间
• 结束时间点击“确定”返回时间段
• 支持自定义主题色，默认蓝色
• 支持自定义返回格式，默认 yyyy-mm-dd hh:mm
• 支持跨年日期选择，内部使用真实年份参与格式化和时间戳计算
• 支持点击蒙层关闭开关，默认不关闭
• 结束时间必须大于开始时间；若结束时间小于或等于开始时间，会自动调整到开始时间后的一个分钟步进

基础用法

range 时间段模式

<template>
    <una-picker-plus mode="range" v-model="range" @confirm="handleRangeConfirm" />
</template>

<script setup>
import { ref } from "vue";

const range = ref({
    start: "",
    end: ""
});

function handleRangeConfirm(event) {
    console.log(event.value.start);
    console.log(event.value.end);
    console.log(event.startTimestamp);
    console.log(event.endTimestamp);
}
</script>

single 单时间模式

<template>
    <una-picker-plus mode="single" v-model="time" @confirm="handleSingleConfirm" />
</template>

<script setup>
import { ref } from "vue";

const time = ref("");

function handleSingleConfirm(event) {
    console.log(event.value);
    console.log(event.timestamp);
}
</script>

自定义主题色

<una-picker-plus themeColor="#A7FF12" />

自定义返回格式

<una-picker-plus format="yyyy/mm/dd hh:mm" />

默认格式为：

yyyy-mm-dd hh:mm

格式说明：

• yyyy：四位年份
• yy：两位年份
• mm：月份；当出现在冒号后时表示分钟，例如 hh:mm
• m：不补零月份；当出现在冒号后时表示不补零分钟
• dd：日期
• d：不补零日期
• hh：小时
• h：不补零小时
• MM：分钟
• M：不补零分钟

Props

Events

range 模式 confirm 返回示例：

{
    value: {
        start: "2026-12-31 11:35",
        end: "2027-01-01 12:35"
    },
    start: "2026-12-31 11:35",
    end: "2027-01-01 12:35",
    startDate: Date,
    endDate: Date,
    startTimestamp: 1798697700000,
    endTimestamp: 1798785300000,
    indexes: {
        start: [0, 11, 7],
        end: [1, 12, 7]
    }
}

single 模式 confirm 返回示例：

{
    value: "2026-12-31 11:35",
    date: Date,
    timestamp: 1798697700000,
    indexes: [0, 11, 7]
}