From bf464ddc78870abb6196f24b295f1f0a096038c7 Mon Sep 17 00:00:00 2001 From: yaoyuchi Date: Fri, 25 Feb 2022 11:12:02 +0800 Subject: [PATCH] add_datepicker-dialog_docs and textpicker-dialog_docs Signed-off-by: yaoyuchi --- .../reference/arkui-ts/Readme-CN.md | 2 + .../arkui-ts/ts-methods-datepicker-dialog.md | 196 ++++++++++++++++++ .../arkui-ts/ts-methods-textpicker-dialog.md | 65 ++++++ 3 files changed, 263 insertions(+) create mode 100644 zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md create mode 100644 zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 1179c54560..4814fa94fb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/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) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md new file mode 100644 index 0000000000..2070b7c782 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md @@ -0,0 +1,196 @@ +# 日期时间滑动选择器弹窗 + +> ![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)) + } + }) + }) + } + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md new file mode 100644 index 0000000000..5e16350f67 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md @@ -0,0 +1,65 @@ +# 文本滑动选择器弹窗 + +> ![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)) + } + }) + }) + } + } +} +``` -- GitLab