更新记录

1.0.1（2024-05-30）

移除了uni.scss，防止和用户工程内的uni.scss冲突

1.0.0（2024-05-30）

2024年5月30日16:26:22 初始化版本

平台兼容性

jxt--

介绍

基于 vue3 的时间段选择器.可定义禁用时间段

软件架构

本工程使用 vue3.请使用 Hbuilder X（version 4.15）打开本工程。

安装教程

1. npm i uview-plus dayjs -S
2. 使用 Hbuilder X 运行该工程

使用说明

1. 本组件仅支持 vue3.其他版本请自行适配。
2. 可直接拉出 /dateTimeRangePicker 文件夹放入自己的 工程即可使用。
3. 使用 datetimeRangePickerRef.value().open() 唤起 picker。

注意

市场上存在各类时间选择器类目众多，基础需求可以不必使用本组件。 本组件具备的功能具有强针对性：当你需要 限制和标记不可用时间段 的时候推荐使用本组件。 目前本组件时间仅 精确到分钟 有效。秒在本组件的使用场景上无实际意义，因此忽略。

特别提醒

本工程部分 ui 依赖 uview-plus，具体安装请参考 uView-plus 文档

暴露的属性

title 时间选择器的命名

invalidTime 不可用的时间段,可支持多个时间段，请严格遵照此格式 [[YYYY/MM/DD HH:mm,YYYY/MM/DD HH:mm],[YYYY/MM/DD HH:mm,YYYY/MM/DD HH:mm],...]

modelValue/v-model 最终选中的时间段，可以传入默认值，请严格遵照此格式 [YYYY/MM/DD HH:mm,YYYY/MM/DD HH:mm]

使用示例

<template>
    <view class="content">
        <button @click="show">唤起时间选择器</button>
        <dateTimeRangePicker ref="dateTimeRangePickerRef" v-model="state.time" :invalidTime="state.invalidTime"></dateTimeRangePicker>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
const state = reactive({
    time: [],//[开始时间，结束时间] 例如：['2024/05/28 15:33','2024/05/28 15:43']
    invalidTime: [['2024/05/28 15:33','2024/05/29 15:43']],//不可选的时间段
})
    const dateTimeRangePickerRef = ref()
    const show = () => {
        dateTimeRangePickerRef.value.open()
    }
</script>

参与贡献