Date Picker

   MaestroThe UI design product.  |   Form Builder |   21.05 This feature was updated in 21.05.

Maestro comes with the Date Picker component (widget) that allows form users to select a date and time on a form.

This component supports both left-to-right (LTR) and right-to-left (RTL) languages.

The rendered date picker component is shown below.

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Date Picker component within the Input Fields folder.
  3. Drag the component into the View pane or the Wireframe.
  4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Date Picker component:

Date/Time Data Format
Text
dateFormat

Enter the date and time format that is stored in the underlying XML

Date/Time Display Format
Text
dateDisplayFormat

Enter the date display format

Display Mode
Option
displayMode

Select the display mode

The following options are available from the Display Mode dropdown:

Label Value
Date Only date
Full Mode (Date and Time) full
Prefill with Today's Date
Boolean
prefillTodaysDate

Check to prefill with today's date

Prefer Non-US Input
Boolean
auDateInput

Check to prefer using non-US date format.

Note

The US date format is m/d/yy or m/d/yyyy.

Open Calendar Icon
Icon
inputIcon

The icon used for the open calendar button. You should check with the Template Designer if you can change this icon, as icons are typically customized in the template.

Accessibility

Placeholder Text
Text
placeholder

Help Text

Popover Help Text
Help Text
helpText

Terminology

Close Button Label
Text
closeBtnLabel

Now Button Label
Text
nowBtnLabel

Month Labels
Text
monthLabels

A comma separated list of month labels from January to December

Month Abbreviations
Text
monthShortLabels

A comma separated list of month abbreviations from January to December

Day Labels
Text
dayLabels

A comma separated list of day labels from Sunday to Saturday

Validation

Min Date (dd/mm/yyyy)
Date
minDate

Minimum Date allowed. For example, a valid date may be between 01/01/2017 (min) to 31/12/2017 (max).

Max Date (dd/mm/yyyy)
Date
maxDate

Maximum Date allowed.

Must Be A Past Date
Boolean
pastDate

Check if the date must be in the past.

Must Be A Future Date
Boolean
futureDate

Check if the date must be in the future.

Include Today
Boolean
includeToday

Check to include today in validation.

Validation Messages

Past Date
Text
pastDateValidationMsg

Enter the past date validation message, which is displayed if the Must Be A Past Date option is selected. The user will receive the message if they do not follow the validation rules. The Form Builder can customize the messages displayed when validation is not met.

Past Date (Inc Today)
Text
pastDateIncTodayValidationMsg

Enter the past date (Inc Today) validation message, which is displayed if the Must Be A Past Date and Include Today options are selected. The user will receive the message if they do not follow the validation rules.

Future Date
Text
futureDateValidationMsg

Enter the future date validation message, which is displayed if the Must Be A Future Date option is selected. The user will receive the message if they do not follow the validation rules.

Future Date (Inc Today)
Text
futureDateIncTodayValidationMsg

Enter the future date (Inc Today) validation message, which is displayed if the Must Be A Future Date and Include Today options are selected. The user will receive the message if they do not follow the validation rules.

Next, learn about the Autocomplete Field component.