鸿蒙(HarmonyOS)自定义Dialog实现时间选择控件

ops/2024/10/10 8:39:16/
一、操作环境

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

二、效果图

三、代码

SelectedDateDialog.ets文件
/*** 时间选择*/
@CustomDialog
export struct SelectedDateDialog {@State selectedDate: Date = new Date()private callback: (value: DatePickerResult) => void@State value: DatePickerResult = {year: new Date().getFullYear(),month: new Date().getMonth(),day: parseInt(new Date().getDate().toString().padStart(2, '0')) }controller: CustomDialogController//自定义dialog必须声明aboutToAppear() {console.log("时间选择Loading展示》》》》》")}build() {Column() {DatePicker({start: new Date('2014-1-1'), //起始时间end: new Date('2030-1-1'), //结束时间selected: this.selectedDate, //默认所选时间}).margin({ top: 20 }).lunar(false) //日期是否显示农历。 - true:展示农历。 - false:不展示农历。 默认值:false.onChange(value => {console.log("轮换结果:" + value)this.value = value})Blank()Button('确定').borderRadius('3').width('30%').margin({ bottom: 20 }).onClick((event: ClickEvent) => {console.log("时间:" + this.value.year + this.value.month + this.value.day)this.callback?.(this.value)this.controller.close()})}.width('100%').height('50%')}
}

在page中的调用方式:

selectTimeDialog: CustomDialogController = new CustomDialogController({builder: SelectedDateDialog({ callback: (value) => {console.log("选择结果:" + value.year)this.changeTime = value.year + "-" + (value.month + 1) + "-" + value.day//月份从0开始,故需+1} }),cancel: this.closeDialog, //点击空白区域回调autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20 },gridCount: 4,customStyle: false})closeDialog() {console.info('Click the callback in the blank area')this.selectTimeDialog.close()}openDialog() {//点击事件中直接调用this.selectTimeDialog.open()}


http://www.ppmy.cn/ops/86957.html

相关文章

QT--线程

一、线程QThread QThread 类提供不依赖平台的管理线程的方法,如果要设计多线程程序,一般是从 QThread继承定义一个线程类,在自定义线程类里进行任务处理。qt拥有一个GUI线程,该线程阻塞式监控窗体,来自任何用户的操作都会被gui捕获到,并处理…

Nginx的跨域问题解决

Nginx的跨域问题解决 假设有两台服务器:分别是192.168.101.23(nginx1), 192.168.101.18(nginx2) 在nginx2上有一个get_user资源。 #nginx2 powershelllocation /get_user {default_type application/json;return 200 …

uni-app 微信小程序 用高德sdk获取地理位置,以及天气信息

1、下载高德小程序sdk,并放在uni-app项目中 相关下载-微信小程序插件 | 高德地图API 2、使用高德小程序sdk 获取地理位置接口,天气信息接口 import amap from "/libs/gaode/amap-wx.130.js"; let _this this;let myAmapFun new amapFile.A…

【前端面试】七、算法-递归

遍历方法总结 链式调用 数组的很多操作可以构成链式操作,类似这样的格式:…map().filter(…).sort(…).map(….)链式操作就是对象方法返回类型是自身的。比如map是属于数组的方法,它返回数组,所以构成了链式操作优势:…

RESNET

ResNet 文章目录 ResNet主要内容开发背景解决两个问题:1. 梯度消失和梯度爆炸2. 退化问题: 解决方法1. BN(Batch Normalization)层2. 残差块 Pytorch实现BasicBlockBottleNeckResNet 主要内容 开发背景 残差神经网络(ResNet)是由微软研究院…

我在高职教STM32——串口通信(5)

大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正因如此,才有了借助 CSDN 平台寻求认同感和成就感的想法。在这里,我准备陆续把自己花了很多心思的教学设计分享…

了解ChatGPT API

要了解如何使用 ChatGPT API,可以参考几个有用的资源和教程,这些资源能帮助你快速开始使用 API 进行项目开发。下面是一些推荐的资源: OpenAI 官方文档: 访问 OpenAI 的官方网站可以找到 ChatGPT API 的详细文档。这里包括了 API …

Java高手之路:每日一练,技能精进秘籍

目录 一、题目知识点java中有两种方式实现线程Servlet生命周期总结 一、题目 选自牛客网 1.后端获取数据,向前端输出过程中,以下描述正确的是 A.对于前端过滤过的参数,属于可信数据,可以直接输出到前端页面 B.对于从数据库获得的…