1# DatePicker 2 3日期选择器组件，用于根据指定日期范围创建日期滑动选择器。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) 18 19根据指定范围的Date创建可以选择日期的滑动选择器。 20 21**参数:** 22| 参数名 | 参数类型 | 必填 | 参数描述 | 23| -------- | ---- | ---- | -------------------------------------- | 24| start | Date | 否 | 指定选择器的起始日期。<br/>默认值：Date('1970-1-1') | 25| end | Date | 否 | 指定选择器的结束日期。<br/>默认值：Date('2100-12-31') | 26| selected | Date | 否 | 设置选中项的日期。<br/>默认值：当前系统日期 | 27 28## 属性 29 30除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 31 32| 名称 | 参数类型 | 描述 | 33| ----- | ------- | ---------------------------------------- | 34| lunar | boolean | 日期是否显示农历。<br/>- true：展示农历。<br/>- false：不展示农历。<br/>默认值：false | 35 36 37## 事件 38 39除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 40 41| 名称 | 功能描述 | 42| ---------------------------------------- | ----------- | 43| onChange(callback: (value: DatePickerResult) => void) | 选择日期时触发该事件。 | 44 45## DatePickerResult对象说明 46 47| 名称 | 参数类型 | 描述 | 48| ----- | ------ | --------------------------- | 49| year | number | 选中日期的年。 | 50| month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 | 51| day | number | 选中日期的日。 | 52 53 54## 示例 55 56 57```ts 58// xxx.ets 59@Entry 60@Component 61struct DatePickerExample { 62 @State isLunar: boolean = false 63 private selectedDate: Date = new Date('2021-08-08') 64 65 build() { 66 Column() { 67 Button('切换公历农历') 68 .margin({ top: 30 ,bottom: 30}) 69 .onClick(() => { 70 this.isLunar = !this.isLunar 71 }) 72 DatePicker({ 73 start: new Date('1970-1-1'), 74 end: new Date('2100-1-1'), 75 selected: this.selectedDate 76 }) 77 .lunar(this.isLunar) 78 .onChange((value: DatePickerResult) => { 79 this.selectedDate.setFullYear(value.year, value.month, value.day) 80 console.info('select current date is: ' + JSON.stringify(value)) 81 }) 82 83 }.width('100%') 84 } 85} 86``` 87 88
