Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 476b117d 编写于 作者: L luoying_ace 提交者： Gitee
浏览文件
操作

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

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 447919cb
隐藏空白更改
内联 并排
Showing with 48 addition and 62 deletion
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 476b117d
# 时间滑动选择器弹窗 # 时间滑动选择器弹窗
默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。 以24小时的时间区间创建时间滑动选择器，展示在弹窗上。
> **说明：** > **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## TimePickerDialog.show ## TimePickerDialog.show
...@@ -11,79 +12,64 @@ show(options?: TimePickerDialogOptions) ...@@ -11,79 +12,64 @@ show(options?: TimePickerDialogOptions)
定义时间滑动选择器弹窗并弹出。 定义时间滑动选择器弹窗并弹出。
- options参数 - TimePickerDialogOptions参数
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 | | selected | Date | 否 | 设置当前选中的时间。<br/>默认值：当前系统时间 |
| useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。<br/>默认值：false | | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制，默认为12小时制。<br/>默认值：false |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 | | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
| onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 | | onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 | | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中时间改变时触发该回调。 |
## 示例 ## 示例
### 时间滑动选择器（24小时制）示例
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerDialogExample01 { struct TimePickerDialogExample {
@State isUseMilitaryTime: boolean = true; private selectTime: Date = new Date('2020-12-25T08:30:00')
private selectTime: Date = new Date('7/22/2022 12:45:00');
build() { build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, Column() {
justifyContent: FlexAlign.Center }) { Button("TimePickerDialog 12小时制")
Button("TimePickerDialog").onClick(() => { .margin(20)
TimePickerDialog.show({ .onClick(() => {
selected:this.selectTime, TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, selected: this.selectTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
}, this.selectTime.setHours(value.hour, value.minute)
onCancel: () => { console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
console.info("TimePickerDialog:onCancel()"); },
}, onCancel: () => {
onChange: (value: TimePickerResult) => { console.info("TimePickerDialog:onCancel()");
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); },
} onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
}
})
}) })
}) Button("TimePickerDialog 24小时制")
} .margin(20)
} .onClick(() => {
} TimePickerDialog.show({
``` selected: this.selectTime,
![zh-cn_image_0000001118642010](figures/zh-cn_image_0000001118642010.gif) useMilitaryTime: true,
onAccept: (value: TimePickerResult) => {
### 时间滑动选择器（12小时制）示例 this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
```ts },
// xxx.ets onCancel: () => {
@Entry console.info("TimePickerDialog:onCancel()");
@Component },
struct TimePickerDialogExample02 { onChange: (value: TimePickerResult) => {
@State isUseMilitaryTime: boolean = false; console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
}
build() { })
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
Button("TimePickerDialog").onClick(() => {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()");
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
}
}) })
}) }.width('100%')
}
} }
} }
``` ```
\ No newline at end of file
![zh-cn_image_0000001118642020](figures/zh-cn_image_0000001118642020.gif)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或