Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
bf464ddc
D
Docs
项目概览
OpenHarmony
/
Docs
12 个月 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
bf464ddc
编写于
2月 25, 2022
作者:
Y
yaoyuchi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add_datepicker-dialog_docs and textpicker-dialog_docs
Signed-off-by:
N
yaoyuchi
<
yaoyuchi@huawei.com
>
上级
361662f9
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
263 addition
and
0 deletion
+263
-0
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+2
-0
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
...on-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+196
-0
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
...on-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
+65
-0
未找到文件。
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @
bf464ddc
...
...
@@ -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
0 → 100644
浏览文件 @
bf464ddc
# 日期时间滑动选择器弹窗
> ![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
0 → 100644
浏览文件 @
bf464ddc
# 文本滑动选择器弹窗
> ![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))
}
})
})
}
}
}
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录