【uniapp】uni-datetime-picker组件修改分钟选项为每15分钟的时间间隔 (0 15 30 45)

2023-11-15

一开始没打算写这个功能实现,毕竟不是自己写的组件,而是去改uniapp的扩展组件. 但是确实在修改的时候上网查,没有查到关于这种功能实现的准确信息, 所以在功能完成后也写一份, 希望能给需要的人一个参考.

做项目遇到一个关于时间预约的功能
最开始给的需求是普通的时间选择器,因为是用uniapp接内置sqlite做的安卓软件,虽然说适配性不好,但是所幸是个单机小程序,也就无所谓了。
因为时间问题( 偷懒 ),所以直接使用了uniapp扩展组件里的uni-datetime-picker-popup组件(和uni-datetime-picker其实是一样的,时间选择的时候多了一个弹窗展示功能)
但是后来需求变了,要求时间选择分钟这个选项必须是十五分钟一选择,也就是选择时只有0,15,30,45这四个可选选项。
所以涉及到了改uni-datetime-picker-popup组件
我看了一下这个组件
在这里插入图片描述

它是三个小组件注入到本体中的,因为我不需要对日期选择做出更改,所以我直接看了time-picker 和 uni-datetime-picker这两个组件。
当然主要需要关注的是time-picker
其实一开始我考虑到的是这个对分钟时间间隔设置的方法是不是需要放在computed计算属性里面去控制,然后我看了一下计算属性和监听情况
监听只是对时间的变化进行了监听 以及监听了一下开始和结束时间 其他对我目前的需求来说没啥用
然后我看了计算属性
在这里插入图片描述

哦吼,很明显,这个方法getCurrentRange()是关键
当前页面搜一下getCurrentRange()
在这里插入图片描述

那这就好办了,通过计算属性得知getCurrentRange(value)里面的value是date类型,所以直接加if判断
在这里插入图片描述

因为我目前时间选择里面的初始值是根据实际时间来更新的,但0 15 30 45这个需求就要求我们不能这样写了,所以找到uni-datetime-picker-popup组件的parseDate(date)方法
minute初始值赋0
在这里插入图片描述
ok, 组件更改结束。

(PS: 注意一点的是,如果你改分钟的时间间隔为15分钟每次,记得看下time-picker组件里面的picker-view)
在这里插入图片描述
这个picker-view有个属性value,我为了处理这个value的问题处理了一下午,直到我看了官方文档才恍然大悟。
在这里插入图片描述
我的时间选择就是这个问题,选择后一直强制跑到最后一项选项中去了,因为没看文档,也是第一次遇到这个picker-view所以耽误了很多时间。
修改下value关联的值就行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【uniapp】uni-datetime-picker组件修改分钟选项为每15分钟的时间间隔 (0 15 30 45) 的相关文章

随机推荐

  • Git教程:标签

    实际上看到这边 对于Git分支仓库这些概念以及commit push pull等操作 但是有些东西我们可能常见到 但是不怎么经常用的 tag 标签其实就算一个 我们下载一些开源项目的时候 在GitHub上经常看到版本 有的项目是通过tag来
  • systemui

    一 SystemUI 概述 二 模块基本布局 三 模块内部框架 四 模块流程 五 重要文件的介绍 一 SystemUI 概述 1 Statusbar 的功能作用 1 1 状态栏的通知功能 包括时间 通知 系统状态等 1 2 状态栏的日期显示
  • VBA &金融

    汇总数据 算提成 G py 210523finance VBA专题12 课程需用材料 Sub Macro1 Dim ws As Worksheet Dim i As Integer For i 1 To 20 Set ws Sheets A
  • kotlin 中intent的传值应用

    main Activity fun intent position Int content String var intent Intent this MainActivity TestActivity class java var bun
  • org.apache.poi.ss.usermodel.Cell.setCellValue(Ljava/time/LocalDateTime;)V

    java 导出功能 出现错误的原因是 实体中存在日期 而导出的时候Excel无法转换日期类型 解决方法 在实体中将日期类型转换为String类型 ColumnWidth 25 ExcelProperty value 计划开始日期 index
  • 100道Python练习题集合,拿去刷

    看书 看视频都可以帮助你学习代码 但都只是辅助作用 学好Python 最重要的还是多敲代码 多刷题 不知道怎么找题刷题的小伙伴 可以看看小编今天带来的 Python100练习题 覆盖了基本语法 数据结构 算法等多个方面 100道Python
  • moviepy音视频开发:使用credits1给视频加片头片尾字幕

    前往老猿Python博文目录 一 概述 在 moviepy音视频剪辑 视频基类VideoClip子类DataVideoClip UpdatedVideoClip ImageClip ColorClip TextClip类详解 介绍了Text
  • 通过NodeJS对接微信客服实现第三方API管理消息

    最近项目有个需求 要对接微信客服 之前也没做过 一脸懵逼 我属于那种不知其然 就心里很没底的人 感觉不知道怎么去开发了 所以就趁着后端还没开发完接口 先自己对接一下试试 接下来就是整个流程 首先我们先注册一个企业微信 这一步是必须的 因为我
  • map根据属性排序、取出map前n个后n个

    map 按 key 升序排序 map 按 key 升序排序 param map return private Map
  • linux top命令详解

    一 top简介 top命令经常用来监控linux的系统状况 是常用的性能分析工具 能够实时显示系统中各个进程的资源占用情况 在Linux操作系统中 top是使用最频繁 也是比较全的一个命令 Top命令类似于Windows系统的任务管理器工具
  • python找不到reshape_python – AttributeError:’Tensor’对象没有属性’reshape’

    我想写一个去噪自动编码器 为了可视化的目的 我想打印出损坏的图像 这是我想要显示损坏图像的测试部分 def corrupt x noise tf random normal shape tf shape x mean 0 0 stddev
  • 调速阀------电磁阀

    目录 调速阀 节流阀简图的理解 安装方式 注意 安装注意事项 电磁阀 1 直动式电磁阀 2 分步直动电磁阀 3 先导式电磁阀 二位二通电磁阀 二位三通电磁阀 二位四通电磁阀 三位三通电磁阀 三位四通电磁阀 管道联系式电磁阀 直接控制式电磁阀
  • 芷菏随身wifi14.5 相关教程

    芷菏随身wifi 芷菏都知道 sim一般都是没有密码 直接可以切换的 是可以直接用ARDC连接投屏到电脑上的 按住随身wifi上的按钮 进入9008模式 可以将随身wifi刷boot模块 再从投屏中修补面具 起到root的效果 这款sim1
  • python发送邮件(带附件)

    usr bin python coding UTF 8 import logging import smtplib from email mime multipart import MIMEMultipart from email mime
  • jquery mobile和ajax,使用jquery mobile不可忽视的细节

    jQuery Mobile 是创建移动WEB应用程序的框架 在学习和使用该框架的过程中 有一些心得想要和大家分享一下 一 框架 因为是移动端开发 所以不要忘了下面这个重要的meta标签哦 使用jquery mobile要引入相应的css文件
  • 数据的探索性分析

    探索一下 数据分析的起点 数据分类 一 描述性分析 整理数据 定义 主要作用 可视化技术 定义 主要作用 常用方法 二 相关性分析 分析数据 定义 主要作用 相关性分类 相关性测定 三 假设检验 分析数据 定义 作用 步骤 相对理论 常见的
  • 对某底层硬件模块编写底层程序的主要步骤及经验

    一 禁止硬件模块运行 配置好相关寄存器 这里的硬件模块是指那些CPU发一些指令后就能独立工作的模块 二 置位硬件模块控制寄存器的使能位 使能硬件模块 三 明确功能 搞清楚哪些工作是由硬件来做的 哪些该由软件来执行 四 当由硬件模块来做的工作
  • NAPI(New API)的一些浅见

    NAPI真的是kernel开发者词穷想的名字吧 你看看kernel里面各种名字 不知道为啥就不能起个好听点的 言归正传 wiki https en wikipedia org wiki New API 给出的解释是NAPI是一种用于网络设备
  • PyTorch基础练习-task4(用PyTorch实现多层网络)

    PyTorch基础练习 task4 一 引入模块 读取数据 二 构建网络模型 三 损失函数与优化器 四 开始训练模型 五 模型预测结果评估 一 引入模块 读取数据 从sklearn包中直接加载糖料病数据集 二 构建网络模型 三 损失函数与优
  • 【uniapp】uni-datetime-picker组件修改分钟选项为每15分钟的时间间隔 (0 15 30 45)

    一开始没打算写这个功能实现 毕竟不是自己写的组件 而是去改uniapp的扩展组件 但是确实在修改的时候上网查 没有查到关于这种功能实现的准确信息 所以在功能完成后也写一份 希望能给需要的人一个参考 做项目遇到一个关于时间预约的功能 最开始给