Help Center/ Huawei Cloud Astro Canvas/ User Guide/ Widgets/ Sting/ Date Selector
Updated on 2025-03-24 GMT+08:00
View PDF
Share

Date Selector

The date selector is a type of text widget and is used to select date. The date selector consists of a text box and date pop-up box. You can click the text box to select a date.

On the large screen design page, drag the date selector widget from the All > Text area to the blank area of the canvas, as shown in Figure 1.

Figure 1 Date selector widget
Figure 2 Margin style

Card

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.

Figure 3 Date selector card
  • Background
    • Background color: Background color of the widget card.
    • Border: Border of the widget card. Options: no border, full border, and corner border. For full border and corner border, you can set the line type and rounded corners of the outer border of the widget.
    • Style: Image display style. The options are normal, center, stretch, and tiled.
    • Choose image: Use a local image as the widget background. Directories and subdirectories can be added to facilitate image management by category. JPG, JPEG, PNG, or GIF images are recommended. The size of each image cannot exceed 50 MB.
  • Special effect: Widget highlighted status. Displayed by default or on page load.
  • Padding: Distance between the chart and the four sides (top, bottom, left, and right as shown in Figure 2) of the widget. The default value is 0, indicating that the chart stretches to fill the entire widget.

Configuration

You can set the date selector type and text box border font.

Figure 4 Configuration
  • Type of the date selector: Options include year, month, week, and day selectors, multi-date selector, and selector with time.
  • Text box border font settings
    • Text font: Font size and color of the text box.
    • Background color: Background color of the text box.
    • Border color: Border color of the text box.
    • Border focus color: Color of the text box border when selected.
    • Border hover color: Color of the text box border when hovered.
  • Text box content settings
    • Separator for selecting a date range: Generally, a hyphen (-) is used as the separator.
    • Start date placeholder: Text displayed in the start date text box when no date is selected.
    • End date placeholder: Text displayed in the end date text box when no date is selected.
    • Non-date range selection placeholder: Text displayed when no date range is selected.
  • Date dialog box settings
    • Zoom factor: The multiple by which the date selector's placeholder size on the page increases compared to its development status. A greater factor is recommended for better display on large screens.
    • Background color: Background color of the date dialog box.
    • Selected date background color: Background color of the selected date in the date selector dialog.
    • Selected font color: Font color of a selected date in the date selector dialog.
    • Non-current month date color: Color of dates from the previous and next months in the date selector dialog.
    • Background color of the selection range: Background color of the date within the selection range in the date dialog box.
  • Date selector dialog: weekday settings
    • Week background color: Background color of weekdays.
    • Week font color: Font color of weekdays.
    • Time background color: Background color of the time.
    • Time font color: Font color of the time.

Data

In the data settings, you can set the data source of the date selector widget. For more information, see Data Access.

Interaction

In the interaction settings, you can configure interactions between the date selector widget and other widgets or pages. For details, see Interaction Configuration.

Parent topic: Sting