鸿蒙5.0开发进阶：ArkTS组件-日期滑动选择器弹窗 (DatePickerDialog)

最新推荐文章于 2025-06-04 13:51:02 发布
原创 最新推荐文章于 2025-06-04 13:51:02 发布 · 786 阅读 · 29 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #前端 #鸿蒙系统 #ArkUI #ArkTS

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

日期滑动选择器弹窗 (DatePickerDialog)

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

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

从API version 10开始，可以通过使用UIContext中的showDatePickerDialog来明确UI的执行上下文。

DatePickerDialog

show

static show(options?: DatePickerDialogOptions)

定义日期滑动选择器弹窗并弹出。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsDatePickerDialogOptions否配置日期选择器弹窗的参数。

DatePickerDialogOptions对象说明

继承自DatePickerOptions。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
lunarboolean否

日期是否显示为农历，true表示显示农历，false表示不显示农历。

默认值：false

元服务API： 从API version 11开始，该接口支持在元服务中使用。

showTime10+boolean否

是否展示时间项，true表示显示时间，false表示不显示时间。

默认值：false

元服务API： 从API version 11开始，该接口支持在元服务中使用。

useMilitaryTime10+boolean否

展示时间是否为24小时制，true表示显示24小时制，false表示显示12小时制。

默认值：false

说明：

当展示时间为12小时制时，上下午与小时无联动关系。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

lunarSwitch10+boolean否

是否展示切换农历的开关，true表示展示开关，false表示不展示开关。

默认值：false

元服务API： 从API version 11开始，该接口支持在元服务中使用。

disappearTextStyle10+PickerTextStyle否

设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。

默认值：

{

color: '#ff182431',

font: {

size: '14fp',

weight: FontWeight.Regular

}

}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

textStyle10+PickerTextStyle否

设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。

默认值：

{

color: '#ff182431',

font: {

size: '16fp',

weight: FontWeight.Regular

}

}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

selectedTextStyle10+PickerTextStyle否

设置选中项的文本颜色、字号、字体粗细。

默认值：

{

color: '#ff007dff',

font: {

size: '20vp',

weight: FontWeight.Medium

}

}

元服务API： 从API version 11开始，该接口支持在元服务中使用。

acceptButtonStyle12+PickerDialogButtonStyle否

设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。

说明：

acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

cancelButtonStyle12+PickerDialogButtonStyle否

设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。

说明：

acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

alignment10+DialogAlignment否

弹窗在竖直方向上的对齐方式。

默认值：DialogAlignment.Default

元服务API： 从API version 11开始，该接口支持在元服务中使用。

offset10+Offset否

弹窗相对alignment所在位置的偏移量。

默认值：{ dx: 0 , dy: 0 }

元服务API： 从API version 11开始，该接口支持在元服务中使用。

maskRect10+Rectangle否

弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。

默认值：{ x: 0, y: 0, width: '100%', height: '100%' }

元服务API： 从API version 11开始，该接口支持在元服务中使用。

onAccept(deprecated)(value: DatePickerResult) => void否

点击弹窗中的“确定”按钮时触发该回调。

说明：

从API version 8 开始支持，从 API version 10 开始废弃，建议使用onDateAccept。

onCancel() => void否

点击弹窗中的“取消”按钮时触发该回调。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

onChange(deprecated)(value: DatePickerResult) => void否

滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。

说明：

从API version 8 开始支持，从 API version 10 开始废弃，建议使用onDateChange。

onDateAccept10+(value: Date) => void否

点击弹窗中的“确定”按钮时触发该回调。

说明：

当showTime设置为true时，回调接口返回值value中时和分为选择器选择的时和分。否则，返回值value中时和分为系统时间的时和分。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

onDateChange10+(value: Date) => void否

滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。

说明：

当showTime设置为true时，回调接口返回值value中时和分为选择器选择的时和分。否则，返回值value中时和分为系统时间的时和分。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

backgroundColor11+ResourceColor否

弹窗背板颜色。

默认值：Color.Transparent

说明：

当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

backgroundBlurStyle11+BlurStyle否

弹窗背板模糊材质。

默认值：BlurStyle.COMPONENT_ULTRA_THICK

说明：

设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期效果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

onDidAppear12+() => void否

弹窗弹出时的事件回调。

说明：

1.正常时序依次为：onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。

2.在onDidAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。

3.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。

4. 当弹窗入场动效未完成时关闭弹窗，该回调不会触发。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

onDidDisappear12+() => void否

弹窗消失时的事件回调。

说明：

1.正常时序依次为：onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

onWillAppear12+() => void否

弹窗显示动效前的事件回调。

说明：

1.正常时序依次为：onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。

2.在onWillAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

onWillDisappear12+() => void否

弹窗退出动效前的事件回调。

说明：

1.正常时序依次为：onWillAppear>>onDidAppear>>(onDateAccept/onCancel/onDateChange)>>onWillDisappear>>onDidDisappear。

2.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

shadow12+ShadowOptions | ShadowStyle否

设置弹窗背板的阴影。

当设备为2in1时，默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD，失焦为ShadowStyle.OUTER_FLOATING_SM。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

dateTimeOptions12+DateTimeOptions否

设置时分是否显示前置0，目前只支持设置hour和minute参数。

默认值：

hour: 24小时制默认为"2-digit"，即有前置0；12小时制默认为"numeric"，即没有前置0。

minute: 默认为"2-digit"，即有前置0。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

PickerDialogButtonStyle12+类型说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数名参数类型必填参数描述
typeButtonType否按钮显示样式。
styleButtonStyleMode否按钮的样式和重要程度。
roleButtonRole否Button组件的角色。
fontSizeLength否文本显示字号。
fontColorResourceColor否文本显示颜色。
fontWeightFontWeight | number | string否文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗
fontStyleFontStyle否文本的字体样式。
fontFamilyResource | string否字体列表。默认字体'HarmonyOS Sans'，当前支持'HarmonyOS Sans'字体和注册自定义字体。
backgroundColorResourceColor否按钮背景色。
borderRadiusLength | BorderRadiuses否圆角半径。
primaryboolean否在弹窗获焦且未进行tab键走焦时，按钮是否默认响应Enter键。

异常情形说明:

异常情形对应结果
起始日期晚于结束日期，选中日期未设置起始日期、结束日期和选中日期都为默认值
起始日期晚于结束日期，选中日期早于起始日期默认值起始日期、结束日期都为默认值，选中日期为起始日期默认值
起始日期晚于结束日期，选中日期晚于结束日期默认值起始日期、结束日期都为默认值，选中日期为结束日期默认值
起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内起始日期、结束日期都为默认值，选中日期为设置的值
选中日期早于起始日期选中日期为起始日期
选中日期晚于结束日期选中日期为结束日期
起始日期晚于当前系统日期，选中日期未设置选中日期为起始日期
结束日期早于当前系统日期，选中日期未设置选中日期为结束日期
日期格式不符合规范，如‘1999-13-32’取默认值
起始日期或结束日期早于系统有效范围起始日期或结束日期取系统有效范围最早日期
起始日期或结束日期晚于系统有效范围起始日期或结束日期取系统有效范围最晚日期

系统日期范围：1900-1-31 ~ 2100-12-31

选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理

示例

说明

推荐通过使用UIContext中的showDatePickerDialog来明确UI的执行上下文。

示例1（弹出日期选择弹窗）

该示例通过点击按钮弹出日期选择弹窗。

// xxx.ets
@Entry
@Component
struct DatePickerDialogExample {
  selectedDate: Date = new Date("2010-1-1")

  build() {
    Column() {
      Button("DatePickerDialog")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({ // 建议使用 this.getUIContext().showDatePickerDialog()接口
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            showTime:true,
            useMilitaryTime:false,
            disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
            textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
            selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
            onDateAccept: (value: Date) => {
              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
              this.selectedDate = value
              console.info("DatePickerDialog:onDateAccept()" + value.toString())
            },
            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()")
            }
          })
        })

      Button("Lunar DatePickerDialog")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            lunar: true,
            disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
            textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
            selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
            onDateAccept: (value: Date) => {
              this.selectedDate = value
              console.info("DatePickerDialog:onDateAccept()" + value.toString())
            },
            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%')
  }
}

示例2（自定义样式）

该示例通过配置disappearTextStyle、textStyle、selectedTextStyle、acceptButtonStyle、cancelButtonStyle实现了自定义文本以及按钮样式。

// xxx.ets
@Entry
@Component
struct DatePickerDialogExample {
  selectedDate: Date = new Date("2010-1-1")

  build() {
    Column() {
      Button("DatePickerDialog")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            showTime:true,
            useMilitaryTime:false,
            disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
            textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
            selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
            acceptButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Red,
              fontSize: '26fp', fontWeight: FontWeight.Bolder, fontStyle: FontStyle.Normal, fontFamily: 'sans-serif', backgroundColor:'#80834511',
              borderRadius: 20 },
            cancelButtonStyle: { type: ButtonType.Normal, style: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL, fontColor: Color.Blue,
              fontSize: '16fp', fontWeight: FontWeight.Normal, fontStyle: FontStyle.Italic, fontFamily: 'sans-serif', backgroundColor:'#50182431',
              borderRadius: 10 },
            onDateAccept: (value: Date) => {
              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
              this.selectedDate = value
              console.info("DatePickerDialog:onDateAccept()" + value.toString())
            },
            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%')
  }
}

说明

如需完全自定义实现日期滑动选择器弹窗，可以通过先使用自定义弹窗 (CustomDialog)，然后使用DatePicker组件来实现。

鸿蒙OpenHarmony【日期滑动选择器弹窗 (DatePickerDialog)】弹窗
hhhhhh2323的博客
11-21 866
定义日期滑动选择器弹窗并弹出。
鸿蒙（HarmonyOS）DatePicker+TimePicker时间选择控件
Jafer的博客
07-31 1510
操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0（API 9）控制 鸿蒙（HarmonyOS）DatePicker+TimePicker时间选择控件
鸿蒙Harmony应用开发—ArkTS-全局UI方法（日期滑动选择器弹窗）
m0_64420071的博客
03-21 2211
根据指定的日期范围创建日期滑动选择器，展示在弹窗上。
#跟着若城学鸿蒙# UI组件篇-日期滑动选择器弹窗 (DatePickerDialog) 及其属性
Huang兄
05-21 822
DatePickerDialog 是 ArkUI 提供的一个日期选择器组件，允许用户在弹窗中通过滑动选择器选择日期。该组件从 API Version 8 开始支持，并在后续版本中不断优化和扩展功能。DatePickerDialog 是 ArkUI 提供的一个强大且灵活的日期选择器组件，通过丰富的配置选项和回调函数，可以满足各种复杂的日期选择需求。开发者可以根据实际需求，灵活配置 DatePickerDialog 的各项参数，实现个性化的日期选择功能。
【鸿蒙开发】弹窗组件AlertDialog，ActionSheet，DatePickerDialog，TimePickerDialog，TextPickerDialog
d312697510的博客
04-08 4067
鸿蒙开发arkts，AlertDialog警告弹窗，ActionSheet列表选择弹窗，DatePickerDialog日期选择弹窗，TimePickerDialog时间选择弹窗，TextPickerDialog文本选择弹窗
鸿蒙5.0版开发：ArkTS组件-日期滑动选择器弹窗 (DatePickerDialog)
m0_69424697的博客
11-30 1310
根据指定的日期范围创建日期滑动选择器，展示在弹窗上。
鸿蒙5.0版开发：ArkTS组件-自定义弹窗 (CustomDialog)
m0_69424697的博客
11-29 1090
通过CustomDialogController类显示自定义弹窗。
OpenHarmony实战开发-日期滑动选择器弹窗 (DatePickerDialog)
2401_82546228的博客
05-27 1510
根据指定的日期范围创建日期滑动选择器，展示在弹窗上。说明：该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。从API version 10开始，可以通过使用UIContext中的showDatePickerDialog来明确UI的执行上下文。
ArkTS-日期滑动选择器弹窗
qq_41154522的博客
11-30 1158
鸿蒙开发-日期滑动选择器弹窗
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：DatePicker）
m0_64420071的博客
03-08 1774
ArkTS声明式开发（基础手势：DatePicker）
鸿蒙开发全局UI方法：【日历选择器弹窗】
2401_82772199的博客
07-25 1530
根据指定的日期范围创建日期滑动选择器，展示在弹窗上。该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext]说明。从API version 10开始，可以通过使用[UIContext]中的[showDatePickerDialog]来明确UI的执行上下文。
【鸿蒙next开发】ArkUI框架：ArkTS组件-日历选择器弹窗 (CalendarPickerDialog)
最新发布
m0_73088370的博客
06-04 1035
本文详细介绍了鸿蒙HarmonyOS的CalendarPickerDialog组件使用方法，包括其API版本支持、系统能力、参数配置以及回调事件说明。
OpenHarmony实战开发-如何实现自定义日历选择器。
2401_82546228的博客
04-16 723
本示例介绍通过CustomDialogController类显示自定义日历选择器。
鸿蒙开发进阶：实现一个属于自己的日期选择器
初一十五的博客
08-28 1928
根据父组件默认选中时间打开子组件弹窗回显日期
鸿蒙HarmonyOS NEXT开发：DatePicker（基础组件）
shudaoshanBBQ的博客
08-15 1577
日期选择器组件，用于根据指定日期范围创建日期滑动选择器。
基础ArkTS组件：数据面板组件（图表），日期选择器组件（HarmonyOS学习第三课【3.5】）
qq_58213084的博客
05-08 1878
数据面板组件，用于将多个数据占比情况使用占比图进行展示。说明该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙HarmonyOS NEXT开发：CalendarPicker（基础组件）
shudaoshanBBQ的博客
08-14 1554
日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。
鸿蒙开发组件之DatePicker
Lu_Ca的博客
12-13 1136
选择时间的回调也是onChange回调方法，回调对象是TimePickerResult类型，也可以拿到hour和minute。不过，当前版本有个系统bug，默认选中的日期不是今天。注意，回调函数的value是一个DatePickerResult类型的，不是Date类型。作为日期选择组件，当然选择日期才是它的目的，选择日期在onChange的回调函数中。DatePicker是鸿蒙开发中的日期组件，主要用来日期的选择。当然我们的start和end参数是可选的，不必须传递，所以初始化也可以是。
18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器
Txwtech
01-22 1643
18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器点击button按钮显示月份与获取的时间。
Swift开发之DatePickerDialog-iOS日期选择器实现
- **DatePickerDialog - iOS的日期选择器对话框**: 描述重复强调了DatePickerDialog是iOS系统提供的一个用于选择日期的组件。这表明了DatePickerDialog在iOS开发中的原生地位，开发人员可以直接利用iOS SDK中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值