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