当前位置：首页 > article >正文

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

article 2025/1/14 1:14:36

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-picker
      v-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() + 1

    if (!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() + 1

  if (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.value
  timeSelectShow.value = false
  // 这里可以添加选择后的业务处理逻辑
}

// 取消选择
const cancelPicker = () => {
  timeSelectShow.value = false
}