全局UI方法-弹窗四-日期滑动选择器弹窗(DatePickerDialog)

news/2024/4/30 9:20:11

1、描述

        根据指定的日期范围创建日期滑动选择器,展示在弹窗上。

2、接口

        DatePickerDialog.show(options?: DatePickerDialogOptions)

3、DatePickerDialogOptions

参数名称

参数类型

必填

默认值

参数描述

start

Date

Date("1970-1-1")

设置选择器的起始日期。

endDateDate("2100-12-31")设置选择器的结束日期。
selectedDate当前系统日期设置当前选中的日期。
lunarbooleanfalse日期是否显示为农历。
onAccept

(value:DatePickResult) => void

-点击弹窗中的“确定”按钮时触发该回调。
onCancel() => void-点击弹窗中的“取消”按钮时触发该回调。
onChange(value:DatePickResult) => void-滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。

4、DatePickResult对象说明

名称

参数类型

描述

year

number

选中日期的年。

month

number

选中日期的月(0~11),0表示1月,11表示12月。

day

number

选中日期的日。

5、示例

@Entry
@Component
struct DatePickerDialogPage {@State message: string = '定义日期滑动选择器弹窗并弹出'build() {Row() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width("96%").margin({ top: 12 })Button("DatePickerDialog.show Default").width("96%").fontSize(20).margin({ top: 12 }).onClick(() => {DatePickerDialog.show({onAccept: (result: DatePickerResult) => {console.info("DatePickerDialog Default onAccept result = " + JSON.stringify(result));},onCancel: () => {console.info("DatePickerDialog Default onCancel");},onChange: (result: DatePickerResult) => {console.info("DatePickerDialog Default onChange result = " + JSON.stringify(result));}})})Button("DatePickerDialog.show selected").width("96%").fontSize(20).margin({ top: 12 }).onClick(() => {DatePickerDialog.show({start: new Date("2010-1-1"),end: new Date("2050-12-13"),selected: new Date(),onAccept: (result: DatePickerResult) => {console.info("DatePickerDialog selected onAccept result = " + JSON.stringify(result));},onCancel: () => {console.info("DatePickerDialog selected onCancel");},onChange: (result: DatePickerResult) => {console.info("DatePickerDialog selected onChange result = " + JSON.stringify(result));}})})}.width('100%').height("100%")}.height('100%')}
}

6、效果图

默认:

selected: new Date():
start: new Date("2010-1-1"),
end: new Date("2050-12-13"),

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

基于JSPM的美食推荐管理系统

背景 互联网的迅猛扩张彻底转变了全球各类组织的运营模式。自20世纪90年代起,中国各级政府和企事业单位便开始探索运用网络系统来处理管理事务。然而,早期的网络覆盖不广、用户接受度不高、相关网络法规不健全以及技术发展不成熟等因素,都曾…

关于Ansible的模块②

转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 接《关于Ansible的模块 ①-CSDN博客》,继续学习和梳理Ansible的常用文件类模块 1. copy模块 从当前机器上复制文件到…

【攻防世界】file_include (PHP伪协议+过滤器)

打开题目环境: 进行PHP代码审计,发现这是一个文件包含漏洞。 我们尝试利用PHP伪协议中的 php://filter来读取 check.php 中的内容。 构造payload 并提交: 发现payload被过滤掉了,我们就需要尝试使用不同的转换器。 PHP各类转换…

uniapp-打包IOS的APP流程

打包前所需配置 在manifest文件内配置 1. APP图标 2. 启动界面 有三种启动界面配置 第一种是 HBuilderX 官方给的通用启动界面,页面单一,屏幕中间就一个圆框图标 第二种是自定义的启动图,无法通过AppStore的审核 第三种是自定义storyboard启动…

ROS2从入门到精通1-2:详解ROS2服务通信机制与自定义服务

目录 0 专栏介绍1 服务通信模型2 服务模型实现(C)3 服务模型实现(Python)4 自定义服务5 话题、服务通信的异同 0 专栏介绍 本专栏旨在通过对ROS2的系统学习,掌握ROS2底层基本分布式原理,并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。…

Pytorch for training1——read data/image

blog torch.utils.data.Dataset create dataset with class torch.utils.data.Dataset automaticly import torch from torch.utils.data import Datasetclass MyDataset(Dataset):def __init__(self, data):self.data datadef __getitem__(self, index):# 根据索引获取样本…