From e8ca455dcff19843edd51be3ca53fd4c6d7eb21d Mon Sep 17 00:00:00 2001 From: Mourad Aouinat Date: Wed, 26 Nov 2025 21:54:58 +0100 Subject: [PATCH 1/5] chore: add docs for time formats --- .../components/img/textInput24HourFormat.png | Bin 0 -> 6165 bytes .../components/img/textInput_am_pm.png | Bin 0 -> 16080 bytes .../pageLoaders/components/textinput.md | 298 ++++++++++-------- 3 files changed, 163 insertions(+), 135 deletions(-) create mode 100644 versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png create mode 100644 versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput_am_pm.png diff --git a/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png b/versioned_docs/version-21/4DQodlyPro/pageLoaders/components/img/textInput24HourFormat.png new file mode 100644 index 0000000000000000000000000000000000000000..9aaf53ecf88a8e3252d6f17a2a53356c2a9ea963 GIT binary patch literal 6165 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 - -
    -
  • Label Position: Developers can tailor the label's position, placing it above, below, to the left, to the right, or even hidden.
    • -
- - - - - + +
    +
  • Label Position: Developers can tailor the label's position, placing it above, below, to the left, to the right, or even hidden.
    • +
+ + + + + ### Embedded Label Within the **Text Input** component, an embedded **Label** allows for further customization of the following properties: - -
    -
  • Label: Personalize the label to offer clear instructions or guidance.
    • -
- - - - + + +
    +
  • Label: Personalize the label to offer clear instructions or guidance.
    • +
+ + + + ### Embedded Input @@ -65,15 +62,16 @@ Within the **Text Input** component, an embedded **Label** allows for further cu Within the **Text Input** component, an embedded **Input** allows for further customization of the following properties: - -
    -
  • Placeholder: Set a placeholder to provide users with a hint or example of the expected input. This text appears within the input field and disappears as soon as users begin typing.
    • -
  • Input Type: Select the appropriate input type to match the nature of the expected data. Available types include:
    • -
- - - - + + +
    +
  • Placeholder: Set a placeholder to provide users with a hint or example of the expected input. This text appears within the input field and disappears as soon as users begin typing.
    • +
  • Input Type: Select the appropriate input type to match the nature of the expected data. Available types include:
    • +
+ + + +
    @@ -133,7 +131,7 @@ Within the **Text Input** component, an embedded **Input** allows for further cu However, when the "Reveal Password" toggle is disabled, the password remains hidden, and the tooltip functionality is not available. ::: - :::tip + :::tip #### Direction Option for the Reveal Password Icon: @@ -152,11 +150,11 @@ Within the **Text Input** component, an embedded **Input** allows for further cu - :::tip + :::tip #### Week Start Customization in Date Picker: Week Starts defines which day should be considered the start of the week in the date picker. You can select a starting day such as Monday, Sunday, or any other day depending on your region or application needs. ::: - :::tip + :::tip #### Intervals for Date Input: The Intervals feature allows users to control date selection by either linking a datasource or manually defining intervals:
      @@ -172,7 +170,7 @@ Within the **Text Input** component, an embedded **Input** allows for further cu #### Include Checkbox (within the card): - The options displayed in the interval form will change based on the selected type—except for one field that remains constant across all types: the Include checkbox. This checkbox lets you define whether that specific interval should include or exclude the selected date range. + The options displayed in the interval form will change based on the selected type—except for one field that remains constant across all types: the Include checkbox. This checkbox lets you define whether that specific interval should include or exclude the selected date range. @@ -190,9 +188,9 @@ Within the **Text Input** component, an embedded **Input** allows for further cu
      -
    • Alternatively, you can bind an external datasource (structured as a collection of objects with specific properties defining the filtering rules) to dynamically fetch intervals.
      • +
    • Alternatively, you can bind an external datasource (structured as a collection of objects with specific properties defining the filtering rules) to dynamically fetch intervals.

      • - #### **Interval Datasource Schema** + #### **Interval Datasource Schema** | **Property** | **Type** | **Description** | |-------------|---------|----------------| @@ -201,7 +199,7 @@ Within the **Text Input** component, an embedded **Input** allows for further cu | `params` | `Object` | Contains details about the interval, such as specific dates or recurring patterns. | | `active` | `Boolean` | Whether the interval is active. Defaults to true. If false, the interval is ignored. This behaves exactly like the Card Toggle in the UI, which enables or disables the interval block without removing your settings. |
      - #### **`params` Object Properties** + #### **`params` Object Properties** | **Interval Type** | **Parameters** | **Example JSON Format** | |------------------|--------------|--------------------------| | **Starting From** | - `from` (`String`): Start date.

      - `today` (`Boolean`): Uses today's date if `true`. | ``` [{ "include": true, "type": "startingFrom", "params": { "from": "2025-02-08" } }] ```

      ``` [{ "include": true, "type": "startingFrom", "params": { "today": true } }] ``` | @@ -210,7 +208,7 @@ Within the **Text Input** component, an embedded **Input** allows for further cu | **Days** | - `days` (`Array`): Defines allowed weekdays. | ``` [{ "include": true, "type": "days", "params": { "days": [ { "label": "Monday", "value": "monday" } ] } }] ``` |

    - Once an interval datasource is added, manual interval addition is disabled. To re-enable manual intervals, remove the datasource first. + Once an interval datasource is added, manual interval addition is disabled. To re-enable manual intervals, remove the datasource first. ::: @@ -220,6 +218,28 @@ Within the **Text Input** component, an embedded **Input** allows for further cu + :::tip + +- Time Format + +You can choose how the time picker displays and collects time values. + + + +24 Hour Format +When this option is enabled, the time picker switches to the 24 hour clock. Hours range from 0 to 23 and there is no AM or PM selection. + +12 Hour Format +When this option is disabled, the time picker uses the 12 hour clock. You select the hour, the minutes, and whether the time is AM or PM. + + + +This gives users the flexibility to work with the time format they are most familiar with, whether it is the standard 12 hour clock or the more technical 24 hour clock + + ::: + + +
  • duration: Limits input to duration values with a widget, enabling scrolling, manual entry, or using the + and - icons.
    • @@ -229,12 +249,13 @@ Within the **Text Input** component, an embedded **Input** allows for further cu
+
- **Input Format**: Specify the desired format for the entered data.
-See Formats for a description of available formats. + See Formats for a description of available formats.
@@ -246,30 +267,31 @@ See Formats for a description of The **Text Input** component allows for seamless integration of Qodly Sources, enabling dynamic data binding and interaction within the Page. -:::info +:::info The qodlysource for the **Text Input** component should be of type `text`, `number`, `date`, or `duration`. ::: ### Data Binding + To associate data with the Text Input component, follow these steps: 1. **Navigate to the Properties Panel**: Access the Data Access category located within the Properties panel for the Text Input component. - -
    -
  1. Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Text Input or retrieve from user input. This can be an attribute from an entity, an array, or a direct qodlysource of type text. For instance, you can select an entity, such as package.
    2. -
- - - - + + +
    +
  1. Define the Qodly Source: Specify the appropriate qodlysource that contains the data you want to display within the Text Input or retrieve from user input. This can be an attribute from an entity, an array, or a direct qodlysource of type text. For instance, you can select an entity, such as package.
    2. +
+ + + + - 3. **Choose the Attribute**: Choose the specific attribute that you want to display within the component when using an entity or an array type qodlysource, such as package.name. -:::tip +:::tip Alternatively, you can establish the connection by dragging and dropping the qodlysource onto the Text Input component. ::: @@ -277,23 +299,22 @@ Alternatively, you can establish the connection by dragging and dropping the qod Retrieving user input data is equally effortless. By binding a Qodly Source to the **Text Input** component, you can access and employ user-entered content. - - - Imagine a search input where users type to find packages. Binding a qodlysource captures the input. - - - - + +Imagine a search input where users type to find packages. Binding a qodlysource captures the input. + + + + - - Consequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values. - - - - + +Consequently, you can utilize this input value in various ways, such as within a standard action to initiate a search with matching attribute values. + + + + ## Customizing Text Input Styles @@ -304,18 +325,18 @@ The **Text Input** component consists of embedded elements that can be styled in The following HTML tags make up the structure of the **Text Input** component. Each tag can be individually styled to adjust its appearance and interaction. -| **Tag Name** | **Applies To** | **Description** | -|--------------|-----------------------------|----------------------------------------------------------------------------------------------------------------------------| +| **Tag Name** | **Applies To** | **Description** | +| ------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `