1# 日期滑动选择器弹窗 (DatePickerDialog) 2 3根据指定的日期范围创建日期滑动选择器，展示在弹窗上。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../js-apis-arkui-UIContext.md#uicontext)说明。 10> 11> 从API version 10开始，可以通过使用[UIContext](../js-apis-arkui-UIContext.md#uicontext)中的[showDatePickerDialog](../js-apis-arkui-UIContext.md#showdatepickerdialog)来明确UI的执行上下文。 12 13## DatePickerDialog.show 14 15show(options?: DatePickerDialogOptions) 16 17定义日期滑动选择器弹窗并弹出。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ------- | ----------------------------------------------------------- | ---- | -------------------------- | 25| options | [DatePickerDialogOptions](#datepickerdialogoptions对象说明) | 否 | 配置日期选择器弹窗的参数。 | 26 27## DatePickerDialogOptions对象说明 28 29继承自[DatePickerOptions](ts-basic-components-datepicker.md#datepickeroptions对象说明)。 30 31| 名称 | 类型 | 必填 | 说明 | 32| -------- | -------- | -------- | -------- | 33| lunar | boolean | 否 | 日期是否显示为农历，true表示显示农历，false表示不显示农历。<br/>默认值：false | 34| showTime<sup>10+</sup> | boolean | 否 | 是否展示时间项，true表示显示时间，false表示不显示时间。<br/>默认值：false | 35| useMilitaryTime<sup>10+</sup> | boolean | 否 | 展示时间是否为24小时制，true表示显示24小时制，false表示显示12小时制。<br/>默认值：false<br />**说明：** <br/>当展示时间为12小时制时，上下午与小时无联动关系。 | 36| lunarSwitch<sup>10+</sup> | boolean | 否 | 是否展示切换农历的开关，true表示展示开关，false表示不展示开关。<br/>默认值：false | 37| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 38| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 39| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} | 40| alignment<sup>10+</sup> | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 41| offset<sup>10+</sup> | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。<br/>默认值：{ dx: 0 , dy: 0 } | 42| maskRect<sup>10+</sup>| [Rectangle](ts-methods-alert-dialog-box.md#rectangle8类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br/>默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | 43| onAccept<sup>(deprecated)</sup> | (value: [DatePickerResult](ts-basic-components-datepicker.md#datepickerresult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。<br />**说明：**<br />从API version 8 开始支持，从 API version 10 开始废弃，建议使用onDateAccept。 | 44| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 | 45| onChange<sup>(deprecated)</sup> | (value: [DatePickerResult](ts-basic-components-datepicker.md#datepickerresult对象说明)) => void | 否 | 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。<br />**说明：**<br />从API version 8 开始支持，从 API version 10 开始废弃，建议使用onDateChange。 | 46| onDateAccept<sup>10+</sup> | (value: Date) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。<br />**说明：**<br />当showTime设置为true时，回调接口返回值value中时和分为选择器选择的时和分。否则，返回值value中时和分为系统时间的时和分。 | 47| onDateChange<sup>10+</sup> | (value: Date) => void | 否 | 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。<br />**说明：**<br />当showTime设置为true时，回调接口返回值value中时和分为选择器选择的时和分。否则，返回值value中时和分为系统时间的时和分。 | 48| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 弹窗背板颜色。<br/>默认值：Color.Transparent。 | 49| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-appendix-enums.md#blurstyle9) | 否 | 弹窗背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK。 | 50 51**异常情形说明:** 52 53| 异常情形 | 对应结果 | 54| -------- | ------------------------------------------------------------ | 55| 起始日期晚于结束日期，选中日期未设置 | 起始日期、结束日期和选中日期都为默认值 | 56| 起始日期晚于结束日期，选中日期早于起始日期默认值 | 起始日期、结束日期都为默认值，选中日期为起始日期默认值 | 57| 起始日期晚于结束日期，选中日期晚于结束日期默认值 | 起始日期、结束日期都为默认值，选中日期为结束日期默认值 | 58| 起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内 | 起始日期、结束日期都为默认值，选中日期为设置的值 | 59| 选中日期早于起始日期 | 选中日期为起始日期 | 60| 选中日期晚于结束日期 | 选中日期为结束日期 | 61| 起始日期晚于当前系统日期，选中日期未设置 | 选中日期为起始日期 | 62| 结束日期早于当前系统日期，选中日期未设置 | 选中日期为结束日期 | 63| 日期格式不符合规范，如‘1999-13-32’ | 取默认值 | 64| 起始日期或结束日期早于系统有效范围 | 起始日期或结束日期取系统有效范围最早日期 | 65| 起始日期或结束日期晚于系统有效范围 | 起始日期或结束日期取系统有效范围最晚日期 | 66 67系统日期范围：1900-1-31 ~ 2100-12-31 68 69选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理 70 71## 示例 72 73```ts 74// xxx.ets 75@Entry 76@Component 77struct DatePickerDialogExample { 78 selectedDate: Date = new Date("2010-1-1") 79 80 build() { 81 Column() { 82 Button("DatePickerDialog") 83 .margin(20) 84 .onClick(() => { 85 DatePickerDialog.show({ 86 start: new Date("2000-1-1"), 87 end: new Date("2100-12-31"), 88 selected: this.selectedDate, 89 showTime:true, 90 useMilitaryTime:false, 91 disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}}, 92 textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}}, 93 selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}}, 94 onDateAccept: (value: Date) => { 95 // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期 96 this.selectedDate = value 97 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 98 }, 99 onCancel: () => { 100 console.info("DatePickerDialog:onCancel()") 101 }, 102 onDateChange: (value: Date) => { 103 console.info("DatePickerDialog:onDateChange()" + value.toString()) 104 } 105 }) 106 }) 107 108 Button("Lunar DatePickerDialog") 109 .margin(20) 110 .onClick(() => { 111 DatePickerDialog.show({ 112 start: new Date("2000-1-1"), 113 end: new Date("2100-12-31"), 114 selected: this.selectedDate, 115 lunar: true, 116 disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}}, 117 textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}}, 118 selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}}, 119 onDateAccept: (value: Date) => { 120 this.selectedDate = value 121 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 122 }, 123 onCancel: () => { 124 console.info("DatePickerDialog:onCancel()") 125 }, 126 onDateChange: (value: Date) => { 127 console.info("DatePickerDialog:onDateChange()" + value.toString()) 128 } 129 }) 130 }) 131 }.width('100%') 132 } 133} 134``` 135 136 137 138> **说明：** 139> 140> 如需完全自定义实现日期滑动选择器弹窗，可以通过先使用[自定义弹窗 (CustomDialog)](ts-methods-custom-dialog-box.md)，然后使用[DatePicker组件](ts-basic-components-datepicker.md)来实现。 141
