DateTime inputs

There are a variety of components designed to support any of the date and time inputs your application may need. DateTime inputs are used when a user needs to enter a specific date or time. DatePickers provide a calendar that the user can navigate to find the date they are looking for. All components are designed to be flexible within whatever locale they are used in. You can configure the locale using the Configuration component.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

All of the DateTime inputs allow for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.

DateInput

The DateInput component allows a user to enter a specific date via the text Input that is protected by a mask to ensure the date format is correct. This component is also capable of opening a calendar for the user to select a date without typing it in.

WeekInput

The WeekInput component allows a user to enter a week number and year via the text Input that is protected by a mask where the format is Week {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 does not support locale. This component is also capable of opening a calendar for the user to select a week without typing it in.

MonthInput

The MonthInput 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.

QuarterInput

The QuarterInput provides dropdowns to allow a user to select a quarter and year. This component does not support locale.

DayOfWeekInput

The DayOfWeekInput 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.

TimeInput

The TimeInput provides a text Input where users may enter the time following the specified format. By default, the user is expected to enter hours and minutes, but may also be required to enter seconds if the withSeconds prop is enabled. The en-US locale also provides the user with a dropdown to select AM or PM. This component may open a TimePicker with predefined intervals to select a time without typing it in. The clockFormat may also be formatted to a 12 hour system or a 24 hour system.

DateTimeInput

The DateTimeInput is a combination of the DateInput and TimeInput components.

DateRangeInput

The DateRangeInput component uses two date inputs. It allows users to select a range between two dates. This component is also capable of opening a DatePicker with a calendar for each input. The DatePicker allows user to select ranges without typing dates in.

DurationInput

The DurationInput represents the duration property. It has two modes of defining duration: using specific time units (format set as seconds, minutes, hours, or days) or hh:mm:ss when the format is set as formatted. These are interchangeable and affect only the form of the value.

DatePicker

The DatePicker component is useful when a user may not know the exact date that they wish to enter. They will have the ability to navigate through a calendar by month and year to pick the exact date, or multiple dates, that they are looking for. The picker works in two modes allowing users to select the exact date or ISO week. The week number may be shown within the picker by enabling the showWeekNumber prop.

TimePicker

The TimePicker component is great 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 by passing either 15, 30, or 60 to the interval prop. This component supports either a 12 hour or 24 hour clockFormat.

NameTypeDefaultDescription
autoFocusbooleanAutomatically focuses the input on render.
defaultValue
string |number |Date 
Date as ISO8601 string, timestamp or native Date object. Sets the value for an uncontrolled input.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanVisually hides the label region.
max
string |number |Date 
Date as ISO8601 string, timestamp or native Date object. Defines maximum available value that can be set by the user.
min
string |number |Date 
Date as ISO8601 string, timestamp or native Date object. Defines minimum available value that can be set by the user.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
onBlur(value: DateTimeCallbackParameter) => voidCallback fired when the component loses focus.
onChange(value: DateTimeCallbackParameter) => voidCallback fired when input value changes.
onFocus(value: DateTimeCallbackParameter) => voidCallback fired when the component gets focused.
pickerReactNodeChanges default date picker
readOnlybooleanMakes the input non editable and non clickable. The browser defaults to false.
requiredbooleanIndicate if the field is required. The browser defaults to false.
showWeekNumberbooleanfalse Display additional column with week number in date picker popover.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.
value
string |number |Date 
Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs.