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 23| Name | Type| Mandatory| Description | 24| -------- | -------- | ---- | ------------------------------------------------------------ | 25| start | Date | No | Start date of the picker.<br>Default value: **Date('1970-1-1')** | 26| end | Date | No | End date of the picker.<br>Default value: **Date('2100-12-31')** | 27| selected | Date | No | Date of the selected item.<br>Default value: current system date<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 28 29**Handling in the case of exceptions** 30 31| Exception | Result | 32| -------- | ------------------------------------------------------------ | 33| 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. | 34| 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. | 35| 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. | 36| 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.| 37| The selected date is earlier than the start date. | The selected date is set to the start date. | 38| The selected date is later than the end date. | The selected date is set to the end date. | 39| 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. | 40| 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. | 41| The set date is in invalid format, for example, **'1999-13-32'**. | The default value is used. | 42| 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. | 43| 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. | 44 45The valid date range is from 1900-1-31 to 2100-12-31. 46 47The exception detection and handling with the selected date comes after that with the start date and end date. 48 49## Attributes 50 51In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 52 53| Name | Type | Description | 54| -------------------------------- | --------------------------------------------- | ------------------------------------------------------------ | 55| 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**| 56| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | 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>} | 57| textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | 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>} | 58| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10) | 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>} | 59 60## PickerTextStyle<sup>10+</sup> 61 62| Name | Type | Mandatory | Description | 63| ----- | ---------------------------------------- | ---- | ------------------------- | 64| color | [ResourceColor](ts-types.md#resourcecolor) | No | Font color. | 65| font | [Font](ts-types.md#font) | No | Text style. Only the font size and font width are supported.| 66 67## Events 68 69In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 70 71| Name | Description | 72| ------------------------------------------------------------ | ------------------------------------------------------------ | 73| onChange(callback: (value: DatePickerResult) => void)<sup>(deprecated)</sup> | Triggered when a date is selected.<br>**NOTE**<br>This API is supported since API version 8 and deprecated since API version 10. You are advised to use **onDateChange(callback: (value: Date) => void)** instead.| 74| onDateChange(callback: (value: Date) => void)<sup>10+</sup> | Triggered when a date is selected. | 75 76## DatePickerResult 77 78| Name | Type | Description | 79| ----- | ------ | --------------------------- | 80| year | number | Year of the selected date. | 81| month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and **11** indicates December.| 82| day | number | Day of the selected date. | 83 84 85## Example 86 87 88```ts 89// xxx.ets 90@Entry 91@Component 92struct DatePickerExample { 93 @State isLunar: boolean = false 94 private selectedDate: Date = new Date('2021-08-08') 95 96 build() { 97 Column() { 98 Button('Switch Calendar') 99 .margin({ top: 30, bottom: 30 }) 100 .onClick(() => { 101 this.isLunar = !this.isLunar 102 }) 103 DatePicker({ 104 start: new Date('1970-1-1'), 105 end: new Date('2100-1-1'), 106 selected: this.selectedDate 107 }) 108 .disappearTextStyle({color: Color.Gray, font: {size: '16fp', weight: FontWeight.Bold}}) 109 .textStyle({color: '#ff182431', font: {size: '18fp', weight: FontWeight.Normal}}) 110 .selectedTextStyle({color: '#ff0000FF', font: {size: '26fp', weight: FontWeight.Regular}}) 111 .lunar(this.isLunar) 112 .onDateChange((value: Date) => { 113 this.selectedDate = value 114 console.info('select current date is: ' + value.toString()) 115 }) 116 117 }.width('100%') 118 } 119} 120``` 121 122 123
