1# DatePicker 2 3日期选择器组件，用于根据指定日期范围创建日期滑动选择器。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17DatePicker(options?: DatePickerOptions) 18 19根据指定范围的Date创建可以选择日期的滑动选择器。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 描述 | 26| ------- | ----------------------------------------------- | ---- | -------------------------- | 27| options | [DatePickerOptions](#datepickeroptions对象说明) | 否 | 配置日期选择器组件的参数。 | 28 29## DatePickerOptions对象说明 30 31| 名称 | 类型 | 必填 | 说明 | 32| -------- | ---- | ---- | ------------------------------------------------------------ | 33| start | Date | 否 | 指定选择器的起始日期。<br/>默认值：Date('1970-1-1') | 34| end | Date | 否 | 指定选择器的结束日期。<br/>默认值：Date('2100-12-31') | 35| selected | Date | 否 | 设置选中项的日期。<br/>默认值：当前系统日期<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 36 37**异常情形说明:** 38 39| 异常情形 | 对应结果 | 40| -------- | ------------------------------------------------------------ | 41| 起始日期晚于结束日期，选中日期未设置 | 起始日期、结束日期和选中日期都为默认值 | 42| 起始日期晚于结束日期，选中日期早于起始日期默认值 | 起始日期、结束日期都为默认值，选中日期为起始日期默认值 | 43| 起始日期晚于结束日期，选中日期晚于结束日期默认值 | 起始日期、结束日期都为默认值，选中日期为结束日期默认值 | 44| 起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内 | 起始日期、结束日期都为默认值，选中日期为设置的值 | 45| 选中日期早于起始日期 | 选中日期为起始日期 | 46| 选中日期晚于结束日期 | 选中日期为结束日期 | 47| 起始日期晚于当前系统日期，选中日期未设置 | 选中日期为起始日期 | 48| 结束日期早于当前系统日期，选中日期未设置 | 选中日期为结束日期 | 49| 日期格式不符合规范，如‘1999-13-32’ | 取默认值 | 50| 起始日期或结束日期早于系统有效范围 | 起始日期或结束日期取起始日期默认值 | 51| 起始日期或结束日期晚于系统有效范围 | 起始日期或结束日期取结束日期默认值 | 52| 起始日期与结束日期同时早于系统有效范围 | 起始日期与结束日期取系统有效范围最早日期 | 53| 起始日期与结束日期同时晚于系统有效范围 | 起始日期与结束日期取系统有效范围最晚日期 | 54 55系统日期范围：1900-1-31 ~ 2100-12-31 56 57选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理 58 59## 属性 60 61除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 62 63| 名称 | 参数类型 | 描述 | 64| -------------------------------- | --------------------------------------------- | ------------------------------------------------------------ | 65| lunar | boolean | 日期是否显示农历。<br/>- true：展示农历。<br/>- false：不展示农历。<br/>默认值：false | 66| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 67| textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 68| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} | 69 70## PickerTextStyle<sup>10+</sup>类型说明 71 72| 参数名 | 参数类型 | 必填 | 参数描述 | 73| ----- | ---------------------------------------- | ---- | ------------------------- | 74| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文本颜色。 | 75| font | [Font](ts-types.md#font) | 否 | 文本样式，picker只支持字号、字体粗细的设置。 | 76 77## 事件 78 79除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 80 81| 名称 | 功能描述 | 82| ------------------------------------------------------------ | ------------------------------------------------------------ | 83| onChange(callback: (value: DatePickerResult) => void)<sup>(deprecated)</sup> | 选择日期时触发该事件。<br />**说明：**<br />从API version 8 开始支持，从 API version 10 开始废弃，建议使用onDateChange(callback: (value: Date) => void)。 | 84| onDateChange(callback: (value: Date) => void)<sup>10+</sup> | 选择日期时触发该事件。<br/>Date：返回选中的时间，年月日为选中的日期，时分取决于当前系统时间的时分，秒恒为00。| 85 86## DatePickerResult对象说明 87 88| 名称 | 参数类型 | 描述 | 89| ----- | ------ | --------------------------- | 90| year | number | 选中日期的年。 | 91| month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 | 92| day | number | 选中日期的日。 | 93 94 95## 示例 96 97 98```ts 99// xxx.ets 100@Entry 101@Component 102struct DatePickerExample { 103 @State isLunar: boolean = false 104 private selectedDate: Date = new Date('2021-08-08') 105 106 build() { 107 Column() { 108 Button('切换公历农历') 109 .margin({ top: 30, bottom: 30 }) 110 .onClick(() => { 111 this.isLunar = !this.isLunar 112 }) 113 DatePicker({ 114 start: new Date('1970-1-1'), 115 end: new Date('2100-1-1'), 116 selected: this.selectedDate 117 }) 118 .disappearTextStyle({color: Color.Gray, font: {size: '16fp', weight: FontWeight.Bold}}) 119 .textStyle({color: '#ff182431', font: {size: '18fp', weight: FontWeight.Normal}}) 120 .selectedTextStyle({color: '#ff0000FF', font: {size: '26fp', weight: FontWeight.Regular}}) 121 .lunar(this.isLunar) 122 .onDateChange((value: Date) => { 123 this.selectedDate = value 124 console.info('select current date is: ' + value.toString()) 125 }) 126 127 }.width('100%') 128 } 129} 130``` 131 132 133
