Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
a7cf4d28
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
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看板
未验证
提交
a7cf4d28
编写于
3月 16, 2022
作者:
O
openharmony_ci
提交者:
Gitee
3月 16, 2022
浏览文件
操作
浏览文件
下载
差异文件
!2035 DatePicker拆分为DatePicker和TimePicker开发者文档
Merge pull request !2035 from Yao.inhome/yangbo_picker_0314
上级
e34a463d
5c3c631c
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
188 addition
and
160 deletion
+188
-160
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+3
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
...-dev/reference/arkui-ts/ts-basic-components-datepicker.md
+12
-51
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
...-dev/reference/arkui-ts/ts-basic-components-timepicker.md
+77
-0
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
...on-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+10
-108
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
...on-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+86
-0
未找到文件。
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @
a7cf4d28
...
...
@@ -70,6 +70,7 @@
-
[
TextInput
](
ts-basic-components-textinput.md
)
-
[
TextPicker
](
ts-basic-components-textpicker.md
)
-
[
TextTimer
](
ts-basic-components-texttimer.md
)
-
[
TimePicker
](
ts-basic-components-timepicker.md
)
-
[
Toggle
](
ts-basic-components-toggle.md
)
-
[
TextClock
](
ts-basic-components-textclock.md
)
-
[
Web
](
ts-basic-components-web.md
)
...
...
@@ -135,7 +136,8 @@
-
[
警告弹窗
](
ts-methods-alert-dialog-box.md
)
-
[
列表选择弹窗
](
ts-methods-action-sheet.md
)
-
[
自定义弹窗
](
ts-methods-custom-dialog-box.md
)
-
[
日期时间选择弹窗
](
ts-methods-datepicker-dialog.md
)
-
[
日期选择弹窗
](
ts-methods-datepicker-dialog.md
)
-
[
时间选择弹窗
](
ts-methods-timepicker-dialog.md
)
-
[
文本选择弹窗
](
ts-methods-textpicker-dialog.md
)
-
[
菜单
](
ts-methods-menu.md
)
-
附录
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @
a7cf4d28
...
...
@@ -4,7 +4,7 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
选择日期
和时间
的滑动选择器组件。
选择日期的滑动选择器组件。
## 权限列表
...
...
@@ -19,23 +19,16 @@
## 接口
DatePicker(
value:{start?: Date, end?: Date, selected?: Date, type?: DatePickerType}
)
DatePicker(
options?: DatePickerOptions
)
根据指定范围的Date创建可以选择
时间或者
日期的滑动选择器。
根据指定范围的Date创建可以选择日期的滑动选择器。
-
参数
-
options
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
| end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
| selected | Date | 否 | 当前系统日期或时间 | 当type为DatePickerType.Date时,设置选中项的日期,当type为DatePickerType.Time时,设置选中项的时间。 |
| type | DatePickerType | 否 | DatePickerType.Date | 指定选择器的类型,包括日期选择器和时间选择器,缺省使用日期选择器。 |
-
DatePickerType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Date | 日期选择器。 |
| Time | 时间选择器。 |
| selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
## 属性
...
...
@@ -43,23 +36,20 @@ DatePicker(value:{start?: Date, end?: Date, selected?: Date, type?: DatePickerTy
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| lunar | boolean | false | 日期是否显示农历。
<br/>
-
true:展示农历。
<br/>
-
false:不展示农历。 |
| useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:
(value:
DatePickerResult)
=
>
void) | 选择日期
或时间
时触发该事件。 |
| onChange(callback:
(value:
DatePickerResult)
=
>
void) | 选择日期时触发该事件。 |
-
DatePickerResult对象说明
###
DatePickerResult对象说明
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| year | number | 选中日期的年(type为DatePickerType.Date)。 |
| month | number | 选中日期的月(type为DatePickerType.Date)。 |
| day | number | 选中日期的日(type为DatePickerType.Date)。 |
| hour | number | 选中时间的时(type为DatePickerType.Time)。 |
| minute | number | 选中时间的分(type为DatePickerType.Time)。 |
| year | number | 选中日期的年。 |
| month | number | 选中日期的月。 |
| day | number | 选中日期的日。 |
## 示例
...
...
@@ -77,9 +67,8 @@ struct DatePickerExample01 {
Column() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2
2
00-1-1'),
end: new Date('2
1
00-1-1'),
selected: this.selectedDate,
type: DatePickerType.Date
})
.lunar(true)
.onChange((date: DatePickerResult) => {
...
...
@@ -105,9 +94,8 @@ struct DatePickerExample02 {
Column() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2
2
00-1-1'),
end: new Date('2
1
00-1-1'),
selected: this.selectedDate,
type: DatePickerType.Date
})
.lunar(false)
.onChange((date: DatePickerResult) => {
...
...
@@ -120,30 +108,3 @@ struct DatePickerExample02 {
![
zh-cn_image_0000001251092975
](
figures/zh-cn_image_0000001251092975.gif
)
### 时间选择器
```
@Entry
@Component
struct DatePickerExample03 {
private selectedTime: Date = new Date('2021-9-29 08:00:00')
build() {
Column() {
DatePicker({
start: new Date('00:00:00'),
end: new Date('23:59:59'),
selected: this.selectedTime,
type: DatePickerType.Time
})
.useMilitaryTime(true)
.onChange((date: DatePickerResult) => {
console.info('select current date is: ' + JSON.stringify(date))
})
}.width('100%')
}
}
```
![
zh-cn_image_0000001251292933
](
figures/zh-cn_image_0000001251292933.gif
)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
0 → 100644
浏览文件 @
a7cf4d28
# TimePicker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
选择时间的滑动选择器组件。
## 权限列表
无
## 子组件
无
## 接口
TimePicker(options?: TimePickerOptions)
默认以00:00至23:59的时间区间创建滑动选择器。
-
options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:
(value:
TimePickerResult )
=
>
void) | 选择时间时触发该事件。 |
### TimePickerResult对象说明
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| hour | number | 选中时间的时。 |
| minute | number | 选中时间的分。 |
## 示例
### 时间选择器
```
@Entry
@Component
struct TimePickerExample {
private selectedTime: Date = new Date('08-00')
build() {
Column() {
TimePicker({
selected: this.selectedTime,
})
.useMilitaryTime(true)
.onChange((date: TimePickerResult) => {
console.info('select current date is: ' + JSON.stringify(date))
})
}.width('100%')
}
}
```
![
zh-cn_image_0000001251292933
](
figures/zh-cn_image_0000001251292933.gif
)
zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
浏览文件 @
a7cf4d28
# 日期
时间
滑动选择器弹窗
# 日期滑动选择器弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
根据指定范围的Date创建可以选择
时间或者
日期的滑动选择器,展示在弹窗上。
根据指定范围的Date创建可以选择日期的滑动选择器,展示在弹窗上。
## 权限列表
...
...
@@ -11,22 +11,20 @@
## DatePickerDialog.show
show(options?: DatePickerDialogOption)
show(options?: DatePickerDialogOption
s
)
定义日期
时间
滑动选择器弹窗并弹出。
定义日期滑动选择器弹窗并弹出。
-
DatePickerDialogOption
参数
-
options
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| 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 | 指定选择器的类型,包括日期选择器和时间选择器,缺省使用日期选择器。 |
| selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
| lunar | boolean | 否 | false | 日期是否显示农历。 |
| useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 |
| onAccept | (value:
[
DatePickerResult
](
ts-basic-components-datepicker.md
)
) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onAccept | (value:
[
DatePickerResult
](
ts-basic-components-datepicker.md#DatePickerResult对象说明
)
) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
| onChange | (value:
[
DatePickerResult
](
ts-basic-components-datepicker.md
)
) => void | 否 | - | 滑动选择器,当前选择项改变时触发。 |
| onChange | (value:
[
DatePickerResult
](
ts-basic-components-datepicker.md
#DatePickerResult对象说明
)
) => void | 否 | - | 滑动选择器,当前选择项改变时触发。 |
## 示例
...
...
@@ -36,8 +34,6 @@ show(options?: DatePickerDialogOption)
@Component
struct DatePickerDialogExample01 {
@State isLunar: boolean = true
@State isUseMilitaryTime: boolean = false
@State datePickerType: DatePickerType = DatePickerType.Date
selectedDate: Date = new Date("2000-1-1")
build() {
...
...
@@ -48,15 +44,10 @@ struct DatePickerDialogExample01 {
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)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
}
},
onCancel: () => {
...
...
@@ -77,49 +68,6 @@ struct DatePickerDialogExample01 {
@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() {
...
...
@@ -130,56 +78,10 @@ struct DatePickerDialogExample03 {
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: () => {
...
...
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
0 → 100644
浏览文件 @
a7cf4d28
# 时间滑动选择器弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
默认以00:00至23:59的时间区间创建滑动选择器,展示在弹窗上。
## 权限列表
无
## TimePickerDialog.show
show(options?: TimePickerDialogOptions)
定义时间滑动选择器弹窗并弹出。
-
options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
| useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 |
| onAccept | (value:
[
TimePickerResult
](
ts-basic-components-timepicker.md#TimePickerResult对象说明
)
) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
| onChange | (value:
[
TimePickerResult
](
ts-basic-components-timepicker.md#TimePickerResult对象说明
)
) => void | 否 | - | 滑动选择器,当前选择项改变时触发。 |
## 示例
### 时间滑动选择器(24小时制)示例
```
@Entry
@Component
struct TimePickerDialogExample01 {
@State isUseMilitaryTime: boolean = true
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
Button("TimePickerDialog").onClick(() => {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
}
}
```
### 时间滑动选择器(12小时制)示例
```
@Entry
@Component
struct TimePickerDialogExample02 {
@State isUseMilitaryTime: boolean = false
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
Button("TimePickerDialog").onClick(() => {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
this.selectedDate.setHours(value.hour, value.minute, value.second)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
}
}
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录