uviewplus中的时间单选框up-datetime-picker的在uni-app+vue3的使用方法

uviewplus中的时间单选框up-datetime-picker的使用方法

在这里插入图片描述

前言

在实际开发中,我们经常需要使用时间选择器来让用户选择特定的时间。本文将详细介绍uviewplus中up-datetime-picker组件的使用方法,特别是在处理年月选择时的一些关键实现，因为官方有很多相关的功能和方法在文档中没有说明清楚，所以我做了许多调试，终于完成了。

基础使用

1. 组件引入

<template><view class="datetime-picker-container"><view class="picker-wrapper" @click="openPicker"><text class="picker-label">选择日期:</text><view class="picker-input">{{getTimeYearAndMouth(yearMonth)}}</view></view><up-datetime-pickerv-if="selectTimeStampList.length > 0"v-model="yearMonth"mode="year-month":show="timeSelectShow":formatter="formatter":filter="filterTime"format="YYYY-MM"@cancel="cancelPicker"@confirm="confirmPicker"/></view>
</template>

2. 基础数据定义

// 当前选中的时间戳
const yearMonth = ref(Date.now())
// 控制选择器显示/隐藏
const timeSelectShow = ref(false)
// 可选时间戳列表
const selectTimeStampList = reactive<number[]>([])
// 年份去重数组 - 关键数据结构
const fitterTheSameYears = reactive<number[]>([])

核心实现

1. 时间映射表

// 创建一个 Map 来存储有效的年月组合
const validDateMap = computed(() => {const dateMap = new Map()if (!selectTimeStampList?.length) {return dateMap}selectTimeStampList.forEach(timestamp => {const date = new Date(timestamp)const year = date.getFullYear()const month = date.getMonth() + 1if (!dateMap.has(year)) {dateMap.set(year, new Set())}dateMap.get(year).add(month)})return dateMap
})

2. 格式化器实现

重点，如果没有按照规范过滤的话会产生一系列问题。

const formatter = (type: string, value: number) => {// 处理特殊情况，当切换年月份的时候最后会传进两个被选择的参数，所以需要处理 [2024, 01] 的情况if (value.toString().length < 5){if (type === 'year') {return `${value}年`}if (type === 'month') {fitterTheSameYears.length = 0  // 重要: 清空年份数组// 判断月份字符串是否以 0 开头，如果是的话，则取第二个字符，否则取整个字符串 ，因为这样的格式才能正常选中return value.startsWith('0') ? `${value[1]}月` : `${value}月`}}// 基础类型检查if (!value || typeof value !== 'number') {return ''}const date = new Date(value)const year = date.getFullYear()const month = date.getMonth() + 1if (type === 'year') {if (!validDateMap.value.size) {return `${year}年`}// 检查是否是有效年份并去重if (validDateMap.value.has(year) && !fitterTheSameYears.includes(year)) {fitterTheSameYears.push(year)return `${year}年`}return null}if (type === 'month') {if (!validDateMap.value.size) {return `${month}月`}// 检查当前年份下的月份是否有效const currentYear = new Date(yearMonth.value || Date.now()).getFullYear()const validMonths = validDateMap.value.get(currentYear)if (validMonths && validMonths.has(month)) {return `${month}月`}return null}return value.toString()
}

3. 事件处理方法

// 打开选择器
const openPicker = () => {timeSelectShow.value = true
}// 格式化显示时间
const getTimeYearAndMouth = (timestamp: number) => {const date = new Date(timestamp)return `${date.getFullYear()}年${date.getMonth() + 1}月`
}// 确认选择
const confirmPicker = (data) => {yearMonth.value = data.valuetimeSelectShow.value = false// 这里可以添加选择后的业务处理逻辑
}// 取消选择
const cancelPicker = () => {timeSelectShow.value = false
}