1# 日期滑动选择器弹窗 2 3根据指定的日期范围创建日期滑动选择器，展示在弹窗上。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## DatePickerDialog.show 11 12show(options?: DatePickerDialogOptions) 13 14定义日期滑动选择器弹窗并弹出。 15 16**DatePickerDialogOptions参数：** 17 18| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 19| -------- | -------- | -------- | -------- | -------- | 20| start | Date | 否 | Date('1970-1-1') | 设置选择器的起始日期。 | 21| end | Date | 否 | Date('2100-12-31') | 设置选择器的结束日期。 | 22| selected | Date | 否 | 当前系统日期 | 设置当前选中的日期。 | 23| lunar | boolean | 否 | false | 日期是否显示为农历。 |确定 24| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 点击弹窗中的“确定”按钮时触发该回调。 | 25| onCancel | () => void | 否 | - | 点击弹窗中的“取消”按钮时触发该回调。 | 26| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。 | 27 28## 示例 29 30```ts 31// xxx.ets 32@Entry 33@Component 34struct DatePickerDialogExample { 35 selectedDate: Date = new Date("2010-1-1") 36 37 build() { 38 Column() { 39 Button("DatePickerDialog") 40 .margin(20) 41 .onClick(() => { 42 DatePickerDialog.show({ 43 start: new Date("2000-1-1"), 44 end: new Date("2100-12-31"), 45 selected: this.selectedDate, 46 onAccept: (value: DatePickerResult) => { 47 // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期 48 this.selectedDate.setFullYear(value.year, value.month, value.day) 49 console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) 50 }, 51 onCancel: () => { 52 console.info("DatePickerDialog:onCancel()") 53 }, 54 onChange: (value: DatePickerResult) => { 55 console.info("DatePickerDialog:onChange()" + JSON.stringify(value)) 56 } 57 }) 58 }) 59 60 Button("Lunar DatePickerDialog") 61 .margin(20) 62 .onClick(() => { 63 DatePickerDialog.show({ 64 start: new Date("2000-1-1"), 65 end: new Date("2100-12-31"), 66 selected: this.selectedDate, 67 lunar: true, 68 onAccept: (value: DatePickerResult) => { 69 this.selectedDate.setFullYear(value.year, value.month, value.day) 70 console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) 71 }, 72 onCancel: () => { 73 console.info("DatePickerDialog:onCancel()") 74 }, 75 onChange: (value: DatePickerResult) => { 76 console.info("DatePickerDialog:onChange()" + JSON.stringify(value)) 77 } 78 }) 79 }) 80 }.width('100%') 81 } 82} 83``` 84