| Name | Description | Default | Type |
|---|---|---|---|
additionalInfo | Pass a heading and content to show additional information on the field. | | { content: string | Element; heading: string;} |
autoFocus | Automatically focuses the input on render. | | boolean |
defaultValue | Date as ISO8601 string, timestamp or native Date object. Sets the value for an uncontrolled input. | | string |number |Date |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | Sets 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. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
labelHidden | Visually hides the label region. | | boolean |
max | Date as ISO8601 string, timestamp or native Date object. Defines maximum available value that can be set by the user. | | string |number |Date |
min | Date as ISO8601 string, timestamp or native Date object. Defines minimum available value that can be set by the user. | | string |number |Date |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onBlur | | (value: DateTimeCallbackParameter) => void | |
onChange | | (value: DateTimeCallbackParameter) => void | |
onFocus | | (value: DateTimeCallbackParameter) => void | |
onResolveSuggestion | | (accepted: boolean) => void | |
picker | Changes default date picker | | { renderer: ComponentType<>; rendererProps: Partial<default>;} |
readOnly | Makes the input non editable and non clickable. The browser defaults to false. | | boolean |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
showWeekNumber | Display additional column with week number in date picker popover. | false | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
value | Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs. | | string |number |Date |
DateTime inputs
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
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.
Most DateTime components accept min and max date props. Dates outside of this range, if provided, will be disabled from selection by the user.
To learn more about configuration, visit Pega Community.
Inputs
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. If an onResolveSuggestion callback function is provided, and the status is set to pending, the user will be prompted to accept or deny whatever suggested value populates the DateTime input.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.
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.
Example
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.
Example
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.
Example
QuarterInput
The QuarterInput provides dropdowns to allow a user to select a quarter and year. This component does not support locale.
Example
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.
Example
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.
Example
DateTimeInput
The DateTimeInput is a combination of the DateInput and TimeInput components.
Example
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.
Example
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.
Example
Pickers
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.
Example
| SunSunday | MonMonday | TueTuesday | WedWednesday | ThuThursday | FriFriday | SatSaturday |
|---|---|---|---|---|---|---|
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.