diff --git a/en/application-dev/reference/arkui-ts/figures/CalendarPicker.gif b/en/application-dev/reference/arkui-ts/figures/CalendarPicker.gif new file mode 100644 index 0000000000000000000000000000000000000000..02e28b67a4d68c4aa1c7b6d86ad50350cf85c1f2 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/CalendarPicker.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/CalendarPickerDialog.gif b/en/application-dev/reference/arkui-ts/figures/CalendarPickerDialog.gif new file mode 100644 index 0000000000000000000000000000000000000000..c78888b991edc423f3b4d039452ef93e5e81f624 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/CalendarPickerDialog.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-calendarpicker.md b/en/application-dev/reference/arkui-ts/ts-basic-components-calendarpicker.md new file mode 100644 index 0000000000000000000000000000000000000000..d1442743b6b597ea189f9130a5dfcfa319995c4d --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-calendarpicker.md @@ -0,0 +1,76 @@ +# CalendarPicker + +The **\** component provides a drop-down calendar for users to select a date. + +> **NOTE** +> +> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. + + +## Child Components + +Not supported + +## APIs + +CalendarPicker(options?: CalendarOptions) + +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| ----------- | ----------- | --------------------------------- | +| edgeAlign | alignType: [CalendarAlign](#calendaralign), offset?: [Offset](ts-types.md#offset) | How the picker is aligned with the entry component.
- **alignType**: alignment type.
Default value: **CalendarAlign.END**
- **offset**: offset of the picker relative to the entry component after alignment based on the specified alignment type.
Default value: **{dx: 0, dy: 0}.**| +| textStyle | [PickerTextStyle](./ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width in the entry area. | +## Events + +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. + +| Name | Description | +| ----------------------------------------- | ---------------------- | +| onChange(callback: (value: Date) => void) | Triggered when a date is selected.
**value**: selected date value| + +## CalendarOptions + +| Name | Type | Mandatory | Description | +| ----------- | ---------- | ------| --------------------------------- | +| hintRadius | number \| [Resource](ts-types.md#resource) | No | Style of the background of the selected state.
Default value: The background is a circle.
**NOTE**
If the value is **0**, the background is a rectangle with square corners. If the value is in the 0–16 range, the background is a rectangle with rounded corners. If the value is equal to or greater than 16, the background is a circle.| +| selected | Date | No | Date of the selected item.
Default value: current system date
| + +## CalendarAlign + +Since API version 9, this API is supported in ArkTS widgets. + +| Name | Description | +| ------ | ------------------------ | +| START | The picker is left aligned with the entry component. | +| CENTER | The picker is center aligned with the entry component.| +| END | The picker is right aligned with the entry component. | + +## Example + +```ts +// xxx.ets +@Entry +@Component +struct CalendarPickerExample { + private selectedDate: Date = new Date() + build() { + Column() { + Text('Calendar date picker').fontSize(30) + Column() { + CalendarPicker({ hintRadius: 10, selected: this.selectedDate }) + .edgeAlign(CalendarAlign.END) + .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } }) + .margin(10) + .onChange((value) => { + console.info("CalendarPicker onChange:" + JSON.stringify(value)) + }) + }.alignItems(HorizontalAlign.End).width("100%") + }.width('100%').margin({top:350}) + } +} +``` + +![CalendarPicker](figures/CalendarPicker.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index 17f50a55fbd800dd08334a9f5d259b15c56ed8f0..157efe71d3705f31b66d8d5113f6ba233e451ee1 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -16,7 +16,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Default Value| Description | | ------ | -------- | ---- | ------ | ------------------------------------------------------------ | -| src | string | Yes | - | Image source.
**NOTE**
ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.| +| src | string | Yes | - | Image source. Local images are supported.
1. The string format is used to load local images, for example, ImageBitmap("common/images/example.jpg"). The start point of the image loading path is the ets folder.
2. Supported image formats: bmp, jpg, png, svg, and webp.
**NOTE**
ArkTS widgets do not support the strings with the **http://**, **datashare://**, or **file://data/storage**.| diff --git a/en/application-dev/reference/arkui-ts/ts-components-summary.md b/en/application-dev/reference/arkui-ts/ts-components-summary.md index 110692465f554d40fb00f5d2ab2068205d4068fa..536ea80ccc022ac0453b815698743a6f1562316a 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-summary.md +++ b/en/application-dev/reference/arkui-ts/ts-components-summary.md @@ -119,6 +119,9 @@ - [CheckboxGroup](ts-basic-components-checkboxgroup.md) A component that is used to select or deselect all check boxes in a group. +- [CalendarPicker](ts-basic-components-calendarpicker.md) + + A component that provides a drop-down calendar for users to select a date. - [DatePicker](ts-basic-components-datepicker.md) A component that allows users to select a date from the given range. @@ -323,4 +326,4 @@ - [UIExtensionComponent](ts-container-ui-extension-component.md) - A component that is used to embed UIs provided by other applications in the local application UI. + A component that is used to embed UIs provided by other applications in the local application UI. diff --git a/en/application-dev/reference/arkui-ts/ts-methods-calendarpicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-calendarpicker-dialog.md new file mode 100644 index 0000000000000000000000000000000000000000..cd82fb92a62f1c3494ce88816b9e01e111fab432 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-methods-calendarpicker-dialog.md @@ -0,0 +1,59 @@ +# Calendar Picker Dialog Box + +A calendar picker dialog box is a dialog box that allows users to select a date from a calendar picker. + +> **NOTE** +> +> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. +> +> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext). + +## CalendarPickerDialog.show + +show(options?: [CalendarDialogOptions](#calendardialogoptions)) + +Shows a calendar picker dialog box. + +## CalendarDialogOptions + +| Name | Type | Mandatory| Description | +| ---------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | +| selected | Date | No | Selected date. Default value: current system date | +| hintRadius | number \|[Resource](ts-types.md#resource) | No | Style of the background of the selected state.
Default value: The background is a circle.
**NOTE**
If the value is **0**, the background is a rectangle with square corners. If the value is in the 0–16 range, the background is a rectangle with rounded corners. If the value is equal to or greater than 16, the background is a circle.| +| onAccept | (value: Date) => void | No | Triggered when the OK button in the dialog box is clicked.
**value**: selected date value| +| onCancel | () => void | No | Triggered when the Cancel button in the dialog box is clicked. | +| onChange | (value: Date) => void | No | Triggered when the selection in the picker changes the selected date.
**value**: selected date value| + +## Example + +```ts +// xxx.ets +@Entry +@Component +struct CalendarPickerDialogExample { + private selectedDate: Date = new Date() + build() { + Column() { + Button("Show CalendarPicker Dialog") + .margin(20) + .onClick(() => { + console.info("CalendarDialog.show") + CalendarPickerDialog.show({ + selected: this.selectedDate, + onAccept: (value) => { + console.info("calendar onAccept:" + JSON.stringify(value)) + }, + onCancel: () => { + console.info("calendar onCancel") + }, + onChange: (value) => { + console.info("calendar onChange:" + JSON.stringify(value)) + } + }) + }) + }.width('100%') + } +} +``` + +![CalendarPickerDialog](figures/CalendarPickerDialog.gif)