diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index 5ba70754a095b5cc00d3f317e62b9a9b7cb6471d..1b4f2c165ed231af18e4ad15a9588247fd60d161 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -4,7 +4,7 @@ The **\** component allows users to select a date from the given ran > **NOTE** > -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components @@ -20,33 +20,45 @@ Creates a date picker in the given date range. **Parameters** -| Name| Type| Mandatory | Description| -| -------- | -------- | ------------- | -------- | -| start | Date | No | Start date of the picker.
Default value: **Date('1970-1-1')**| -| end | Date | No | End date of the picker.
Default value: **Date('2100-12-31')**| -| selected | Date | No | Date of the selected item.
Default value: current system date | - +| Name | Type| Mandatory | Description | +| -------- | ---- | ---- | -------------------------------------- | +| start | Date | No | Start date of the picker.
Default value: **Date('1970-1-1')** | +| end | Date | No | End date of the picker.
Default value: **Date('2100-12-31')**| +| selected | Date | No | Date of the selected item.
Default value: current system date | ## Attributes -| Name | Type | Description | -| ------| -------------- | -------- | -| lunar | boolean | Whether to display the lunar calendar.
- **true**: Display the lunar calendar.
- **false**: Do not display the lunar calendar.
Default value: **false**| +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| -------------------------------- | ---------------------------------------- | ---------------------------------------- | +| lunar | boolean | Whether to display the lunar calendar.
- **true**: Display the lunar calendar.
- **false**: Do not display the lunar calendar.
Default value: **false**| +| disappearTextStyle10+ | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width for the top and bottom items. | +| textStyle10+ | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items. | +| selectedTextStyle10+ | [PickerTextStyle](#pickertextstyle10) | Font color, font size, and font width of the selected item. | +## PickerTextStyle10+ + +| Name | Type | Mandatory | Description | +| ----- | ---------------------------------------- | ---- | ------------------------- | +| color | [ResourceColor](ts-types.md#resourcecolor) | No | Font color. | +| font | [Font](ts-types.md#font) | No | Text style. Only the font size and font width are supported.| ## Events -| Name| Description| -| -------- | -------- | +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. + +| Name | Description | +| ---------------------------------------- | ----------- | | onChange(callback: (value: DatePickerResult) => void) | Triggered when a date is selected.| ## DatePickerResult -| Name| Type| Description| -| -------- | -------- | -------- | -| year | number | Year of the selected date.| +| Name | Type | Description | +| ----- | ------ | --------------------------- | +| year | number | Year of the selected date. | | month | number | Month of the selected date. The value ranges from 0 to 11. The value **0** indicates January, and **11** indicates December.| -| day | number | Day of the selected date.| +| day | number | Day of the selected date. | ## Example @@ -63,7 +75,7 @@ struct DatePickerExample { build() { Column() { Button('Switch Calendar') - .margin({ top: 30 }) + .margin({ top: 30, bottom: 30 }) .onClick(() => { this.isLunar = !this.isLunar }) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md index 33a7c78171bc139b35cdb326c91dc9c325f33799..f644f8d30d81df0d011cd05c4f88339edccca5a1 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md @@ -14,7 +14,7 @@ Not supported ## APIs -TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string}) +TextPicker(options?: {range: string[]|Resource|TextPickerRangeContent[], selected?: number, value?: string}) Creates a text picker based on the selection range specified by **range**. @@ -22,15 +22,27 @@ Creates a text picker based on the selection range specified by **range**. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| range | string[] \| [Resource](ts-types.md#resource)| Yes| Data selection range of the picker.| +| range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](#textpickerrangecontent10)[]10+ | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. If it is dynamically changed to an empty array, the current value remains displayed.| | selected | number | No| Index of the default item in the range.
Default value: **0**| -| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.
Default value: value of the first item| +| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.
Default value: value of the first item
**NOTE**\
This parameter works only for a text list. It does not work for an image list or a list consisting of text and images.| + +## TextPickerRangeContent10+ + +| Name| Type | Mandatory| Description | +| ------ | -------------------------------------------------------- | ---- | ---------- | +| icon | string \| [Resource](ts-types.md#resource) | Yes | Image resource.| +| text | string \| [Resource](ts-types.md#resource) | No | Text information.| ## Attributes +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + | Name| Type| Description| | -------- | -------- | -------- | | defaultPickerItemHeight | number \| string | Height of each item in the picker.| +| disappearTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.| +| textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items.| +| selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item.| ## Events @@ -38,7 +50,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi | Name| Description| | -------- | -------- | -| onChange(callback: (value: string, index: number) => void) | Triggered when an item in the picker is selected.
- **value**: value of the selected item.
- **index**: index of the selected item.| +| onChange(callback: (value: string, index: number) => void) | Triggered when an item in the picker is selected.
- **value**: value of the selected item.
**NOTE**
For a text list or a list consisting of text and images, **value** indicates the text value of the selected item. For an image list, **value** is empty.
- **index**: index of the selected item. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md index d8ba7caae7fda819684c2b6ac53133c8bbebbacb..831d427ccc5e558a6119408f105a0277a888323b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md @@ -1,6 +1,6 @@ # TimePicker -The **\** component allows users to select a time from the given range. +The **\** component allows users to select a time (with the hour and minute) from the given range. > **NOTE** > @@ -20,20 +20,25 @@ Creates a time picker, which is in 24-hour format by default. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| selected | Date | No| Time of the selected item.
Default value: current system time| - +| Name | Type| Mandatory | Description | +| -------- | ---- | ---- | ------------------------ | +| selected | Date | No | Time of the selected item.
Default value: current system time| ## Attributes -| Name| Type| Description| -| -------- | -------- | -------- | -| useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.
Default value: **false**| +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. +| Name | Type | Description | +| -------------------------------- | ---------------------------------------- | ----------------------------------- | +| useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.
Default value: **false**| +| disappearTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items. | +| textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items. | +| selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item. | ## Events +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. + | Name | Description | | ---------------------------------------- | ----------- | | onChange(callback: (value: TimePickerResult ) => void) | Triggered when a time is selected.| @@ -48,9 +53,6 @@ Creates a time picker, which is in 24-hour format by default. ## Example - -### Time Picker - ```ts // xxx.ets @Entry diff --git a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md index cdede4871a208b9007ca23842e293d309b1c1481..c1ad40842425ca4cdf7c66635cee70623b1c4509 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md @@ -21,6 +21,11 @@ Shows a date picker dialog box. | end | Date | No| Date('2100-12-31') | End date of the picker.| | selected | Date | No| Current system date| Selected date.| | lunar | boolean | No| false | Whether to display the lunar calendar.| +| showTime10+ | boolean | No| false | Whether to display the time item.| +| useMilitaryTime10+ | boolean | No| false | Whether to display time in 24-hour format.| +| disappearTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width for the top and bottom items.| +| textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of all items except the top, bottom, and selected items.| +| selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| - | Font color, font size, and font width of the selected item.| | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.| | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.| | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes.| diff --git a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md index fed5193d5ea62277bf3ed86f4dfcdb5e18f56299..4da30a11300a3c5e2ab2cf3f622384f207bbf415 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md @@ -17,10 +17,13 @@ Shows a text picker in the given settings. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| range | string[] \| [Resource](ts-types.md#resource) | Yes| Data selection range of the picker.| +| range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](ts-basic-components-textpicker.md#textpickerrangecontent10)[]10+ | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.| | selected | number | No| Index of the selected item.
Default value: **0**| | value | string | No | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.| | defaultPickerItemHeight | number \| string | No| Height of the picker item.| +| disappearTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.| +| textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.| +| selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.| | onAccept | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.| | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.| | onChange | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the selected item changes.| @@ -29,7 +32,7 @@ Shows a text picker in the given settings. | Name| Type| Description| | -------- | -------- | -------- | -| value | string | Text of the selected item.| +| value | string | Text of the selected item.
**NOTE**
For a text list or a list consisting of text and images, **value** indicates the text value of the selected item.
For an image list, **value** is empty.| | index | number | Index of the selected item in the range.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md index 32e6ad27c45532a17222a78b47cdde2c19dcff5b..246beaf9da869b68aa059efe66b7570f042ff205 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -19,6 +19,9 @@ Shows a time picker dialog box. | -------- | -------- | -------- | -------- | | selected | Date | No| Selected time.
Default value: current system time| | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.
Default value: **false**| +| disappearTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width for the top and bottom items.| +| textStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of all items except the top, bottom, and selected items.| +| selectedTextStyle10+ | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| Font color, font size, and font width of the selected item.| | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.| | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.| | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|