1# DatePicker 2 3The **\<DatePicker>** component allows users to select a date from the given range. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) 18 19Creates a date picker in the given date range. 20 21**Parameters** 22| Name| Type| Mandatory | Description| 23| -------- | -------- | ------------- | -------- | 24| start | Date | No | Start date of the picker.<br>Default value: **Date('1970-1-1')**| 25| end | Date | No | End date of the picker.<br>Default value: **Date('2100-12-31')**| 26| selected | Date | No | Date of the selected item.<br>Default value: current system date | 27 28 29## Attributes 30 31| Name | Type | Description | 32| ------| -------------- | -------- | 33| lunar | boolean | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**| 34 35 36## Events 37 38| Name| Description| 39| -------- | -------- | 40| onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.| 41 42## DatePickerResult 43 44| Name| Type| Description| 45| -------- | -------- | -------- | 46| year | number | Year of the selected date.| 47| month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and **11** indicates December.| 48| day | number | Day of the selected date.| 49 50 51## Example 52 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct DatePickerExample { 59 @State isLunar: boolean = false 60 private selectedDate: Date = new Date('2021-08-08') 61 62 build() { 63 Column() { 64 Button('Switch Calendar') 65 .margin({ top: 30 }) 66 .onClick(() => { 67 this.isLunar = !this.isLunar 68 }) 69 DatePicker({ 70 start: new Date('1970-1-1'), 71 end: new Date('2100-1-1'), 72 selected: this.selectedDate 73 }) 74 .lunar(this.isLunar) 75 .onChange((value: DatePickerResult) => { 76 this.selectedDate.setFullYear(value.year, value.month, value.day) 77 console.info('select current date is: ' + JSON.stringify(value)) 78 }) 79 80 }.width('100%') 81 } 82} 83``` 84 85 86
