1# Date Picker Dialog Box (DatePickerDialog) 2 3A date picker dialog box is a dialog box that allows users to select a date from the given range. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [showDatePickerDialog](../js-apis-arkui-UIContext.md#showdatepickerdialog) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext), which ensures that the date picker dialog box is shown in the intended UI instance. 12 13## DatePickerDialog 14 15### show 16 17static show(options?: DatePickerDialogOptions) 18 19Shows a date picker dialog box. 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name | Type | Mandatory| Description | 28| ------- | ----------------------------------------------------------- | ---- | -------------------------- | 29| options | [DatePickerDialogOptions](#datepickerdialogoptions) | No | Parameters of the date picker dialog box.| 30 31## DatePickerDialogOptions 32 33Inherited from [DatePickerOptions](ts-basic-components-datepicker.md#datepickeroptions). 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Name| Type| Mandatory| Description| 38| -------- | -------- | -------- | -------- | 39| lunar | boolean | No| Whether to display the lunar calendar. The value **true** means to display the lunar calendar, and **false** means the opposite.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 40| showTime<sup>10+</sup> | boolean | No| Whether to display the time item. The value **true** means to display the time item, and **false** means the opposite.<br>Default value: **false**<br>With **showTime=true**, the **mode** parameter has no effect and the default three columns for year, month, and day are displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 41| useMilitaryTime<sup>10+</sup> | boolean | No| Whether to display time in 24-hour format. The value **true** means to display time in 24-hour format, and **false** means the opposite.<br>Default value: **false**<br>**NOTE**<br>When the display time is in 12-hour format, the AM/PM zone does not change depending on the hour portion.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 42| lunarSwitch<sup>10+</sup> | boolean | No| Whether to display the lunar calendar switch. The value **true** means to display the lunar calendar switch, and **false** means the opposite.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 43| lunarSwitchStyle<sup>14+</sup> | [LunarSwitchStyle](#lunarswitchstyle14) | No| Style of the lunar calendar switch.<br>Default value: **{ selectedColor: $r('sys.color.ohos_id_color_text_primary_actived'), unselectedColor: $r('sys.color.ohos_id_color_switch_outline_off'), strokeColor: Color.White }**<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 44| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 45| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 46| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} <br>**Atomic service API**: This API can be used in atomic services since API version 11.| 47| acceptButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](#pickerdialogbuttonstyle12) | No| Style of the accept button.<br>**NOTE**<br>In the **acceptButtonStyle** and **cancelButtonStyle** configurations, only one **primary** field can be set to **true** at most. If both the **primary** fields are set to **true**, neither will take effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 48| cancelButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](#pickerdialogbuttonstyle12) | No| Style of the cancel button.<br>**NOTE**<br>In the **acceptButtonStyle** and **cancelButtonStyle** configurations, only one **primary** field can be set to **true** at most. If both the **primary** fields are set to **true**, neither will take effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 49| alignment<sup>10+</sup> | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 50| offset<sup>10+</sup> | [Offset](ts-types.md#offset) | No | Offset of the dialog box based on the **alignment** settings.<br>Default value: **{ dx: 0 , dy: 0 }**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 51| maskRect<sup>10+</sup>| [Rectangle](ts-methods-alert-dialog-box.md#rectangle8) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.<br>Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 52| onAccept<sup>(deprecated)</sup> | (value: [DatePickerResult](ts-basic-components-datepicker.md#datepickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.<br>**NOTE**<br>This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateAccept** instead.| 53| onCancel | [VoidCallback](ts-types.md#voidcallback12) | No| Callback invoked when the Cancel button in the dialog box is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 54| onChange<sup>(deprecated)</sup> | (value: [DatePickerResult](ts-basic-components-datepicker.md#datepickerresult)) => void | No| Callback invoked when the selected item in the picker changes.<br>**NOTE**<br>This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateChange** instead.| 55| onDateAccept<sup>10+</sup> | [Callback](ts-types.md#callback12)\<Date> | No| Callback invoked when the OK button in the dialog box is clicked.<br>**NOTE**<br>When **showTime** is set to **true**, the hour and minute in the value returned by the callback are the hour and minute selected in the picker. Otherwise, the hour and minute are the hour and minute of the system time.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 56| onDateChange<sup>10+</sup> | [Callback](ts-types.md#callback12)\<Date> | No| Callback invoked when the selected item in the picker changes.<br>**NOTE**<br>When **showTime** is set to **true**, the hour and minute in the value returned by the callback are the hour and minute selected in the picker. Otherwise, the hour and minute are the hour and minute of the system time.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 57| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Backplane color of the dialog box.<br>Default value: **Color.Transparent**<br>**NOTE**<br>When **backgroundColor** is set to a non-transparent color, **backgroundBlurStyle** must be set to **BlurStyle.NONE**; otherwise, the color display may not meet the expected effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 58| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the dialog box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**NOTE**<br>Setting this parameter to **BlurStyle.NONE** disables the background blur. When **backgroundBlurStyle** is set to a value other than **NONE**, do not set **backgroundColor**. If you do, the color display may not produce the expected visual effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 59| onDidAppear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | No| Event callback when the dialog box appears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onDateAccept/onCancel/onDateChange) > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onDidAppear**. The settings take effect next time the dialog box appears.<br>3. If the user closes the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.<br>4. If the dialog box is closed before its entrance animation is finished, this callback is not invoked.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 60| onDidDisappear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | No| Event callback when the dialog box disappears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onDateAccept/onCancel/onDateChange) > onWillDisappear > onDidDisappear.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 61| onWillAppear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | No| Event callback when the dialog box is about to appear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onDateAccept/onCancel/onDateChange) > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onWillAppear**. The settings take effect next time the dialog box appears.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 62| onWillDisappear<sup>12+</sup> | [VoidCallback](ts-types.md#voidcallback12) | No| Event callback when the dialog box is about to disappear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onDateAccept/onCancel/onDateChange) > onWillDisappear > onDidDisappear.<br>2. If the user closes the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 63| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Shadow of the dialog box.<br> Default value on 2-in-1 devices: **ShadowStyle.OUTER_FLOATING_MD** when the dialog box is focused and **ShadowStyle.OUTER_FLOATING_SM** otherwise<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 64| dateTimeOptions<sup>12+</sup> | [DateTimeOptions](../../apis-localization-kit/js-apis-intl.md#datetimeoptions) | No| Whether to display a leading zero for the hours and minutes. Currently only the configuration of the **hour** and **minute** parameters is supported.<br>Default value:<br>**hour**: In the 24-hour format, it defaults to **2-digit**, which means a leading zero is used; In the 12-hour format, it defaults to **numeric**, which means no leading zero is used.<br>**minute**: defaults to **2-digit**, which means a leading zero is used.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 65| enableHoverMode<sup>14+</sup> | boolean | No | Whether to enable the hover mode.<br>Default value: **false**, meaning not to enable the hover mode.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 66| hoverModeArea<sup>14+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | No | Display area of the dialog box in hover mode.<br>Default value: **HoverModeAreaType.BOTTOM_SCREEN**<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 67| enableHapticFeedback<sup>16+</sup> | boolean | No | Whether to enable haptic feedback.<br>The value **true** means to enable haptic feedback, and **false** means the opposite. The default value is **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 16.<br>**NOTE**<br>To enable haptic feedback, you must declare the ohos.permission.VIBRATE permission under **requestPermissions** in the **module.json5** file of the project.<br>"requestPermissions": [{"name": "ohos.permission.VIBRATE"}]| 68 69## LunarSwitchStyle<sup>14+</sup> 70 71Defines the style of the lunar calendar switch in the **DatePickerDialog** component. 72 73**Atomic service API**: This API can be used in atomic services since API version 14. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77| Name | Type | Mandatory| Description | 78| ------ |-------------------|-----|----------| 79| selectedColor| [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the switch when it is on.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_actived')**| 80| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Border color of the switch when it is off.<br>Default value: **$r('sys.color.ohos_id_color_switch_outline_off')**| 81| strokeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the icon inside the switch.<br>Default value: **Color.White**| 82 83## PickerDialogButtonStyle<sup>12+</sup> 84 85**Atomic service API**: This API can be used in atomic services since API version 12. 86 87**System capability**: SystemCapability.ArkUI.ArkUI.Full 88 89| Name | Type | Mandatory | Description | 90| ----- | ---------------------------------------- | ---- | ------------------------- | 91| type | [ButtonType](ts-basic-components-button.md#buttontype) | No | Button type. | 92| style | [ButtonStyleMode](ts-basic-components-button.md#buttonstylemode11) | No | Style and importance of the button.| 93| role | [ButtonRole](ts-basic-components-button.md#buttonrole12) | No | Role of the button. | 94| fontSize | [Length](ts-types.md#length) | No | Font size of the button.| 95| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the button. | 96| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string| No | Font weight of the button. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.| 97| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style of the button. | 98| fontFamily | [Resource](ts-types.md#resource) \| string | No | Font family of the button. The 'HarmonyOS Sans' font and [registered custom fonts](../js-apis-font.md) are supported.| 99| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the button. | 100| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](ts-types.md#borderradiuses9)| No | Rounded corner radius of the button.| 101| primary | boolean | No | Whether the button responds to the **Enter** key by default when the dialog box has focus and the **Tab** key is not pressed for sequential focus navigation.| 102 103**Handling in the case of exceptions** 104 105| Exception | Result | 106| -------- | ------------------------------------------------------------ | 107| The start date is later than the end date, and the selected date is not set. | The start date, end date, and selected date are set to the default values. | 108| The start date is later than the end date, and the selected date is earlier than the default start date. | The start date and end date are set to the default values, and the selected date is set to the default start date. | 109| The start date is later than the end date, and the selected date is later than the default end date. | The start date and end date are set to the default values, and the selected date is set to the default end date. | 110| The start date is later than the end date, and the selected date is within the range of the default start date and end date. | The start date and end date are set to the default values, and the selected date is set to the specified value.| 111| The selected date is earlier than the start date. | The selected date is set to the start date. | 112| The selected date is later than the end date. | The selected date is set to the end date. | 113| The start date is later than the current system date, and the selected date is not set. | The selected date is set to the start date. | 114| The end date is earlier than the current system date, and the selected date is not set. | The selected date is set to the end date. | 115| The set date is in invalid format, for example, **'1999-13-32'**. | The default value is used. | 116| The start date or end date is earlier than the valid date range. | The start date or end date is set to the earliest date in the valid date range. | 117| The start date or end date is later than the valid date range. | The start date or end date is set to the latest date in the valid date range. | 118 119The valid date range is from 1900-1-31 to 2100-12-31. 120 121The exception detection and handling with the selected date comes after that with the start date and end date. 122 123## Example 124 125> **NOTE** 126> 127> For clarity in UI execution context, you are advised to use the [showDatePickerDialog](../js-apis-arkui-UIContext.md#showdatepickerdialog) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext). 128 129### Example 1: Setting the Display Time 130 131This example demonstrates how to set the display time using **showTime**, **useMilitaryTime**, and **dateTimeOptions**. 132 133```ts 134// xxx.ets 135@Entry 136@Component 137struct DatePickerDialogExample { 138 selectedDate: Date = new Date("2010-1-1") 139 140 build() { 141 Column() { 142 Button("DatePickerDialog") 143 .margin(20) 144 .onClick(() => { 145 DatePickerDialog.show({ 146 // You are advised to use this.getUIContext().showDatePickerDialog(). 147 start: new Date("2000-1-1"), 148 end: new Date("2100-12-31"), 149 selected: this.selectedDate, 150 showTime: true, 151 useMilitaryTime: false, 152 dateTimeOptions: { hour: "numeric", minute: "2-digit" }, 153 onDateAccept: (value: Date) => { 154 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 155 this.selectedDate = value 156 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 157 }, 158 onCancel: () => { 159 console.info("DatePickerDialog:onCancel()") 160 }, 161 onDateChange: (value: Date) => { 162 console.info("DatePickerDialog:onDateChange()" + value.toString()) 163 }, 164 onDidAppear: () => { 165 console.info("DatePickerDialog:onDidAppear()") 166 }, 167 onDidDisappear: () => { 168 console.info("DatePickerDialog:onDidDisappear()") 169 }, 170 onWillAppear: () => { 171 console.info("DatePickerDialog:onWillAppear()") 172 }, 173 onWillDisappear: () => { 174 console.info("DatePickerDialog:onWillDisappear()") 175 } 176 }) 177 }) 178 }.width('100%') 179 } 180} 181``` 182 183 184 185### Example 2: Customizing the Style 186 187In this example, **disappearTextStyle**, **textStyle**, **selectedTextStyle**, **acceptButtonStyle**, and **cancelButtonStyle** are configured to customize the text and button style. 188 189```ts 190// xxx.ets 191@Entry 192@Component 193struct DatePickerDialogExample { 194 selectedDate: Date = new Date("2010-1-1") 195 196 build() { 197 Column() { 198 Button("DatePickerDialog") 199 .margin(20) 200 .onClick(() => { 201 DatePickerDialog.show({ 202 start: new Date("2000-1-1"), 203 end: new Date("2100-12-31"), 204 selected: this.selectedDate, 205 disappearTextStyle: { color: '#297bec', font: { size: '20fp', weight: FontWeight.Bold } }, 206 textStyle: { color: Color.Black, font: { size: '18fp', weight: FontWeight.Normal } }, 207 selectedTextStyle: { color: Color.Blue, font: { size: '26fp', weight: FontWeight.Regular } }, 208 acceptButtonStyle: { 209 type: ButtonType.Normal, 210 style: ButtonStyleMode.NORMAL, 211 role: ButtonRole.NORMAL, 212 fontColor: 'rgb(81, 81, 216)', 213 fontSize: '26fp', 214 fontWeight: FontWeight.Bolder, 215 fontStyle: FontStyle.Normal, 216 fontFamily: 'sans-serif', 217 backgroundColor: '#A6ACAF', 218 borderRadius: 20 219 }, 220 cancelButtonStyle: { 221 type: ButtonType.Normal, 222 style: ButtonStyleMode.NORMAL, 223 role: ButtonRole.NORMAL, 224 fontColor: Color.Blue, 225 fontSize: '16fp', 226 fontWeight: FontWeight.Normal, 227 fontStyle: FontStyle.Italic, 228 fontFamily: 'sans-serif', 229 backgroundColor: '#50182431', 230 borderRadius: 10 231 }, 232 onDateAccept: (value: Date) => { 233 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 234 this.selectedDate = value 235 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 236 }, 237 onCancel: () => { 238 console.info("DatePickerDialog:onCancel()") 239 }, 240 onDateChange: (value: Date) => { 241 console.info("DatePickerDialog:onDateChange()" + value.toString()) 242 }, 243 onDidAppear: () => { 244 console.info("DatePickerDialog:onDidAppear()") 245 }, 246 onDidDisappear: () => { 247 console.info("DatePickerDialog:onDidDisappear()") 248 }, 249 onWillAppear: () => { 250 console.info("DatePickerDialog:onWillAppear()") 251 }, 252 onWillDisappear: () => { 253 console.info("DatePickerDialog:onWillDisappear()") 254 } 255 }) 256 }) 257 }.width('100%') 258 } 259} 260``` 261 262 263 264> **NOTE** 265> 266> To implement a fully customized date picker dialog box, create a [custom dialog box](ts-methods-custom-dialog-box.md) and then implement the [DatePicker](ts-basic-components-datepicker.md) component. 267 268### Example 3: Configuring a Dialog Box in the Hover State 269 270This example demonstrates how to set the layout area of a dialog box in hover mode on a foldable device. 271 272```ts 273@Entry 274@Component 275struct DatePickerDialogExample { 276 selectedDate: Date = new Date("2010-1-1"); 277 278 build() { 279 Column() { 280 Button("DatePickerDialog") 281 .margin(20) 282 .onClick(() => { 283 DatePickerDialog.show({ // You are advised to use this.getUIContext().showDatePickerDialog(). 284 start: new Date("2000-1-1"), 285 end: new Date("2100-12-31"), 286 selected: this.selectedDate, 287 showTime: true, 288 useMilitaryTime: false, 289 disappearTextStyle: { color: Color.Pink, font: { size: '22fp', weight: FontWeight.Bold }}, 290 textStyle: { color: '#ff00ff00', font: { size: '18fp', weight: FontWeight.Normal }}, 291 selectedTextStyle: { color: '#ff182431', font: { size: '14fp', weight: FontWeight.Regular }}, 292 onDateAccept: (value: Date) => { 293 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 294 this.selectedDate = value; 295 console.info("DatePickerDialog:onDateAccept()" + value.toString()); 296 }, 297 onCancel: () => { 298 console.info("DatePickerDialog:onCancel()"); 299 }, 300 onDateChange: (value: Date) => { 301 console.info("DatePickerDialog:onDateChange()" + value.toString()); 302 }, 303 onDidAppear: () => { 304 console.info("DatePickerDialog:onDidAppear()"); 305 }, 306 onDidDisappear: () => { 307 console.info("DatePickerDialog:onDidDisappear()"); 308 }, 309 onWillAppear: () => { 310 console.info("DatePickerDialog:onWillAppear()"); 311 }, 312 onWillDisappear: () => { 313 console.info("DatePickerDialog:onWillDisappear()"); 314 }, 315 enableHoverMode: true, 316 hoverModeArea: HoverModeAreaType.TOP_SCREEN 317 }) 318 }) 319 }.width('100%') 320 } 321} 322``` 323 324 325 326### Example 4: Setting the Dialog Box Position 327 328This example demonstrates how to set the position of a dialog box using **alignment** and **offset**. 329 330```ts 331// xxx.ets 332@Entry 333@Component 334struct DatePickerDialogExample { 335 selectedDate: Date = new Date("2010-1-1") 336 337 build() { 338 Column() { 339 Button("DatePickerDialog") 340 .margin(20) 341 .onClick(() => { 342 DatePickerDialog.show({ 343 // You are advised to use this.getUIContext().showDatePickerDialog(). 344 start: new Date("2000-1-1"), 345 end: new Date("2100-12-31"), 346 selected: this.selectedDate, 347 alignment: DialogAlignment.Center, 348 offset: { dx: 20, dy: 0 }, 349 onDateAccept: (value: Date) => { 350 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 351 this.selectedDate = value 352 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 353 } 354 }) 355 }) 356 }.width('100%') 357 } 358} 359``` 360 361 362 363### Example 5: Setting the Mask Area 364 365This example demonstrates how to set the mask area using **maskRect**. 366 367```ts 368// xxx.ets 369@Entry 370@Component 371struct DatePickerDialogExample { 372 selectedDate: Date = new Date("2010-1-1") 373 374 build() { 375 Column() { 376 Button("DatePickerDialog") 377 .margin(20) 378 .onClick(() => { 379 DatePickerDialog.show({ 380 start: new Date("2000-1-1"), 381 end: new Date("2100-12-31"), 382 selected: this.selectedDate, 383 maskRect: { 384 x: 30, 385 y: 60, 386 width: '100%', 387 height: '60%' 388 }, 389 onDateAccept: (value: Date) => { 390 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 391 this.selectedDate = value 392 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 393 } 394 }) 395 }) 396 }.width('100%') 397 } 398} 399``` 400 401 402 403### Example 6: Setting the Background 404 405This example demonstrates how to set the dialog box background using **backgroundColor**, **backgroundBlurStyle**, and **shadow**. 406 407```ts 408// xxx.ets 409@Entry 410@Component 411struct DatePickerDialogExample { 412 selectedDate: Date = new Date("2010-1-1") 413 414 build() { 415 Column() { 416 Button("DatePickerDialog") 417 .margin(20) 418 .onClick(() => { 419 DatePickerDialog.show({ 420 start: new Date("2000-1-1"), 421 end: new Date("2100-12-31"), 422 selected: this.selectedDate, 423 backgroundColor: 'rgb(204, 226, 251)', 424 backgroundBlurStyle: BlurStyle.NONE, 425 shadow: ShadowStyle.OUTER_FLOATING_SM, 426 onDateAccept: (value: Date) => { 427 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 428 this.selectedDate = value 429 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 430 } 431 }) 432 }) 433 }.width('100%') 434 } 435} 436``` 437 438 439 440### Example 7: Switching Between Gregorian and Lunar Calendars 441 442This example demonstrates how to set the date picker dialog box to display either the Gregorian (solar) calendar or the lunar calendar using **lunar** and **lunarSwitch**. 443 444```ts 445// xxx.ets 446@Entry 447@Component 448struct DatePickerDialogExample { 449 selectedDate: Date = new Date("2010-1-1") 450 451 build() { 452 Column() { 453 Button("DatePickerDialog") 454 .margin(20) 455 .onClick(() => { 456 DatePickerDialog.show({ 457 start: new Date("2000-1-1"), 458 end: new Date("2100-12-31"), 459 selected: this.selectedDate, 460 lunar: false, 461 onDateAccept: (value: Date) => { 462 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 463 this.selectedDate = value 464 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 465 } 466 }) 467 }) 468 469 Button("Lunar DatePickerDialog") 470 .margin(20) 471 .onClick(() => { 472 DatePickerDialog.show({ 473 start: new Date("2000-1-1"), 474 end: new Date("2100-12-31"), 475 selected: this.selectedDate, 476 lunar: true, 477 lunarSwitch: true, 478 onDateAccept: (value: Date) => { 479 this.selectedDate = value 480 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 481 } 482 }) 483 }) 484 }.width('100%') 485 } 486} 487``` 488 489 490 491### Example 8: Setting Display of Month and Day Columns 492 493This example demonstrates how to configure the **mode** parameter to display only the month and day columns in the date picker dialog box. 494 495```ts 496// xxx.ets 497@Entry 498@Component 499struct DatePickerDialogExample { 500 selectedDate: Date = new Date("2010-1-1") 501 502 build() { 503 Column() { 504 Button("DatePickerDialog") 505 .margin(20) 506 .onClick(() => { 507 DatePickerDialog.show({ 508 start: new Date("2000-1-1"), 509 end: new Date("2100-12-31"), 510 selected: this.selectedDate, 511 mode: DatePickerMode.MONTH_AND_DAY, 512 onDateAccept: (value: Date) => { 513 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 514 this.selectedDate = value 515 console.info("DatePickerDialog:onDateAccept()" + value.toString()) 516 } 517 }) 518 }) 519 }.width('100%') 520 } 521} 522``` 523 524 525
