1# Date Picker Dialog Box 2 3>  **NOTE** 4> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 5 6You can display a date picker in a dialog box to allow users to select a date from the given range. 7 8## Required Permissions 9 10None 11 12## DatePickerDialog.show 13 14show(options?: DatePickerDialogOptions) 15 16Defines and displays a date picker dialog box. 17 18- options parameters 19 | Name| Type| Mandatory| Default Value| Description| 20 | -------- | -------- | -------- | -------- | -------- | 21 | start | Date | No| Date('1970-1-1') | Start date of the picker.| 22 | end | Date | No| Date('2100-12-31') | End date of the picker.| 23 | selected | Date | No| Current system date| Date of the selected item.| 24 | lunar | boolean | No| false | Whether to display the lunar calendar.| 25 | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Triggered when the OK button in the dialog box is clicked.| 26 | onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.| 27 | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.| 28 29## Example 30 31### Date Picker Sample Code (With Lunar Calendar) 32``` 33@Entry 34@Component 35struct DatePickerDialogExample01 { 36 @State isLunar: boolean = true 37 selectedDate: Date = new Date("2000-1-1") 38 39 build() { 40 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, 41 justifyContent: FlexAlign.Center }) { 42 Button("DatePickerDialog").onClick(() => { 43 DatePickerDialog.show({ 44 start: new Date("2000-1-1"), 45 end: new Date("2005-1-1"), 46 selected: this.selectedDate, 47 lunar: this.isLunar, 48 onAccept: (value: DatePickerResult) => { 49 this.selectedDate.setFullYear(value.year, value.month, value.day) 50 console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) 51 }, 52 onCancel: () => { 53 console.info("DatePickerDialog:onCancel()") 54 }, 55 onChange: (value: DatePickerResult) => { 56 console.info("DatePickerDialog:onChange()" + JSON.stringify(value)) 57 } 58 }) 59 }) 60 } 61 } 62} 63``` 64### Date Picker Sample Code (No Lunar Calendar) 65``` 66@Entry 67@Component 68struct DatePickerDialogExample02 { 69 @State isLunar: boolean = false 70 selectedDate: Date = new Date("2000-1-1") 71 72 build() { 73 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, 74 justifyContent: FlexAlign.Center }) { 75 Button("DatePickerDialog").onClick(() => { 76 DatePickerDialog.show({ 77 start: new Date("2000-1-1"), 78 end: new Date("2005-1-1"), 79 selected: this.selectedDate, 80 lunar: this.isLunar, 81 onAccept: (value: DatePickerResult) => { 82 this.selectedDate.setFullYear(value.year, value.month, value.day) 83 console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) 84 }, 85 onCancel: () => { 86 console.info("DatePickerDialog:onCancel()") 87 }, 88 onChange: (value: DatePickerResult) => { 89 console.info("DatePickerDialog:onChange()" + JSON.stringify(value)) 90 } 91 }) 92 }) 93 } 94 } 95} 96``` 97
