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
}
重要说明
1. fitterTheSameYears的作用
- 用于存储已处理的年份,防止重复显示
- 在切换到月份选择时需要清空
- 确保年份选项的唯一性
2. formatter函数的关键点
- 需要处理特殊的数值情况
- 年份和月份的显示格式化
- 配合fitterTheSameYears进行年份去重
- 根据validDateMap过滤无效选项
3. 时间选择的注意事项
- 切换年份时会影响可选月份
- 确保时间戳格式统一
- 处理无数据的边界情况
常见问题
1. 无法切换年份或月份
可能的原因:
- formatter返回值不正确
- fitterTheSameYears未正确维护
- validDateMap数据异常
解决方案:
- 检查formatter的返回值
- 确保在适当时机清空fitterTheSameYears
- 验证时间戳列表的正确性
2. 显示异常
可能的原因:
- 时间戳格式不统一
- 特殊数值处理不当
- v-if条件判断有误
解决方案:
- 统一使用毫秒级时间戳
- 完善特殊情况的处理
- 检查组件显示条件
最佳实践
- 数据初始化
- 确保selectTimeStampList在使用前已正确初始化
- 使用reactive而不是ref定义数组
- 注意时间戳格式的统一性
- 性能优化
- 使用computed缓存validDateMap
- 避免在formatter中进行复杂计算
- 合理使用v-if控制组件渲染
- 用户体验
- 提供清晰的时间选择提示
- 处理好加载状态
- 确保选择器操作流畅
相关文章:
uviewplus中的时间单选框up-datetime-picker的在uni-app+vue3的使用方法
uviewplus中的时间单选框up-datetime-picker的使用方法 前言 在实际开发中,我们经常需要使用时间选择器来让用户选择特定的时间。本文将详细介绍uviewplus中up-datetime-picker组件的使用方法,特别是在处理年月选择时的一些关键实现,因为官方有很多相关的功能和方法…...
车联网安全学习之TBOX
Telematics BOX,简称 T-BOX,也称远程信息处理控制单元(Telematics Control Unit, TCU),集成GPS、外部通信接口、电子处理单元、微控制器、移动通信单元和存储器等功能模块。 TBOX 提供的功能有网络接入、OTA、远程控制…...
【教程】创建NVIDIA Docker共享使用主机的GPU
转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 这套是我跑完整理的。直接上干货,复制粘贴即可! # 先安装toolkit sudo apt-get update sudo apt-get install -y ca-certifica…...
tomcat 运行加载机制解析
tomcat 运行加载机制 从tomcat jar包的加载顺序: tomcat的具体运行加载 可以从 start、setclasspath、catalina文件中看出来: start.bat执行 去找bin目录下的catalina.bat,catalina 或去找 bin\setenv.bat以获取标准环境变量,然后去找bin\…...
基于JWT跨语言开发分布式业务系统的挑战与实践:多语言协作的最佳方案
在现代分布式架构下,开发团队往往由来自不同技术栈和开发语言的工程师组成。如何有效地管理这些开发人员的协作,尤其是在实现跨语言的认证与授权机制时,成为了开发者面临的一个重大挑战。JSON Web Token(JWT)作为一种轻…...
Unity在运行状态下,当物体Mesh网格发生变化时,如何让MeshCollider碰撞体也随之实时同步变化?
旧版源代码地址:https://download.csdn.net/download/qq_41603955/90087225?spm1001.2014.3001.5501 旧版效果展示: 新版加上MeshCollider后的效果: 注意:在Unity中,当你动态地更改物体的Mesh时,通常期望…...
数组能排成的最小数
题目描述 输入一个正整数数组,把数组里所有整数拼接起来排成一个数,打印出能拼接出的所有数字中最小的一个。 例如输入数组{3,32,321},则打印出这3个数字能排成的最小数字为321323 分析 3和32哪个数字排前面呢&…...
RNN模型介绍
RNN模型介绍 1.RNN模型介绍1.1什么是RNN模型1.2RNN模型作用1.3RNN模型分类 2.传统RNN模型2.1RNN结构图2.2RNN优缺点 3.LSTM模型3.1什么是LSTM模型3.2LSTM内部结构图3.3使用Pytorch构建LSTM模型3.4LSTM优缺点 4.GRU模型4.1什么是GRU模型4.2GRU内部图4.3使用Pytorch构建GRU模型4.…...
Maven最佳实践
Maven 是一种广泛使用的 Java 项目构建自动化工具。它简化了构建过程并帮助管理依赖关系,使开发人员的工作更轻松。Maven 详细介绍可以参考我写的这篇 Maven 核心概念总结 。 这篇文章不会涉及到 Maven 概念的介绍,主要讨论一些最佳实践、建议和技巧&am…...
Redis的高可用之哨兵模式
Redis哨兵主要是解决Redis主从同步时主数据库宕机问题,使其能够自动进行故障恢复,提高Redis系统的高可用性。 1. 哨兵的作用: 监控:哨兵通过心跳机制监控主库和从库的存活性。 选主:当主库宕机时,哨兵会选举出一个领…...
C# 设计模式--观察者模式 (Observer Pattern)
定义 观察者模式是一种行为设计模式,它定义了对象之间的一对多依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。观察者模式的核心在于解耦主题(被观察者)和观察者之间的依赖关系。 …...
如何使用Java编写Jmeter函数
Jmeter 自带有各种功能丰富的函数,可以帮助我们进行测试,但有时候提供的这些函数并不能满足我们的要求,这时候就需要我们自己来编写一个自定义的函数了。例如我们在测试时,有时候需要填入当前的时间,虽然我们可以使用p…...
Hive 窗口函数与分析函数深度解析:开启大数据分析的新维度
Hive 窗口函数与分析函数深度解析:开启大数据分析的新维度 在当今大数据蓬勃发展的时代,Hive 作为一款强大的数据仓库工具,其窗口函数和分析函数犹如一把把精巧的手术刀,助力数据分析师们精准地剖析海量数据,挖掘出深…...
Echart折线图属性设置 vue2
Echart折线图 官方配置项手册 Documentation - Apache ECharts 下面代码包含:设置标题、线条样式、图例圆圈的样式、显示名称格式、图片保存、增加Y轴目标值 updateChart(data) {const sortedData data.slice().sort((a, b) > new Date(a.deviceTime) - ne…...
蓝桥杯2117砍竹子(简单易懂 包看包会版)
问题描述 这天, 小明在砍竹子, 他面前有 n 棵竹子排成一排, 一开始第 i 棵竹子的 高度为 hi. 他觉得一棵一棵砍太慢了, 决定使用魔法来砍竹子。魔法可以对连续的一 段相同高度的竹子使用, 假设这一段竹子的高度为 H, 那么 用一次魔法可以 把这一段竹子的高度都变为 ⌊H2⌋…...
华为 生产网解决方案,加速制造业数字化转型
华为推出新一代融合架构的生产网解决方案,加速制造业数字化转型-企业频道-东方网 智慧生产网解决方案-华为企业业务 华为面向制造行业升级生产网解决方案。全新一代融合架构,解决了生产数据的孤岛化、烟囱式、数据的价值无法发挥等问题,以促…...
原型模式(Prototype Pattern)——对象克隆、深克隆与浅克隆及适用场景
原型模式(Prototype Pattern)是设计模式中的一种创建型模式,目的是通过复制现有的对象来创建新的对象,而不是通过传统的实例化方式。原型模式常常用于需要创建大量类似对象的场景,可以提高性能并减少资源的消耗。下面将…...
基于Transformer架构的扩散模型
Scalable Diffusion Models with Transformers 本文介绍一篇发表于2023年国际计算机视觉大会(ICCV)的研究论文,该论文提出了一种基于Transformer架构的扩散模型,称为Diffusion Transformers (DiTs)。 通过用Transformer替代传统的…...
服务器上部署前端页面-实现IP+端口/index.html在线访问你的网页
首先一点,不管是那个框架开发的网页前端,最后都需要Build,构建完毕以后都是原始的HTML CSS JS 三样文件! 所以不管用原始的三剑客(HTML CSS JS)开发的前端还是用各类框架开发的前端界面(只是让开发简单…...
2024年华中杯数学建模B题使用行车轨迹估计交通信号灯周期问题解题全过程文档及程序
2024年华中杯数学建模 B题 使用行车轨迹估计交通信号灯周期问题 原题再现 某电子地图服务商希望获取城市路网中所有交通信号灯的红绿周期,以便为司机提供更好的导航服务。由于许多信号灯未接入网络,无法直接从交通管理部门获取所有信号灯的数据&#x…...
【C语言】SWP 文件:临时缓存文件
SWP 文件:临时缓存文件(紧急保护机制) 在 Linux 系统(包括 Ubuntu)中,SWP 文件是一种临时缓存文件,主要用于在编辑器(如 Vim)中紧急保护未保存的工作内容。当系统或编辑…...
【日常记录-Git】git switch
1. 简介 git switch是Git 2.23.0版本引入的一个新命令,用于切换分支和恢复工作树文件。其旨在提供一个更清晰、更直观的分支切换体验,以替代git checkout命令中用于分支切换的部分功能。 2. 常规操作 2.1 切换到已存在的分支 git switch <分支名>…...
Qt学习笔记第51到60讲
第51讲 记事本实现打开功能 回到第24个功能文件Notepad,给UI中的各个控件添加槽函数。 ①开始按钮 void Widget::on_btnOpen_clicked() {QString fileNameQFileDialog::getOpenFileName(this,tr("Open File"),"E:\\6_Qt Projects\\24_Notepad\\fi…...
灵途科技亮相2024世界传感器大会 分享光纤光源技术突破
12月1日至2日,2024世界传感器大会(WSS)在郑州国际会展中心隆重举办,泛自动驾驶领域光电感知专家灵途科技受邀参加“光纤传感器与激光雷达”分论坛,并在大会上带来《激光雷达用一体化光纤光源》专题演讲,同与…...
LeetCode刷题 -- 分治快排
目录 颜色分类题目解析算法原理代码 排序数组题目解析算法原理代码 数组中第K个最大元素题目解析算法原理代码 LCR 159. 库存管理 III题目解析算法原理代码 颜色分类 题目链接 题目解析 数组分为三块 算法原理 1.如果nums[i] 0,left, i下标对应元素交换,…...
pyqtgraph绘制实时更新数据的图
PyQtGraph是一个基于PyQt和NumPy的Python库,它专为实时数据可视化而设计。以绘制0~2π范围的ysin(x)为例,基本用法的代码如下: # codingutf-8import pyqtgraph as pg from pyqtgraph.Qt import QtGui, QtCore import numpy as np# pyqtgraph…...
使用 MATLAB 绘制三维散点图:根据坐标和距离映射点的颜色和大小
在数据可视化中,三维散点图是一种非常直观的方式来展示数据的分布。MATLAB 提供了强大的 scatter3 函数,可以用来绘制三维散点图,而通过调整点的颜色和大小,可以进一步增强图形的表现力。 在本篇博客中,我们将逐步讲解…...
ubuntu离线安装docker
首先下载对应的版本amd64 就是x86的 https://download.docker.com/linux/ubuntu/dists/xenial/pool/stable/amd64/需要挑选其他版本 https://download.docker.com/linux/ubuntu/dists/xenial/pool/stable/下载之后上传到服务器目录,分别执行以下文件 sudo dpkg -…...
iOS如何操作更新推送证书
最近收到一份邮件,应该如何操作呢,证书还是跟以前一样冲钥匙串直接申请吗 Hello, As we announced in October, the Certification Authority (CA) for Apple Push Notification service (APNs) is changing. APNs will update the server certificates in sandbox on January…...
# issue 8 TCP内部原理和UDP编程
TCP 通信三大步骤: 1 三次握手建立连接; 2 开始通信,进行数据交换; 3 四次挥手断开连接; 一、TCP内部原理--三次握手 【第一次握手】套接字A∶"你好,套接字B。我这儿有数据要传给你,建立连接吧。" 【第二次…...
【Linux】-学习笔记08
第五章、DNS域名解析服务器 目录 第五章、DNS域名解析服务器 1.简介 1.1DNS简介 1.2因特网的域名结构 1.3域名服务器的类型划分 1.4DNS域名解析的过程 递归查询(左侧) 迭代查询(右侧) 2.DNS服务器配置 2.1关于服务端 …...
RFdiffusion Denoise类解读
Denoise 类为蛋白质结构扩散模型的实现提供了核心功能,通过灵活的噪声调度、潜力场引导和子结构对齐,使得模型可以生成物理合理的结构序列,并在每个时间步迭代更新蛋白质的坐标和结构信息。 源代码: def get_next_frames(xt, px0, t, diffuser, so3_type, diffusion_mask,…...
HTML5 拖拽 API 深度解析
一、HTML5 拖拽 API 深度解析 1.1 背景与发展 HTML5 的拖拽 API 是为了解决传统拖拽操作复杂而设计的。传统方法依赖鼠标事件和复杂的逻辑计算,而 HTML5 提供了标准化的拖拽事件和数据传递机制,使得开发者能够快速实现从一个元素拖拽到另一个元素的交互…...
Vue 的生命周期钩子函数是什么?常见的生命周期钩子有哪些?
Vue 的生命周期钩子函数 Vue 的生命周期钩子函数是 Vue 组件在不同生命周期阶段自动调用的函数。生命周期分为创建、挂载、更新和销毁等阶段。理解这些钩子函数对于开发和调试 Vue 应用至关重要,因为它们使我们能够在组件生命周期的不同阶段执行特定的操作。 目录…...
uniapp中导入uview或者uview plus
关于SCSS uview-plus依赖SCSS,您必须要安装此插件,否则无法正常运行。 如果您的项目是由HBuilder X创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安…...
3D 生成重建017-StyleGaussian用文本或图像对你的3DGS内容进行风格迁移
3D 生成重建017-StyleGaussian用文本或图像对你的3DGS内容进行风格迁移 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 论文 “StyleGaussian: Instant 3D Style Transfer with Gaussian Splatting” 介绍了一种新颖的3D风格迁移方法 StyleGaussian,该方法通…...
【adb】iqoo系统精简垃圾内置应用
免责声明 这个得谨慎点,虽然我验证过两部手机和不同版本的系统,但是总会有特殊的存在、 本教程来自于互联网搜集整理, 按照本教程造成的用户设备硬件或数据损失,本人概不承担任何责任,如您不同意此协议,请不…...
Golang 字符串字面量表示方法
文章目录 1.普通字符串字面量(Double-Quoted String Literals)2.原始字符串字面量(Raw String Literals)3.字节字符串字面量(Byte Slice Literals)4.码值表示字符串字面量Unicode 转义序列UTF8 转义序列十六…...
【uni-app 微信小程序】新版本发布提示用户进行更新
知识准备 uni.getUpdateManager文档介绍 不支持APP与H5,所以在使用的时候要做好平台类型的判断,如何判断,参考条件编译处理多端差异 代码参考 export const updateApp () > {const updateManager uni.getUpdateManager()updateManag…...
Leetcode 739-每日温度
请根据每日 气温 列表 temperatures ,请计算在每一天需要等几天才会有更高的温度。如果气温在这之后都不会升高,请在该位置用 0 来代替。 题解(单调递减栈) 什么时候用单调栈呢? 通常是一维数组,要寻找任…...
Gitee配置以及如何将本地项目提交到远程仓库
文章目录 准备远程仓库配置注册新建仓库 配置git 生成ssh,输入以下命令,然后连敲三次回车键配置公钥本地代码上传 准备 1.本地下载git 2.注册远程仓库账号 远程仓库配置 注册 官网:https://gitee.com 完成注册 新建仓库 头像->设置-…...
爬虫项目基础知识详解
文章目录 Python爬虫项目基础知识一、爬虫与数据分析1.1 Python中的requests库Requests 库的安装Requests 库的 get() 方法爬取网页的通用代码框架HTTP 协议及 Requests 库方法Requests 库主要方法解析 1.2 python中的json库1.3 xpath学习之python中lxml库html了解html结构html…...
【Leetcode Top 100 - 扩展】876. 链表的中间结点
问题背景 给你单链表的头结点 h e a d head head,请你找出并返回链表的中间结点。 如果有两个中间结点,则返回第二个中间结点。 数据约束 链表的结点数范围是 [ 1 , 100 ] [1, 100] [1,100] 1 ≤ N o d e . v a l ≤ 100 1 \le Node.val \le 100 1≤…...
16-01、JVM系列之:内存与垃圾回收篇(一)
JVM系列之:内存与垃圾回收篇(一) ##本篇内容概述: 1、JVM结构 2、类加载子系统 3、运行时数据区之:PC寄存器、Java栈、本地方法栈一、JVM与JAVA体系结构 JAVA虚拟机与JAVA语言并没有必然的联系,它只是与特…...
经典蓝牙(BT/EDR)蓝牙配对与连接
经典蓝牙的连接过程包括跳频,扫描,配置交换等过程。对ACL链路以及sco的连接过程也做详细的分析。 1. 为什么不配对便无法建立连接? 任何无线通信技术都存在被监听和破解的可能,蓝牙SIG为了保证蓝牙通信的安全性,采用…...
用 Python 从零开始创建神经网络(十四):L1 和 L2 正则化(L1 and L2 Regularization)
L1 和 L2 正则化(L1 and L2 Regularization) 引言1. Forward Pass2. Backward pass到此为止的全部代码: 引言 正则化方法旨在降低泛化误差。我们首先讨论的正则化形式是L1正则化和L2正则化。L1和L2正则化用于计算一个数值(称为惩…...
特殊的数学性质
一个数模9的结果等于它的每一位数相加和模9...
最长递增子序列&什么是继承性?C++中如何实现继承?继承的好处和注意事项有哪些?
最长递增子序列 方法一:暴力二维dp,初始状态:每个元素至少和自己构成一个上升序列,大小为1,状态转移:找到前面结尾数字小于当前数组元素的最长序列,当前位置的长度就是lenpre1. class Solutio…...
汽车IVI中控开发入门及进阶(三十五):架构QML App Architecture Best Practices
在Qt/QML工程的架构中,架构很重要,虽然本身它有分层,比如QML调用资源文件(图片等)显示GUI界面,后面的CPP文件实现界面逻辑,但是这个分类还有点粗。在实际开发中,界面逻辑也就是基于类cpp的实现,也开始使用各种面向对象的设计模式,实现更加优秀的开发架构,这点尤其在…...
面试题整理(二)
芯冰乐知识星球入口:芯冰乐...
刘少奇夫人王光美发声:看今天的社会,毛主席当年是对的
原中央文献研究室副主任李捷说,关于毛主席的档案之所以没有完全公布,不是担心有损毛主席的形象,而是可能有损某些人的形象。 凤凰卫视记者采访刘少奇夫人王光美。主持人:“夫人,您是怎样看待当年毛主席的一张大字报——《炮打资产阶级司令部》…...
一定要认清弯弯蓝营大佬的本质
我是坚决反对民进党的,但是,我倒是愿意让民进党执政台湾。这是因为,民进党执政台湾比国民党要好,台湾回归大陆要快得多、简单的多、顺利得多。因为民进党他们是明独,他们的党纲就明确要台独。这就好办了,只你一有实质性的台独,我即可武统台湾,一统百统,一了百了。而国…...
就尹洪波相关问题,北京外国语大学发布严正声明
严正声明2025年1月6日晚,学校关注到尹洪波在微博实名发布视频,其反映内容与事实严重不符,为以正视听,现将相关情况予以澄清。尹洪波,男,1974年9月生,2008年7月到北京外国语大学工作。2017年6月13日,尹洪波申报正高级职称,因不符合条件未能如愿,遂心生怨恨,到东校区行…...
当下时代的人尤其要注意,别媒体喂什么吃什么
当今时代有一个很特殊的现象,或者说一个很讽刺的现象,就是很多人都在跟着公知们教育别人要独立思考,可实际上呢,他们恰恰是最随波逐流的一群人。为什么这么说,你看看那些整天鼓吹所谓独立思考的人,只要问问他们对于毛主席独立自主方针的态度,他们就会咬牙切齿的说,那是…...
零⼯经济时代:就业蓄⽔池饱和,平台新规引争议
根据中华全国总⼯会的调查,2024年中国新就业形态劳动者已达8400万⼈,占职⼯总数的21%。零⼯经济作为农村进城⻘年、应届毕业⽣以及失业群体的就业蓄⽔池已趋于饱和,并促发平台零⼯之间的竞争加剧。⼤量劳动⼒涌⼊导致单价下降的同时,平台零⼯受到的管理⼒度正在加强;收⼊更…...
申鹏:美军到底有多腐败?
美军那不是传统意义上的腐败,那是腐败得特别有创意,腐败得花样百出,全世界独此一家,属于腐败的灯塔。他们不是雁过拔毛之类的贪腐,而是故意设立一个项目,申请巨额经费,用来开发离谱新武器、打造新装备、改造旧武器、修个码头、买几只“意大利羊”之类…...