Date and time inputs
Date and time inputs allow a user to enter a specific date, time, or date and time.
Usage
There are a variety of date and time inputs designed to support any of the date and time inputs your application may need. All components are designed to be flexible within whatever locale they are used in.
For more best practices on building forms with inputs in Constellation, visit Pega Academy.
Variations
Date input
The date input component allows a user to enter a specific date via the text field. The text field automatically ensures the date follows the set format. This component is also capable of opening a calendar for the user to select a date without typing it in.
Example
Week input
The week input component allows a user to enter a week number and year, where the format is {ww}, {yyyy}. If a user enters a value greater than 52 for week number, the week number will default to the user's value minus 52 and will adjust the year accordingly.
This component is also capable of opening a calendar for the user to select a week without typing it in.
This component does not support multiple locales.
Example
Month input
The month input provides dropdowns to allow a user to select a month and year.
This component supports locale to control the language of the month displayed, but the locale does not affect the format of the input.
Example
Day of week input
The day of week input provides a dropdown to allow a user to select a day of the week.
This component supports locale to control the language of the day displayed and the order in which days should be presented.
Example
Time input
The time input provides a text field where users may enter the time following the specified format. By default, the user is expected to enter hours and minutes, but can also be required to enter seconds.
The en-US locale also provides the user with a dropdown to select AM or PM.
This component may open a time picker with predefined intervals to select a time without typing it in.
Example
Time picker
The time picker component can be used when a user may want to quickly select the time from predefined options. By default, the options interval is set to 30 minutes, but this may be changed.
This component supports locale to control 12/24h clock format.
Example
Date and time input
The date and time input is a combination of the date input and time input.
Example
Date range input
The date range input component uses two date inputs. It allows the user to select a range between two dates.
This component is also capable of opening a date picker with a calendar for each input. The date picker allows the user to select a range without typing dates in.
Example
Duration input
The duration input represents the duration property. It has two modes of defining duration: using specific time units (seconds, minutes, hours, days) or hh:mm:ss format. These are interchangeable and affect only the form of the value.
Example
Display options
Required
This will prevent any form submission until the required selection is made.
Disabled
You may wish to disable date and time inputs in order to prevent a user from entering or editing any information while some task is being completed, or to restrict a user's access.
Readonly
The user will not be able to edit date and time inputs if they are readonly.
Displaying non-editable data
There are two methods of displaying non-editable information in Constellation: as a readonly field or a field-value list. The method used depends on the context and purpose of the information.
Readonly
Display a field as readonly to indicate that a user cannot edit a field due to form conditionality or role restrictions. This way, the field can be editable when certain conditions are met.
You can also display a field as readonly when doing so gives the user context, or completes the layout for a set of fields in a form. For example, in a set of address input fields, the “state” field may be readonly, while the “address”, “city”, and “zip code” fields may be editable.
Field-value list
Field-value lists also display non-editable information, but live outside of a form (often in a case's summary panel or details tab card). Display information in a field-value list when users need to reference the information to complete a form or review the information to verify form details.
Previously, in classic Pega, field-value list was referred to as "readonly". This was changed due to "readonly" being an HTML input attribute.
Configuration
To learn how to configure this component in your Constellation application, visit Pega Documentation.
All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Documentation.