Date and time inputs
Date and time inputs allow a user to enter a specific date, time, or date and time.
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
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.
New for 24.2: Now labels can use property references, making them dynamic; creating more personalized, engaging experiences.
For more best practices on building forms with inputs in Constellation, visit Pega Academy.
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
Display options
Required
This will prevent any form submission until the required data is provided.
Readonly
Readonly inputs are typically recommended to use when they provide information that a user shouldn't edit, but makes sense in the logical order of the form. (e.g. A state input may be readonly based on certain business restrictions, but the street and province or state are freely editable.)
Disabled
Not recommended, has serious accessibility implications.
Configuration
To learn how to configure this component in your Constellation application, visit Pega Documentation.
All information on this site pertains to the Constellation UX System (from 8.8 and onwards). Looking for something else? See resources specifically for Theme Cosmos. If you have questions, concerns, or any other feedback, please reach to us on Pega Support and include the capability 'User Experience' and 'Constellation' in your request.