HarmonOS 日期选择组件(DatePicker)

本文 我们一起来看基础组件中的
DatePicker
这就是 日程开发中的日期组件
他可以创建一个日期的范围 并创建一个日期的滑动选择器
这里 我们先写一个组件的骨架

@Entry
@Component
struct Index {build() {Row() {Column() {}.width('100%')}.height('100%')}
}

然后 我们先在Column组件下写一个

DatePicker()

就会出现这样一个日期选择组件
我们也可以对它进行一个上下滑动
在这里插入图片描述
但这里有个问题
我们组件上的日期是 2024 1 31
在这里插入图片描述
但我现在的时间是 2024 1 8
在这里插入图片描述
这个问题 官方回应是修复了 但可能 我们的版本不对 这是一个官方认可的BUG

但可以给个默认时间 我们鼠标贴到组件上 出现提示后 进入API文档
在这里插入图片描述
根据文档描述 这个组件有三个参数

start 开始时间 默认值 Date(‘1970-1-1’)
end 结束时间 默认值 Date(‘2100-12-31’)
selected 默认选中的时间 默认值说是系统当前日期 但我们刚才也看了 这个是有问题的
在这里插入图片描述
然后 往下拉 有一个 lunar 类型 boolean
如果是 true 表示用农历 false 表示用阳历
在这里插入图片描述
我们可以直接这样

@Entry
@Component
struct Index {@State tiwe:Date = new Date("2024-01-08");build() {Row() {Column() {DatePicker({start: new Date("2023-12-01"),end: new Date("2025-01-03"),selected: this.tiwe}).lunar(false)}.width('100%')}.height('100%')}
}

直接创建一个 @State 修饰的 date时间类型数据 通过 new Date函数来讲字符串转为正规时间格式
然后作为 selected值 就是默认选中的时间 然后设置了 start 最早可以选择到 2023-12-01 end 最晚可以选择到 2025-01-03

运行结果如下
在这里插入图片描述
这里告诉大家一个很奇葩的事 start end selected 只要你有一个没设置 其他的就都不会生效
希望官方早点修复

然后 我们可以通过 lunar 控制他是 用阳历还是农历 例如 我们这里改成 true 用农历的
在这里插入图片描述
然后 我们可以通过 onChange 监听时间改变 并输出改变的值

DatePicker({start: new Date("2023-12-01"),end: new Date("2025-01-03"),selected: this.tiwe
})
.lunar(false)
.onChange((value:object)=> {console.log(JSON.stringify(value));
})

onChange的参数 是一个JSON对象 我们通过 js的JSON.stringify将它转字符串
此时 我们拖动修改时间 就会输出
在这里插入图片描述
但这里 值得一提的是 不要想什么响应式 HarmonyOS 的表单是没有双向绑定的 也就是说 DatePicker的选项时间改变了 绑定给selected的响应式数据是不会改变的 你要想办法 通过这个json赋值给 selected绑定的属性

这里可以提示大家 你在js中可以用的属性方法 基本上 ArkTS中也都有提供的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/607450.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打造成功的SRE团队

一个成功的SRE团队可以为组织带来巨大价值,帮助组织高效完成价值交付。本文介绍了Mission Lane公司打造SRE团队的经验和实践。原文: Building a Successful SRE Team 简介 当我加入Mission Lane时,是公司仅有的两名站点可靠性工程师(SRE)之一&#xff0c…

时序预测 | Matlab实现GJO-VMD-LSTM金豺-变分模态分解-长短期记忆网络时间序列预测

时序预测 | Matlab实现GJO-VMD-LSTM金豺-变分模态分解-长短期记忆网络时间序列预测 目录 时序预测 | Matlab实现GJO-VMD-LSTM金豺-变分模态分解-长短期记忆网络时间序列预测预测效果基本介绍模型设计程序设计参考资料 预测效果 基本介绍 Matlab实现GJO-VMD-LSTM金豺-变分模态分…

PyQT5实现图像处理应用(含Windows7下完整打包方案)

目录 1、任务概述2、环境安装2.1 创建虚拟环境2.2 安装依赖库 3、程序开发3.1 框架搭建3.2 读取图像3.3 图像处理 4、打包部署5、小结 1、任务概述 本篇博文将通过PyQT5来实现一个简单的图像处理应用,并完成打包部署。 本文开发平台:Windows10 64位系统…

如何找回删除的Word文档?多方法供您选择

在日常生活和工作中,我们经常使用Microsoft Word来创建、编辑和保存文档。然而,有时候我们会不小心删除了重要的Word文档,导致无法挽回的损失。幸运的是,有一些方法可以帮助我们找回已删除的Word文档。本文将介绍一些常用的方法供…

Vue2:通过ref获取DOM元素

一、场景描述 我们在页面的开发过程中&#xff0c;经常需要操作dom元素&#xff0c;来实现我们需要的效果。 以往js中&#xff0c;我们是通过给dom添加id&#xff0c;然后&#xff0c;通过js代码document来获取这个dom 简写代码案例&#xff1a; <h2 id"test"&…

何为算法之空间复杂度

前言 不知前面所讲的算法的十大特征你是否记住了呢&#xff1f;其实除了这十大特征之外&#xff0c;算法还有两个衡量标准。 不同的问题需要使用不同的算法作为策略&#xff0c;不同的算法也可能占用不同的时间和空间来完成相同的任务&#xff0c;这时候&#xff0c;对算法的选…

数学之何为数学

数学是什么 数学是绝大多数人学得最多的一门功课&#xff0c;但对于“数学是什么&#xff1f;”这一看来很普通的问题&#xff0c;却很难一下子给出一个使公众满意的回答。按照恩格斯的说法&#xff0c;数学是以现实世界的空间形式和数量关系为研究对象的。尽管人们现在对空间…

极智AI | 谈谈AI发展系列汇总

欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文来分享了 谈谈 AI 发展系列汇总。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码下载,链接:https://t.zsxq.com/0aiNxERDq 时光斗转星移,AI 飞速发展。 满打满算,我…

【Docker】可以将TA用于什么,简单了解下

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是是《Docker容器》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深…

RabbitMQ(十一)队列的扩展属性(Arguments)

目录 一、简介二、队列扩展属性清单三、代码示例3.1 实现方式一&#xff1a;channel.queueDeclare()3.2 实现方式二&#xff1a;QueueBuilder.build() 一、简介 RabbitMQ 允许用户在声明队列、交换机或绑定时设置 扩展属性&#xff08;Arguments&#xff09;&#xff0c;这些扩…

c++语言基础19-洗盘子(栈)

题目描述 在餐厅里&#xff0c;洗盘子的工作需要使用到栈这种数据结构。假设你手里有一个盘子堆放区。现在需要模拟洗盘子的过程&#xff0c;每个盘子都有一个编号。 盘子堆放区操作说明&#xff1a; 1. 当操作为 1 时&#xff0c;表示从盘子堆放区拿走顶部的盘子清洗。 2. 当…

数据库管理-第130期 JSON二元性(20240109)

数据库管理130期 2024-01-09 第130期 JSON二元性&#xff08;20240109&#xff09;1 简介2 关系型表和JSON存储的优劣3 Oracle JSON关系型二元性视图总结 第130期 JSON二元性&#xff08;20240109&#xff09; 上周&#xff0c;又双叒飞了一趟上海&#xff0c;也是2024年第一飞…

LeetCode-字符串转换整数atoi(8)

题目描述&#xff1a; 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格 检查下一个字符&…

无线网卡怎么连接台式电脑?正确操作步骤分享!

“我在使用电脑时经常都需要用到网络&#xff0c;请问大家在使用无线网卡时怎么将它与台式电脑进行连接的呢&#xff1f;” 使用电脑的用户在进行网上冲浪时都需要先连接网络。如果不想使用网线&#xff0c;无线网卡不仅可以为用户提供网络服务&#xff0c;在使用时该更加灵活和…

MySQL使用count进行行数统计

MySQL count 在使用count进行数据统计行数时&#xff0c;有时候会使用count(*)&#xff0c;有时候会使用count(1)&#xff0c;有时候会使用count(列名)&#xff0c;那么这些有什么不同呢 当使用列名作为参数时&#xff0c;count函数会自动忽略null值&#xff0c;而使用*或者常量…

springCould中的gateway-从小白开始【9】

目录 1.&#x1f35f;网关是什么 2.&#x1f37f;gateway是什么 3.&#x1f95a;gateway能什么 4.&#x1f32d;核心概念 5.&#x1f9c2;工作流程 6.&#x1f9c8;实例 7.&#x1f953;gateway网关配置的方式 8.&#x1f373;配置动态路由 9.&#x1f9c7;pred…

Excel使用pandas拆分单元格扩展

需要&#xff1a; 1. anconda环境 2. excel文件&#xff0c;有拆分标准的单元格内容&#xff08;比如我此次的&#xff1a;**, ***, ****,...) 以前尝试自己写公式&#xff0c;唉&#x1f614;&#xff0c;不是写不出来&#xff0c;就是太折腾了 3. 2行code&#xff0c;超级…

2022 年全国职业院校技能大赛高职组云计算赛项试卷部分解析

2022 年全国职业院校技能大赛高职组云计算赛项试卷部分解析 【赛程名称】高职组-云计算赛项第一场-私有云【任务 1】私有云服务搭建[10 分]【题目 2】Yum 源配置[0.5 分]【题目 3】配置无秘钥 ssh[0.5 分]【题目 4】基础安装[0.5 分]【题目 5】数据库安装与调优[0.5 分]【题目 …

IBM Spectrum LSF 常见问题

IBM Spectrum LSF 常见问题 1、随此产品一起部署的集群中包含哪些 Spectrum LSF 软件包? 包含以下 Spectrum LSF 程序: IBM Spectrum LSF Standard Edition IBM Spectrum LSF 许可证调度程序 IBM Spectrum LSF 数据管理器 2、哪些位置可用于部署 VPC 资源? 可以在 资源部…

yolo v7支持的设备

将一个深度学习模型&#xff08;在这里是YOLOv7&#xff0c;一个目标检测模型&#xff09;从PyTorch导出到不同的格式&#xff0c;以便在不同平台上进行推理&#xff08;inference&#xff09;。列出的方法包括&#xff1a; PyTorch 转 CoreML&#xff08;适用于 macOS/iOS&am…