!1637 datepicker-dialog and textpicker-dialog 开发者文档

Merge pull request !1637 from Yao.inhome/yangbo_datepicker-dialog_0223

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

@@ -130,5 +130,7 @@
         - [警告弹窗](ts-methods-alert-dialog-box.md)
         - [列表选择弹窗](ts-methods-action-sheet.md)
         - [自定义弹窗](ts-methods-custom-dialog-box.md)
+        - [日期时间选择弹窗](ts-methods-datepicker-dialog.md)
+        - [文本选择弹窗](ts-methods-textpicker-dialog.md)
 - 附录
     - [文档中涉及到的内置枚举值](ts-appendix-enums.md)

zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md

+# 日期时间滑动选择器弹窗
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+根据指定范围的Date创建可以选择时间或者日期的滑动选择器，展示在弹窗上。
+
+## 权限列表
+
+无
+
+## DatePickerDialog.show
+
+show(options?: DatePickerDialogOption)
+
+定义日期时间滑动选择器弹窗并弹出。
+
+- DatePickerDialogOption参数
+  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+  | -------- | -------- | -------- | -------- | -------- |
+  | start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
+  | end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
+  | selected | Date | 否 | 当前系统日期或时间 | 当type为DatePickerType.Date时，设置选中项的日期。当type为DatePickerType.Time时，设置选中项的时间。 |
+  | type | [DatePickerType](ts-basic-components-datepicker.md) | 否 | DatePickerType.Date | 指定选择器的类型，包括日期选择器和时间选择器，缺省使用日期选择器。 |
+  | lunar | boolean | 否 | false | 日期是否显示农历。 |
+  | useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 |
+  | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md)) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
+  | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
+  | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md)) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
+
+## 示例
+
+### 日期滑动选择器（显示农历）示例
+```
+@Entry
+@Component
+struct DatePickerDialogExample01 {
+  @State isLunar: boolean = true
+  @State isUseMilitaryTime: boolean = false
+  @State datePickerType: DatePickerType = DatePickerType.Date
+  selectedDate: Date = new Date("2000-1-1")
+
+  build() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center }) {
+      Button("DatePickerDialog").onClick(() => {
+        DatePickerDialog.show({
+          start: new Date("2000-1-1"),
+          end: new Date("2005-1-1"),
+          selected: this.selectedDate,
+          type: this.datePickerType,
+          lunar: this.isLunar,
+          useMilitaryTime: this.isUseMilitaryTime,
+          onAccept: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
+            if (this.datePickerType == DatePickerType.Date) {
+              this.selectedDate.setFullYear(value.year, value.month, value.day)
+            } else if (this.datePickerType == DatePickerType.Time) {
+              this.selectedDate.setHours(value.hour, value.minute, value.second)
+            }
+          },
+          onCancel: () => {
+            console.info("DatePickerDialog:onCancel()")
+          },
+          onChange: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
+          }
+        })
+      })
+    }
+  }
+}
+```
+### 日期滑动选择器（不显示农历）示例
+```
+@Entry
+@Component
+struct DatePickerDialogExample02 {
+  @State isLunar: boolean = false
+  @State isUseMilitaryTime: boolean = false
+  @State datePickerType: DatePickerType = DatePickerType.Date
+  selectedDate: Date = new Date("2000-1-1")
+
+  build() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center }) {
+      Button("DatePickerDialog").onClick(() => {
+        DatePickerDialog.show({
+          start: new Date("2000-1-1"),
+          end: new Date("2005-1-1"),
+          selected: this.selectedDate,
+          type: this.datePickerType,
+          lunar: this.isLunar,
+          useMilitaryTime: this.isUseMilitaryTime,
+          onAccept: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
+            if (this.datePickerType == DatePickerType.Date) {
+              this.selectedDate.setFullYear(value.year, value.month, value.day)
+            } else if (this.datePickerType == DatePickerType.Time) {
+              this.selectedDate.setHours(value.hour, value.minute, value.second)
+            }
+          },
+          onCancel: () => {
+            console.info("DatePickerDialog:onCancel()")
+          },
+          onChange: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
+          }
+        })
+      })
+    }
+  }
+}
+```
+### 时间滑动选择器（24小时制）示例
+```
+@Entry
+@Component
+struct DatePickerDialogExample03 {
+  @State isLunar: boolean = false
+  @State isUseMilitaryTime: boolean = true
+  @State datePickerType: DatePickerType = DatePickerType.Time
+  selectedDate: Date = new Date("2000-1-1")
+
+  build() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center }) {
+      Button("DatePickerDialog").onClick(() => {
+        DatePickerDialog.show({
+          start: new Date("2000-1-1"),
+          end: new Date("2005-1-1"),
+          selected: this.selectedDate,
+          type: this.datePickerType,
+          lunar: this.isLunar,
+          useMilitaryTime: this.isUseMilitaryTime,
+          onAccept: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
+            if (this.datePickerType == DatePickerType.Date) {
+              this.selectedDate.setFullYear(value.year, value.month, value.day)
+            } else if (this.datePickerType == DatePickerType.Time) {
+              this.selectedDate.setHours(value.hour, value.minute, value.second)
+            }
+          },
+          onCancel: () => {
+            console.info("DatePickerDialog:onCancel()")
+          },
+          onChange: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
+          }
+        })
+      })
+    }
+  }
+}
+```
+### 时间滑动选择器（12小时制）示例
+```
+@Entry
+@Component
+struct DatePickerDialogExample04 {
+  @State isLunar: boolean = false
+  @State isUseMilitaryTime: boolean = false
+  @State datePickerType: DatePickerType = DatePickerType.Time
+  selectedDate: Date = new Date("2000-1-1")
+
+  build() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center }) {
+      Button("DatePickerDialog").onClick(() => {
+        DatePickerDialog.show({
+          start: new Date("2000-1-1"),
+          end: new Date("2005-1-1"),
+          selected: this.selectedDate,
+          type: this.datePickerType,
+          lunar: this.isLunar,
+          useMilitaryTime: this.isUseMilitaryTime,
+          onAccept: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
+            if (this.datePickerType == DatePickerType.Date) {
+              this.selectedDate.setFullYear(value.year, value.month, value.day)
+            } else if (this.datePickerType == DatePickerType.Time) {
+              this.selectedDate.setHours(value.hour, value.minute, value.second)
+            }
+          },
+          onCancel: () => {
+            console.info("DatePickerDialog:onCancel()")
+          },
+          onChange: (value: DatePickerResult) => {
+            console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
+          }
+        })
+      })
+    }
+  }
+}
+```

zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md

+# 文本滑动选择器弹窗
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+根据指定的选择范围创建文本选择器，展示在弹窗上。
+
+## 权限列表
+
+无
+
+## TextPickerDialog.show
+
+show(options: TextPickerDialogOption)
+
+定义文本滑动选择器弹窗并弹出。
+
+- TextPickerDialogOption参数
+  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+  | -------- | -------- | -------- | -------- | -------- |
+  | range | string[] | 是 | - | 选择器的数据选择范围。 |
+  | selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 |
+  | defaultPickerItemHeight | number | 否 | - | 默认Picker内容项元素高度。 |
+  | onAccept | (value: TextPickerResult) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
+  | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
+  | onChange | (value: TextPickerResult) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
+
+- TextPickerResult对象说明
+  | 名称 | 参数类型 | 描述 | 
+  | -------- | -------- | -------- |
+  | value | string | 选中项文本。 | 
+  | index | number | 选中项在数组中的index值。 | 
+
+## 示例
+
+```
+@Entry
+@Component
+struct TextPickerDialogExample {
+  @State select: number = 1
+  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
+
+  build() {
+    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center }) {
+      Button("TextPickerDialog").onClick(() => {
+        TextPickerDialog.show({
+          range: this.fruits,
+          selected: this.select,
+          onAccept: (value: TextPickerResult) => {
+            console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
+            this.select = value.index
+          },
+          onCancel: () => {
+            console.info("TextPickerDialog:onCancel()")
+          },
+          onChange: (value: TextPickerResult) => {
+            console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
+          }
+        })
+      })
+    }
+  }
+}
+```