鸿蒙(HarmonyOS)DatePicker+TimePicker时间选择控件

一、操作环境

操作系统:  Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0(API 9)

二、效果图

       

可实现两种选择方式,可带时分选择,也可不带,使用更加方便。

三、代码

SelectedDateDialog.ets文件
/*** 时间选择*/
@CustomDialog
export struct SelectedDateDialog {private selectedDate: Dateprivate isShowTime: Visibility = Visibility.Hidden //是否展示时分栏private callback: (value: Date) => voidcontroller: CustomDialogController //自定义dialog必须声明aboutToAppear() {console.log("时间选择展示:" + JSON.stringify(this.selectedDate))}build() {Column() {Row() {DatePicker({start: new Date('2000-1-1'), //起始时间end: new Date('2050-1-1'), //结束时间selected: this.selectedDate //默认所选时间}).width(this.isShowTime == Visibility.Visible ? '60%' : '100%') //不显示时分,则宽为100.height('100%').lunar(false) //日期是否显示农历。 - true:展示农历。 - false:不展示农历。 默认值:false.onChange(value => {// console.log("轮换结果:" + JSON.stringify(value))this.selectedDate.setFullYear(value.year, value.month, value.day)})TimePicker({ selected: this.selectedDate }).width('35%').height('100%').visibility(this.isShowTime).useMilitaryTime(true) //24小时制.onChange(value => {// console.info('select current date is: ' + JSON.stringify(value))if (value.hour >= 0) {this.selectedDate.setHours(value.hour, value.minute)}})}.width('100%').height('80%')Blank()Button('确定').borderRadius('3').width('40%').margin({ bottom: 20 }).onClick((event: ClickEvent) => {console.log('选择时间:' + JSON.stringify(this.selectedDate))this.callback?.(this.selectedDate)this.controller.close()})}.width('100%').height('50%')}
}

使用其中的参数isShowTime控制是否显示时分栏的选择,Visibility.Visible为显示,Visibility.Hidden不显示

在page中的调用方式:

 @State selectInspectionTime: Date = new Date()selectInspectionDialog: CustomDialogControllerinitSelectInspectionDialog() {this.selectInspectionDialog = new CustomDialogController({builder: SelectedDateDialog({ selectedDate: this.selectInspectionTime, isShowTime: Visibility.Visible,callback: (value) => {let time = value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate()+ "T" + value.getHours() + ":" + value.getMinutes() //月份从0开始,故需+1} }),cancel: this.closeInspectionDialog, //点击空白区域回调autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20 },gridCount: 4,customStyle: false})}closeInspectionDialog() {console.info('Click the callback in the blank area')this.selectInspectionDialog.close()}openDialog() {//点击事件调用打开dialogthis.selectInspectionDialog.open()}

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

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

相关文章

2024下半年,前端的技术风口来了

“ 你近期有体验过哪些大模型产品呢? 你有使用大模型API做过一些实际开发吗? 在你日常开发中,可以与大模型相关应用结合来完成工作吗? ” **最近,一直在和同事聊,关于前端可以用大模型干点啥&#xff…

实战:安装ElasticSearch 和常用操作命令

概叙 科普文:深入理解ElasticSearch体系结构-CSDN博客 Elasticsearch各版本比较 ElasticSearch 单点安装 1 创建普通用户 #1 创建普通用户名,密码 [roothlink1 lyz]# useradd lyz [roothlink1 lyz]# passwd lyz#2 然后 关闭xshell 重新登录 ip 地址…

Nat Med·UNI:开启计算病理学新篇章的自监督基础模型|顶刊精析·24-07-31

小罗碎碎念 本期推文主题 这一期推文是病理AI基础模型UNI的详细介绍,原文如下。下期推文会介绍如何使用这个模型,为了你能看懂下期的推文,强烈建议你好好看看今天这期推文。 看完这篇推文以后,你大概就能清楚这个模型对自己的数据…

卷积神经网络(六)---实现 cifar10 分类

cifar10 数据集有60000张图片,每张图片的大小都是 32x32 的三通道的彩色图,一共是10种类别、每种类别有6000张图片,如图4.27所示。 图 4.27 cifar数据集 使用前面讲过的残差结构来处理 cifar10 数据集,可以实现比较高的准确率。 …

麦田物语第十五天

系列文章目录 麦田物语第十五天 文章目录 系列文章目录一、构建游戏的时间系统二、时间系统 UI 制作总结 一、构建游戏的时间系统 在该游戏中我们要构建年月日天时分秒等时间的概念,从而实现季节的更替,昼夜的更替等(不同的季节可以播种不同…

【MATLAB源码】机器视觉与图像识别技术实战示例文档---鱼苗面积预测计数

系列文章目录 第一篇文章:【MATLAB源码】机器视觉与图像识别技术—视觉系统的构成(视频与图像格式转换代码及软件下载) 第二篇文章:【MATLAB源码】机器视觉与图像识别技术(2)—图像分割基础 第三篇文章:【MATLAB源码】机器视觉与图像识别技术…

提交高通量测序处理数据到 GEO --- 操作流程

❝ 写在前面 由于最近在提交课题数据到 NCBI 数据库,整理了相关笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。推荐先按顺序阅读往期内容: 1. 提交高通量测序数据到 GEO --- 说明书 2. 提交高通量测序原…

jQuery前端网页制作

1、Jquery的概述 1.1JavaScript库 JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。 为了应对这些调整,许多的 JavaScript (helper) 库应运而生。 这些 JavaScript 库常被称为 JavaScript 框架。 市面上一些广受欢迎的 JavaScript 框架:…

基于Docker搭建ELK

目录 1.系统操作 2.搭建es 3.kibana(新起终端跟es一起启动) 4.logstash(新起终端和es一起启动) 5.修改logstash配置文件 6. 创建索引 7. exit #退出容器 8. 在logstash节点插入数据,测试是否能拿取到(下面如果本身有数据…

基于多种机器学习的豆瓣电影评分预测与多维度可视化【可加系统】

有需要本项目的代码或文档以及全部资源,或者部署调试可以私信博主 在本研究中,我们采用Python编程语言,利用爬虫技术实时获取豆瓣电影最新数据。通过分析豆瓣网站的结构,我们设计了一套有效的策略来爬取电影相关的JSON格式数据。…

[FBCTF2019]RCEService (PCRE回溯绕过和%a0换行绕过)

json格式输入ls出现index.php 这道题原本是给了源码的&#xff0c;BUUCTF没给 源码&#xff1a; <?phpputenv(PATH/home/rceservice/jail);if (isset($_REQUEST[cmd])) {$json $_REQUEST[cmd];if (!is_string($json)) {echo Hacking attempt detected<br/><br/…

ElasticSearch学习篇15_《检索技术核心20讲》进阶篇之TopK检索

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243&#xff0c;文档形式记录笔记。 相关问题&#xff1a; ES全文检索是如何进行相关性打分的&#xff1f;ES中计算相关性得分的时机?如何加速TopK检索&#xff1f;三种思路 精准To…

eclipse ui bug

eclipse ui bug界面缺陷&#xff0c;可能项目过多&#xff0c;特别maven项目过多&#xff0c;下载&#xff0c;自动编译&#xff0c;加载更新界面异常 所有窗口死活Restore不回去了 1&#xff09;尝试创建项目&#xff0c;还原界面&#xff0c;失败 2&#xff09;关闭所有窗口&…

Python写UI自动化--playwright(pytest.ini配置)

在 pytest.ini 文件中配置 playwright 的选项可以更好地控制测试执行的过程。 在终端输入pytest --help&#xff0c;可以找到playwright的配置参数 目录 1. --browser{chromium,firefox,webkit} 2. --headed 3. --browser-channelBROWSER_CHANNEL 4. --slowmoSLOWMO 5. …

Photos框架 - 自定义媒体选择器(UI列表)

​​​​​​​Photos框架 - 自定义媒体资源选择器&#xff08;数据部分&#xff09; Photos框架 - 自定义媒体选择器&#xff08;UI列表&#xff09;​​​​​​​ Photos框架 - 自定义媒体选择器&#xff08;UI预览&#xff09; Photos框架 - 自定义媒体选择器&#xff0…

规划决策算法(四)---Frenet坐标系

知乎&#xff1a;坐标系转换 1.Frenet 坐标系 什么是 Frenet 坐标系&#xff1a; 为什么使用 Frenet 坐标系&#xff1a; 通常情况&#xff0c;我们只会关注车辆当前距离左右车道线的距离&#xff0c;来判断是否偏离车道&#xff0c;是否需要打方向盘进行方向微调。而不是基于…

【YashanDB知识库】yasdb jdbc驱动集成BeetISQL中间件,业务(java)报autoAssignKey failure异常

问题现象 BeetISQL中间件版本&#xff1a;2.13.8.RELEASE 客户在调用BeetISQL提供的api向yashandb的表中执行batch insert并将返回sequence设置到传入的java bean时&#xff0c;报如下异常&#xff1a; 问题的风险及影响 影响业务流程正常执行&#xff0c;无法获得batch ins…

matlab仿真 数字信号载波传输(下)

&#xff08;内容源自详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真 刘学勇编著第七 章内容&#xff0c;有兴趣的读者请阅读原书&#xff09; clear all M8; msg[1 4 3 0 7 5 2 6]; ts0.01; T1; %t0:ts:T; t0:ts:T-ts; %x0:ts:length(msg); x0:ts:length(msg)-ts; f…

决策树基础

概述 决策树是一种树型结构&#xff0c;其中每个内部结点表示在一个属性上的测试&#xff0c;每个分支代表一 个测试输出&#xff0c;每个叶结点代表一种类别。决策树学习采用的是自顶向下的递归方法&#xff0c;其基本思想是以信息熵为度量构造一棵熵值下降最快的树&#xff…

一层5x1神经网络绘制训练100轮后权重变化的图像

要完成这个任务&#xff0c;我们可以使用Python中的PyTorch库来建立一个简单的神经网络&#xff0c;网络结构只有一个输入层和一个输出层&#xff0c;输入层有5个节点&#xff0c;输出层有1个节点。训练过程中&#xff0c;我们将记录权重的变化&#xff0c;并在训练100轮后绘制…