!2035 DatePicker拆分为DatePicker和TimePicker开发者文档

Merge pull request !2035 from Yao.inhome/yangbo_picker_0314

!2035 DatePicker拆分为DatePicker和TimePicker开发者文档
Merge pull request !2035 from Yao.inhome/yangbo_picker_0314
a7cf4d28 · openharmony_ci · Gitee · e34a463d · 5c3c631c · a7cf4d28
5 changed file
--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
@@ -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)
 - 附录

--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
@@ -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/>-&nbsp;true：展示农历。<br/>-&nbsp;false：不展示农历。 | 
-| useMilitaryTime | boolean | false | 展示时间是否为24小时制，不支持动态修改。 | 


 ## 事件

 | 名称 | 功能描述 | 
 | -------- | -------- | 
-| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期或时间时触发该事件。 | 
+| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;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('2200-1-1'),
+        end: new Date('2100-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('2200-1-1'),
+        end: new Date('2100-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)
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
+# 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:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;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)
--- 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
-# 日期时间滑动选择器弹窗
+# 日期滑动选择器弹窗

 > ![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?: DatePickerDialogOptions)

-定义日期时间滑动选择器弹窗并弹出。
+定义日期滑动选择器弹窗并弹出。

- 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) => {
+            this.selectedDate.setFullYear(value.year, value.month, value.day)
            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: () => {
@@ -77,8 +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() {
@@ -89,97 +78,10 @@ struct DatePickerDialogExample02 {
          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) => {
+            this.selectedDate.setFullYear(value.year, value.month, value.day)
            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: () => {

--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+# 时间滑动选择器弹窗
+
+> ![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))
+          }
+        })
+      })
+    }
+  }
+}
+```