Date

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Date” control form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name: Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  5. Popup Placement: Here, you define the direction of the date selection popup
  6. Datepicker popup append on root: A property that determines whether the datepicker popup is appended directly to the root element of the DOM. This can help avoid styling or positioning issues caused by parent element constraints.
  7. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

  1. Start Date Type: Here, you define the date type
  2. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
    1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
  3. Default Value: As the name suggests, it defines a default value for a field. This default value can be changed by user input.
  4. Date Format: A property that defines the format in which a date is displayed or entered.

3rd Step – Advance

  1. Design
    1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
    2. Description: Enter extra suggestions for user experience on this field
  2. Others
    1. Enable Time Selection?: Here, you specify if you need to enable the “Time Selection” option
    2. Store Date in UTC: A property that determines whether the datepicker popup is appended directly to the root element of the DOM. This can help avoid styling or positioning issues caused by parent element constraints.
    3. Year configuration: A property that allows customization of how the year selection behaves in a datepicker. It includes options like hiding the year dropdown, choosing the dropdown mode, and defining the number of year items displayed in the dropdown.
      1. Hide Year Dropdown: A property that allows you to hide the year selection dropdown in a datepicker, limiting the user to select only the month and day, which can simplify the interface if year selection is unnecessary.
      2. Dropdown Mode: A property that defines the style or behavior of the dropdown used for selecting values in a datepicker.
      3. Year Dropdown Item Number: A property that specifies the number of year options displayed in the year dropdown of a datepicker. It allows customization of the range of years available for selection.
    4. Show Month Dropdown: A property that determines whether the month selection is displayed as a dropdown in a datepicker, allowing users to choose a month from a predefined list instead of manually entering it.
    5. Scrollable Year Dropdown: A property that enables a scrollable interface for the year dropdown in a datepicker, allowing users to easily navigate through a long list of years without excessive scrolling.
  3. Mobile
    1. Align Self: Defines the alignment of a specific item within a flex container, allowing it to override the container's default alignment rules.
    2. Flex: Specifies how a flex item will grow, shrink, or maintain its size within a flex container, determining its proportion relative to other items.
    3. Form Control Margin Bottom: Defines the spacing below a form control element, allowing customization of the vertical gap between controls for better layout and design consistency.

Click “Confirm” and “Date” control is configured.