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 31In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 32 33| Name | Type | Description | 34| ------| -------------- | -------- | 35| 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**| 36 37 38## Events 39 40In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 41 42| Name| Description| 43| -------- | -------- | 44| onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.| 45 46## DatePickerResult 47 48| Name| Type| Description| 49| -------- | -------- | -------- | 50| year | number | Year of the selected date.| 51| month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and **11** indicates December.| 52| day | number | Day of the selected date.| 53 54 55## Example 56 57 58```ts 59// xxx.ets 60@Entry 61@Component 62struct DatePickerExample { 63 @State isLunar: boolean = false 64 private selectedDate: Date = new Date('2021-08-08') 65 66 build() { 67 Column() { 68 Button('Switch Calendar') 69 .margin({ top: 30, bottom: 30 }) 70 .onClick(() => { 71 this.isLunar = !this.isLunar 72 }) 73 DatePicker({ 74 start: new Date('1970-1-1'), 75 end: new Date('2100-1-1'), 76 selected: this.selectedDate 77 }) 78 .lunar(this.isLunar) 79 .onChange((value: DatePickerResult) => { 80 this.selectedDate.setFullYear(value.year, value.month, value.day) 81 console.info('select current date is: ' + JSON.stringify(value)) 82 }) 83 84 }.width('100%') 85 } 86} 87``` 88 89 90
