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 40ec43688ceed4f1a2271e6f40b97bba6085eaca..5e6a2f5391219050a68f8e9048466d21c3be798b 100644 --- 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) - 附录 diff --git 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 index 4f3e561e0aa88532bc4d8c2ca8150d571282c49c..816d224d7b30b27abcbb8afeb632cd7e912a4ef6 100644 --- 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 | 日期是否显示农历。
- true：展示农历。
- 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('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) diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..3f61b27fd29a26f52ecea993f17aaad85ab78e82 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md @@ -0,0 +1,77 @@ +# 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) 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 index 2070b7c7820a33550e2f1e131df61b17a6176c3b..5da7866d6ed1e30ad694df28427ccba86e21daec 100644 --- 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 @@ -1,9 +1,9 @@ -# 日期时间滑动选择器弹窗 +# 日期滑动选择器弹窗 > ![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: () => { diff --git 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 new file mode 100644 index 0000000000000000000000000000000000000000..af0f2a254274647d0eb0d2b3d3e5331ec5c1603d --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -0,0 +1,86 @@ +# 时间滑动选择器弹窗 + +> ![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)) + } + }) + }) + } + } +} +```