Updated on 2025-02-25 GMT+08:00

Date Selector

This section describes the parameters for a date selector.

Style

  • Size/Position
    • W: width of the target, in pixels.
    • H: height of the target, in pixels.
    • X: position of the target on the canvas, in pixels.
    • Y: position of the target on the canvas, in pixels.
    • Opacity: Adjust the transparency of the target on the canvas using a slider or by manually entering a percentage. A higher percentage means lower transparency.
    Figure 1 Size/Position
  • Global Style
    • Background Color: custom background color of the date selector.
    • Border Color: custom border color of the date selector.
    • Style: border type, including solid line, dotted line, and hyphen.
    • Width: border width.
    • Rounded Corner: rounded corner of the border.
    • Font Size: font size of the progress bar.
    • Color: font color of the progress bar.
    • Formatting: date format.

Interactions

  • Interaction Definition
    1. Choose Interactions > Interaction Definition > Edit interaction event. The interaction editing page is displayed.
      Figure 2 Edit interaction
    2. Set Event to Click.
    3. Click Add Action to add an action. Actions can be changed between hidden and visible states, with different action values displayed depending on the selected widget.
    4. Click OK to complete the setting of the interaction event.
      • Data filtering operators are categorized by string, number, and date types.
        • String operators support exact matches, inequalities, inclusions, exclusions, prefixes, suffixes, and checks for emptiness.
        • Number operators allow for equality, inequality, range comparisons, and checks for emptiness.
        • Date operators support equality and range comparisons.
      • Interactions support the use of SQL placeholders to bind datasets dynamically.
        • To enable global parameter effects, edit the SQL statements within the associated dataset and add dynamic parameters.
        • Go to the component editing page and click Interactions to set related parameters.
  • Control Variables
    1. Click Interactions. Expand Control Variables and click Add Variable.
      Figure 3 Add Variable
    2. Select the event, field value, and variable name, and click Save.