HarmonyOs鸿蒙开发，日期滑动选择器
文章目录
- 一、概述
- 二、 完整示例代码
- 三、 核心参数详解
- 1. 基本日期配置
- 2. 时间显示配置
- 3. 界面与交互
- 四、 回调函数详解
- 五、 常见问题与解决方案
- 六、效果演示
- 七、 总结
一、概述
DatePickerDialog 是 HarmonyOS ArkTS 中一个强大的日期选择对话框组件，它提供了丰富的配置选项和回调函数，可以让用户轻松选择日期和时间。该组件支持日期范围设置、农历显示、时间选择、触觉反馈等多种功能。
二、 完整示例代码
@Entry
@Component
struct DatePickerDialogExample {selectedDate: Date = new Date("2010-1-1");build() {Column() {Button("DatePickerDialog").margin(20).onClick(() => {this.getUIContext().showDatePickerDialog({start: new Date("2000-1-1"),end: new Date("2100-12-31"),selected: this.selectedDate,showTime: false, //是否在弹窗内展示时间选择器。useMilitaryTime: false, //弹窗内展示的时间选择器是否为24小时制，仅当showTime为true时生效。dateTimeOptions: { hour: "numeric", minute: "2-digit" },lunar:false, //日期是否显示为农历。lunarSwitch:false, //是否展示切换农历的开关。alignment:DialogAlignment.Bottom, //设置弹窗位置enableHapticFeedback:true, //设置是否开启触控反馈(设置为true后，其生效情况取决于系统的硬件是否支持)onDateAccept: (value: Date) => {// 1. 点击弹窗中的“确定”按钮时触发该回调。// 2. 保存按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期this.selectedDate = value;console.info("DatePickerDialog:onDateAccept()" + value.toString());this.getUIContext().getPromptAction().showToast({message:`${this.selectedDate.getFullYear()}-${this.selectedDate.getMonth()+1}-${this.selectedDate.getDate()}`})},onCancel: () => {//点击弹窗中的“取消”按钮时触发该回调。console.info("DatePickerDialog:onCancel()");},onDateChange: (value: Date) => {//滑动弹窗中的日期使当前选中项改变时触发该回调。console.info("DatePickerDialog:onDateChange()" + value.toString());},onDidAppear: () => {//弹窗弹出时的事件回调。console.info("DatePickerDialog:onDidAppear()");},onDidDisappear: () => {//弹窗消失时的事件回调。console.info("DatePickerDialog:onDidDisappear()");},onWillAppear: () => {//弹窗显示动效前的事件回调。console.info("DatePickerDialog:onWillAppear()");},onWillDisappear: () => {//弹窗退出动效前的事件回调。console.info("DatePickerDialog:onWillDisappear()");}})})}.width('100%')}}
三、 核心参数详解
1. 基本日期配置
start和end: 定义可选日期的范围
start: new Date("2000-1-1"),
end: new Date("2100-12-31")
selected: 设置默认选中的日期
selected: this.selectedDate
2. 时间显示配置
showTime: 控制是否显示时间选择器
默认设置false就好，因为一般只显示年-月-日
showTime: false
useMilitaryTime: 设置是否为24小时制（仅在 showTime 为 true 时生效）
useMilitaryTime: false
dateTimeOptions: 时间显示格式配置
dateTimeOptions: { hour: "numeric", minute: "2-digit" }
3. 界面与交互
alignment: 弹窗位置对齐方式
alignment: DialogAlignment.Bottom
enableHapticFeedback: 是否启用触觉反馈
enableHapticFeedback: true
注意：
-
设置为true后，其生效情况取决于系统的硬件是否支持。
-
开启触控反馈时，需要在工程的src/main/module.json5文件的"module"内配置requestPermissions字段开启振动权限，配置如下：
“requestPermissions”: [{“name”: “ohos.permission.VIBRATE”}]
四、 回调函数详解
onDateAccept: 用户点击确定按钮时触发
onDateAccept: (value: Date) => {//保存按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期this.selectedDate = value;console.info("DatePickerDialog:onDateAccept()" + value.toString());this.getUIContext().getPromptAction().showToast({message: `${this.selectedDate.getFullYear()}-${this.selectedDate.getMonth()+1}-${this.selectedDate.getDate()}`})
}
onCancel: 用户点击取消按钮时触发
onCancel: () => {console.info("DatePickerDialog:onCancel()");
}
onDateChange: 日期选择发生变化时触发
onDateChange: (value: Date) => {console.info("DatePickerDialog:onDateChange()" + value.toString());
}
五、 常见问题与解决方案
- 日期格式问题
使用 JavaScript Date 对象时要注意月份是从 0 开始计数的，在显示时需要加 1。
- 触觉反馈依赖
enableHapticFeedback 的实际效果取决于设备硬件支持情况，需要进行兼容性测试。
六、效果演示
七、 总结
DatePickerDialog 是 HarmonyOS ArkTS 中功能强大的日期选择组件，通过合理的配置和回调处理，可以满足各种日期选择需求。掌握其各项参数和回调函数的使用方法，能够帮助开发者创建出用户体验优秀的日期选择功能。
本文通过详细的代码示例和参数解析，为开发者提供了全面的 DatePickerDialog 使用指南，希望能够帮助大家在实际开发中更好地运用这一组件。
更多使用指南，请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-datepicker-dialog