!23745 翻译完成 23424+21135：刷新ImageBitmap+新增日历选择器组件文档

Merge pull request !23745 from ester.zhou/TR-23424

en/application-dev/reference/arkui-ts/ts-basic-components-calendarpicker.md

+# CalendarPicker
+
+The **\<CalendarPicker>** 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.<br>- **alignType**: alignment type.<br>Default value: **CalendarAlign.END**<br>- **offset**: offset of the picker relative to the entry component after alignment based on the specified alignment type.<br>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.<br>**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.<br>Default value: The background is a circle.<br>**NOTE**<br>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.<br>Default value: current system date<br>|
+
+## 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)

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.<br>**NOTE**<br>ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.|
+| src    | string   | Yes  | -      | Image source. Local images are supported.<br>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.<br>2. Supported image formats: bmp, jpg, png, svg, and webp.<br>**NOTE**<br>ArkTS widgets do not support the strings with the **http://**, **datashare://**, or **file://data/storage**.|
 
 
 

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. 

en/application-dev/reference/arkui-ts/ts-methods-calendarpicker-dialog.md

+# 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.<br>Default value: The background is a circle.<br>**NOTE**<br>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.<br>**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.<br>**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)