{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/date-time-input/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"DateTime inputs","navTitle":null,"slug":"develop/date-time-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"DateTime inputs allow users to enter dates and time following a specified format.","cosmosComponent":{"component":{"component":"DateTime","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"_Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Community](https://docs.pega.com/user-experience/87/theme-cosmos)._\n\nThere 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](/versions/8/develop/configuration) component.\n\nMost DateTime components accept **min** and **max** date props. Dates outside of this range, if provided, will be disabled from selection by the user.\n\nTo learn more about configuration, visit [Pega Community](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-date-time-field.html)."},"body":[{"id":"39576ed8-2717-507f-98eb-6b400693fda5","strapi_component":"layout.section","title":"Inputs","subSections":[{"id":"efed8556-2e77-56ae-8fac-3395a9b21220","title":"DateInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The DateInput component allows a user to enter a specific date via the text [Input](/versions/8/develop/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."}}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"All of the DateTime inputs allow for standard [Form](/versions/8/develop/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.\n\nIf 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](/versions/8/develop/icon)."}},{"id":"9b8399f6-db7c-5e83-bcb0-7ae19c1075e1","strapi_component":"demo.code-editor","demo":{"demoName":"DateInputDemo","component":"DateTime","package":"core"}},{"id":"b3063b97-57a7-506c-856d-087868cbbf0b","strapi_component":"layout.sub-section","title":"WeekInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The WeekInput component allows a user to enter a week number and year via the text [Input](/versions/8/develop/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."}},{"id":"f62069f8-8c33-5a98-9586-87c939349eae","strapi_component":"demo.code-editor","demo":{"demoName":"WeekInputDemo","component":"DateTime","package":"core"}},{"id":"f2fa53a7-9993-5ae8-a895-04734d89d13c","strapi_component":"layout.sub-section","title":"MonthInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"43f8e6f0-1569-5c8e-87a0-ed4952838ff7","strapi_component":"demo.code-editor","demo":{"demoName":"MonthInputDemo","component":"DateTime","package":"core"}},{"id":"30a170cb-9ebe-5e0d-a23b-d15aef46238e","strapi_component":"layout.sub-section","title":"QuarterInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The QuarterInput provides dropdowns to allow a user to select a quarter and year. This component does not support locale."}},{"id":"f072d53d-8ee5-5325-9b6c-26576c4fc8ef","strapi_component":"demo.code-editor","demo":{"demoName":"QuarterInputDemo","component":"DateTime","package":"core"}},{"id":"b86cfa99-a148-5f5f-b213-d4657f1116bf","strapi_component":"layout.sub-section","title":"DayOfWeekInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"6532d8cb-df12-552b-9a1b-70d935410f32","strapi_component":"demo.code-editor","demo":{"demoName":"DayOfWeekInputDemo","component":"DateTime","package":"core"}},{"id":"2c2dce1f-6411-5583-a4eb-77746c38f547","strapi_component":"layout.sub-section","title":"TimeInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The TimeInput provides a text [Input](/versions/8/develop/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."}},{"id":"07d1655f-59ab-5c07-92ba-33cd518795b5","strapi_component":"demo.code-editor","demo":{"demoName":"TimeInputDemo","component":"DateTime","package":"core"}},{"id":"3a0aa153-fd14-5bdb-95ea-fd25771e7a25","strapi_component":"layout.sub-section","title":"DateTimeInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The DateTimeInput is a combination of the DateInput and TimeInput components."}},{"id":"5eddddbb-91e7-56e4-860b-c345d991b91e","strapi_component":"demo.code-editor","demo":{"demoName":"DateTimeInputDemo","component":"DateTime","package":"core"}},{"id":"4687047b-5f85-5127-abab-e545f8079abb","strapi_component":"layout.sub-section","title":"DateRangeInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"816e910a-d209-5297-a34b-366bb0c40b39","strapi_component":"demo.code-editor","demo":{"demoName":"DateRangeInputDemo","component":"DateTime","package":"core"}},{"id":"1d13c622-b406-5196-9c44-079f8f4712f2","strapi_component":"layout.sub-section","title":"DurationInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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**."}},{"id":"c1e9d29b-015e-5d7b-8272-7c0d29c560bb","strapi_component":"demo.code-editor","demo":{"demoName":"DurationInputDemo","component":"DateTime","package":"core"}},{"id":"aee65b56-3df7-5264-9b64-8dda1bf087fa","strapi_component":"layout.section","title":"Pickers","subSections":[{"id":"49f3decb-52d8-57bb-940d-2e758fb1a65b","title":"DatePicker","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"4c831def-28c3-5baa-97dd-eb0b845d4355","strapi_component":"demo.code-editor","demo":{"demoName":"DatePickerDemo","component":"DateTimePicker","package":"core"}},{"id":"7396fca5-0315-5605-acc8-e7ab81f06c8a","strapi_component":"layout.sub-section","title":"TimePicker","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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**."}},{"id":"11323277-8c31-5991-8b5b-5f2385451b86","strapi_component":"demo.code-editor","demo":{"demoName":"TimePickerDemo","component":"DateTimePicker","package":"core"}}],"relatedComponents":[{"displayText":"Configuration","link":"/versions/8/develop/configuration"},{"displayText":"DateTimeDisplay","link":"/versions/8/develop/date-time-display"}],"propsTable":true,"themeTree":null}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"DateTime inputs","navTitle":null,"slug":"develop/date-time-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"DateTime inputs allow users to enter dates and time following a specified format.","cosmosComponent":{"component":{"component":"DateTime","package":"core"}},"childStrapiDeveloperComponentPageOverviewTextnode":{"overview":"_Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Community](https://docs.pega.com/user-experience/87/theme-cosmos)._\n\nThere 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](/versions/8/develop/configuration) component.\n\nMost DateTime components accept **min** and **max** date props. Dates outside of this range, if provided, will be disabled from selection by the user.\n\nTo learn more about configuration, visit [Pega Community](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-date-time-field.html)."},"body":[{"id":"39576ed8-2717-507f-98eb-6b400693fda5","strapi_component":"layout.section","title":"Inputs","subSections":[{"id":"efed8556-2e77-56ae-8fac-3395a9b21220","title":"DateInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The DateInput component allows a user to enter a specific date via the text [Input](/versions/8/develop/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."}}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"All of the DateTime inputs allow for standard [Form](/versions/8/develop/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.\n\nIf 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](/versions/8/develop/icon)."}},{"id":"9b8399f6-db7c-5e83-bcb0-7ae19c1075e1","strapi_component":"demo.code-editor","demo":{"demoName":"DateInputDemo","component":"DateTime","package":"core"}},{"id":"b3063b97-57a7-506c-856d-087868cbbf0b","strapi_component":"layout.sub-section","title":"WeekInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The WeekInput component allows a user to enter a week number and year via the text [Input](/versions/8/develop/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."}},{"id":"f62069f8-8c33-5a98-9586-87c939349eae","strapi_component":"demo.code-editor","demo":{"demoName":"WeekInputDemo","component":"DateTime","package":"core"}},{"id":"f2fa53a7-9993-5ae8-a895-04734d89d13c","strapi_component":"layout.sub-section","title":"MonthInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"43f8e6f0-1569-5c8e-87a0-ed4952838ff7","strapi_component":"demo.code-editor","demo":{"demoName":"MonthInputDemo","component":"DateTime","package":"core"}},{"id":"30a170cb-9ebe-5e0d-a23b-d15aef46238e","strapi_component":"layout.sub-section","title":"QuarterInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The QuarterInput provides dropdowns to allow a user to select a quarter and year. This component does not support locale."}},{"id":"f072d53d-8ee5-5325-9b6c-26576c4fc8ef","strapi_component":"demo.code-editor","demo":{"demoName":"QuarterInputDemo","component":"DateTime","package":"core"}},{"id":"b86cfa99-a148-5f5f-b213-d4657f1116bf","strapi_component":"layout.sub-section","title":"DayOfWeekInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"6532d8cb-df12-552b-9a1b-70d935410f32","strapi_component":"demo.code-editor","demo":{"demoName":"DayOfWeekInputDemo","component":"DateTime","package":"core"}},{"id":"2c2dce1f-6411-5583-a4eb-77746c38f547","strapi_component":"layout.sub-section","title":"TimeInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The TimeInput provides a text [Input](/versions/8/develop/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."}},{"id":"07d1655f-59ab-5c07-92ba-33cd518795b5","strapi_component":"demo.code-editor","demo":{"demoName":"TimeInputDemo","component":"DateTime","package":"core"}},{"id":"3a0aa153-fd14-5bdb-95ea-fd25771e7a25","strapi_component":"layout.sub-section","title":"DateTimeInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The DateTimeInput is a combination of the DateInput and TimeInput components."}},{"id":"5eddddbb-91e7-56e4-860b-c345d991b91e","strapi_component":"demo.code-editor","demo":{"demoName":"DateTimeInputDemo","component":"DateTime","package":"core"}},{"id":"4687047b-5f85-5127-abab-e545f8079abb","strapi_component":"layout.sub-section","title":"DateRangeInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"816e910a-d209-5297-a34b-366bb0c40b39","strapi_component":"demo.code-editor","demo":{"demoName":"DateRangeInputDemo","component":"DateTime","package":"core"}},{"id":"1d13c622-b406-5196-9c44-079f8f4712f2","strapi_component":"layout.sub-section","title":"DurationInput","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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**."}},{"id":"c1e9d29b-015e-5d7b-8272-7c0d29c560bb","strapi_component":"demo.code-editor","demo":{"demoName":"DurationInputDemo","component":"DateTime","package":"core"}},{"id":"aee65b56-3df7-5264-9b64-8dda1bf087fa","strapi_component":"layout.section","title":"Pickers","subSections":[{"id":"49f3decb-52d8-57bb-940d-2e758fb1a65b","title":"DatePicker","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"4c831def-28c3-5baa-97dd-eb0b845d4355","strapi_component":"demo.code-editor","demo":{"demoName":"DatePickerDemo","component":"DateTimePicker","package":"core"}},{"id":"7396fca5-0315-5605-acc8-e7ab81f06c8a","strapi_component":"layout.sub-section","title":"TimePicker","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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**."}},{"id":"11323277-8c31-5991-8b5b-5f2385451b86","strapi_component":"demo.code-editor","demo":{"demoName":"TimePickerDemo","component":"DateTimePicker","package":"core"}}],"relatedComponents":[{"displayText":"Configuration","link":"/versions/8/develop/configuration"},{"displayText":"DateTimeDisplay","link":"/versions/8/develop/date-time-display"}],"propsTable":true,"themeTree":null}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}