{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/date-time-input/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Date and time inputs","navTitle":null,"slug":"design/date-time-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"Date and time inputs allow users to enter the date and time following a specified format.","cosmosComponent":{"component":{"component":"DateTime","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Date and time inputs allow a user to enter a specific date, time, or date and time."},"body":[{"id":"734b990a-d7f5-5c5c-b27e-eb00b35a019b","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"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.\n\nFor more best practices on building forms with inputs in Constellation, visit [Pega Academy](https://academy.pega.com/topic/designing-forms-constellation/v2/in/53706/54411)."}},{"id":"bb2263e8-d71e-52f5-a94a-e8b9b1761150","strapi_component":"layout.section","title":"Variations","subSections":[{"id":"d1cc39b2-0f72-598c-8f52-2dbe6715d542","title":"Date input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"fcae39cd-32aa-5b55-8d94-bab45a1ea333","strapi_component":"demo.code-editor","demo":{"demoName":"DateInputDemo","component":"DateTime","package":"core"}},{"id":"47779cc7-a314-5efb-8a2a-a0e5e07c4250","strapi_component":"layout.sub-section","title":"Week input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.\n\nThis component is also capable of opening a calendar for the user to select a week without typing it in.\n\nThis component does not support multiple locales."}},{"id":"eb55a4e7-9c92-508e-abde-64f4c59342af","strapi_component":"demo.code-editor","demo":{"demoName":"WeekInputDemo","component":"DateTime","package":"core"}},{"id":"1900675c-cba1-5bd8-acbe-d299b555cff3","strapi_component":"layout.sub-section","title":"Month input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The month input provides dropdowns to allow a user to select a month and year.\n\nThis component supports locale to control the language of the month displayed, but the locale does not affect the format of the input."}},{"id":"28c1b657-4710-5fc4-9b36-d3720ef46930","strapi_component":"demo.code-editor","demo":{"demoName":"MonthInputDemo","component":"DateTime","package":"core"}},{"id":"46f839d9-ada1-54b2-88ce-011ab0ce3559","strapi_component":"layout.sub-section","title":"Day of week input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The day of week input provides a dropdown to allow a user to select a day of the week.\n\nThis component supports locale to control the language of the day displayed and the order in which days should be presented."}},{"id":"8703e8eb-8f24-5232-87cb-9c756925c40a","strapi_component":"demo.code-editor","demo":{"demoName":"DayOfWeekInputDemo","component":"DateTime","package":"core"}},{"id":"234c5ab4-62aa-5e82-8e30-9bea654da2dc","strapi_component":"layout.sub-section","title":"Time input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.\n\nThe en-US locale also provides the user with a dropdown to select AM or PM.\n\nThis component may open a time picker with predefined intervals to select a time without typing it in."}},{"id":"5f71eff0-a38d-55fc-88bd-7559e473d2b6","strapi_component":"demo.code-editor","demo":{"demoName":"TimeInputDemo","component":"DateTime","package":"core"}},{"id":"b995bdb0-abae-5d30-9d62-2d8231285f6f","strapi_component":"layout.sub-section","title":"Time picker","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.\n\nThis component supports locale to control 12/24h clock format."}},{"id":"387f591c-5fa3-52a1-992c-f0cb5ec893cb","strapi_component":"demo.code-editor","demo":{"demoName":"TimePickerDemo","component":"DateTimePicker","package":"core"}},{"id":"502792dc-559c-552d-be59-f2abc8f617a9","strapi_component":"layout.sub-section","title":"Date and time input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The date and time input is a combination of the date input and time input."}},{"id":"6b1ee06b-6e31-5f26-80b3-d13dbffff121","strapi_component":"demo.code-editor","demo":{"demoName":"DateTimeInputDemo","component":"DateTime","package":"core"}},{"id":"b2b8599d-8863-5c3a-91e0-99f5a3c877d9","strapi_component":"layout.sub-section","title":"Date range input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The date range input component uses two date inputs. It allows the user to select a range between two dates.\n\nThis 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."}},{"id":"52d26aae-e91e-55d2-bae1-4b9e6c39b723","strapi_component":"demo.code-editor","demo":{"demoName":"DateRangeInputDemo","component":"DateTime","package":"core"}},{"id":"ad51af61-6435-59d0-a07c-7db608de97df","strapi_component":"layout.sub-section","title":"Duration input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"566a7778-b7c7-56a7-bcc8-96a833aad8f9","strapi_component":"demo.code-editor","demo":{"demoName":"DurationInputDemo","component":"DateTime","package":"core"}},{"id":"47cb018b-8382-5333-867b-99a1162167f8","strapi_component":"layout.section","title":"Display options","subSections":[{"id":"cdb6de10-a447-57dc-b7fe-c0f0a666e3d0","title":"Required","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"This will prevent any [form](/versions/8/design/form) submission until the required selection is made."}},{"id":"2694c4be-aeb3-5960-a20b-26c14f3ed3de","title":"Disabled","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"1dc7326a-2cde-5be1-a3bb-7200c28b496c","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The user will not be able to edit date and time inputs if they are readonly."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"2bff6bd5-9b7e-5847-9e04-5c69f067e853","strapi_component":"layout.section","title":"Displaying non-editable data","subSections":[{"id":"bddf7775-bfe5-5943-b65f-11b7563da965","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.  \n\nYou 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."}},{"id":"3df7dfc9-960c-5fed-8b37-ae7a9336cf13","title":"Field-value list","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"[Field-value lists](/versions/8/design/field-value-list) 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.\n\nPreviously, in classic Pega, field-value list was referred to as \"readonly\". This was changed due to \"readonly\" being an HTML input attribute."}}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"There are two methods of displaying non-editable information in Constellation: as a readonly field or a [field-value list](/versions/8/design/field-value-list). The method used depends on the context and purpose of the information."}},{"id":"232fc31b-b885-5802-a89f-8c3c18b8f496","strapi_component":"layout.section","title":"Configuration","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"To learn how to configure this component in your Constellation application, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-date-time-field.html). \n\nAll components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/traditional-ui-architecture.html).\n"}}],"relatedComponents":[{"displayText":"Date time display","link":"/versions/8/design/date-time-display"},{"displayText":"Location input","link":"/versions/8/design/location-input"},{"displayText":"Number input","link":"/versions/8/design/number-input"},{"displayText":"Text input","link":"/versions/8/design/text-input"}]}},"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":"Date and time inputs","navTitle":null,"slug":"design/date-time-input/","hidePage":false,"collapsibleGroup":"components","group":"form-controls","seoDescription":"Date and time inputs allow users to enter the date and time following a specified format.","cosmosComponent":{"component":{"component":"DateTime","package":"core"}},"childStrapiDesignComponentPageOverviewTextnode":{"overview":"Date and time inputs allow a user to enter a specific date, time, or date and time."},"body":[{"id":"734b990a-d7f5-5c5c-b27e-eb00b35a019b","strapi_component":"layout.section","title":"Usage","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"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.\n\nFor more best practices on building forms with inputs in Constellation, visit [Pega Academy](https://academy.pega.com/topic/designing-forms-constellation/v2/in/53706/54411)."}},{"id":"bb2263e8-d71e-52f5-a94a-e8b9b1761150","strapi_component":"layout.section","title":"Variations","subSections":[{"id":"d1cc39b2-0f72-598c-8f52-2dbe6715d542","title":"Date input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"fcae39cd-32aa-5b55-8d94-bab45a1ea333","strapi_component":"demo.code-editor","demo":{"demoName":"DateInputDemo","component":"DateTime","package":"core"}},{"id":"47779cc7-a314-5efb-8a2a-a0e5e07c4250","strapi_component":"layout.sub-section","title":"Week input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.\n\nThis component is also capable of opening a calendar for the user to select a week without typing it in.\n\nThis component does not support multiple locales."}},{"id":"eb55a4e7-9c92-508e-abde-64f4c59342af","strapi_component":"demo.code-editor","demo":{"demoName":"WeekInputDemo","component":"DateTime","package":"core"}},{"id":"1900675c-cba1-5bd8-acbe-d299b555cff3","strapi_component":"layout.sub-section","title":"Month input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The month input provides dropdowns to allow a user to select a month and year.\n\nThis component supports locale to control the language of the month displayed, but the locale does not affect the format of the input."}},{"id":"28c1b657-4710-5fc4-9b36-d3720ef46930","strapi_component":"demo.code-editor","demo":{"demoName":"MonthInputDemo","component":"DateTime","package":"core"}},{"id":"46f839d9-ada1-54b2-88ce-011ab0ce3559","strapi_component":"layout.sub-section","title":"Day of week input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The day of week input provides a dropdown to allow a user to select a day of the week.\n\nThis component supports locale to control the language of the day displayed and the order in which days should be presented."}},{"id":"8703e8eb-8f24-5232-87cb-9c756925c40a","strapi_component":"demo.code-editor","demo":{"demoName":"DayOfWeekInputDemo","component":"DateTime","package":"core"}},{"id":"234c5ab4-62aa-5e82-8e30-9bea654da2dc","strapi_component":"layout.sub-section","title":"Time input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.\n\nThe en-US locale also provides the user with a dropdown to select AM or PM.\n\nThis component may open a time picker with predefined intervals to select a time without typing it in."}},{"id":"5f71eff0-a38d-55fc-88bd-7559e473d2b6","strapi_component":"demo.code-editor","demo":{"demoName":"TimeInputDemo","component":"DateTime","package":"core"}},{"id":"b995bdb0-abae-5d30-9d62-2d8231285f6f","strapi_component":"layout.sub-section","title":"Time picker","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.\n\nThis component supports locale to control 12/24h clock format."}},{"id":"387f591c-5fa3-52a1-992c-f0cb5ec893cb","strapi_component":"demo.code-editor","demo":{"demoName":"TimePickerDemo","component":"DateTimePicker","package":"core"}},{"id":"502792dc-559c-552d-be59-f2abc8f617a9","strapi_component":"layout.sub-section","title":"Date and time input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The date and time input is a combination of the date input and time input."}},{"id":"6b1ee06b-6e31-5f26-80b3-d13dbffff121","strapi_component":"demo.code-editor","demo":{"demoName":"DateTimeInputDemo","component":"DateTime","package":"core"}},{"id":"b2b8599d-8863-5c3a-91e0-99f5a3c877d9","strapi_component":"layout.sub-section","title":"Date range input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The date range input component uses two date inputs. It allows the user to select a range between two dates.\n\nThis 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."}},{"id":"52d26aae-e91e-55d2-bae1-4b9e6c39b723","strapi_component":"demo.code-editor","demo":{"demoName":"DateRangeInputDemo","component":"DateTime","package":"core"}},{"id":"ad51af61-6435-59d0-a07c-7db608de97df","strapi_component":"layout.sub-section","title":"Duration input","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"566a7778-b7c7-56a7-bcc8-96a833aad8f9","strapi_component":"demo.code-editor","demo":{"demoName":"DurationInputDemo","component":"DateTime","package":"core"}},{"id":"47cb018b-8382-5333-867b-99a1162167f8","strapi_component":"layout.section","title":"Display options","subSections":[{"id":"cdb6de10-a447-57dc-b7fe-c0f0a666e3d0","title":"Required","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"This will prevent any [form](/versions/8/design/form) submission until the required selection is made."}},{"id":"2694c4be-aeb3-5960-a20b-26c14f3ed3de","title":"Disabled","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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."}},{"id":"1dc7326a-2cde-5be1-a3bb-7200c28b496c","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"The user will not be able to edit date and time inputs if they are readonly."}}],"childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"2bff6bd5-9b7e-5847-9e04-5c69f067e853","strapi_component":"layout.section","title":"Displaying non-editable data","subSections":[{"id":"bddf7775-bfe5-5943-b65f-11b7563da965","title":"Readonly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.  \n\nYou 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."}},{"id":"3df7dfc9-960c-5fed-8b37-ae7a9336cf13","title":"Field-value list","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"[Field-value lists](/versions/8/design/field-value-list) 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.\n\nPreviously, in classic Pega, field-value list was referred to as \"readonly\". This was changed due to \"readonly\" being an HTML input attribute."}}],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"There are two methods of displaying non-editable information in Constellation: as a readonly field or a [field-value list](/versions/8/design/field-value-list). The method used depends on the context and purpose of the information."}},{"id":"232fc31b-b885-5802-a89f-8c3c18b8f496","strapi_component":"layout.section","title":"Configuration","subSections":[],"childStrapiComponentLayoutSectionBodyTextnode":{"body":"To learn how to configure this component in your Constellation application, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-date-time-field.html). \n\nAll components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit [Pega Documentation](https://docs.pega.com/bundle/platform/page/platform/user-experience/traditional-ui-architecture.html).\n"}}],"relatedComponents":[{"displayText":"Date time display","link":"/versions/8/design/date-time-display"},{"displayText":"Location input","link":"/versions/8/design/location-input"},{"displayText":"Number input","link":"/versions/8/design/number-input"},{"displayText":"Text input","link":"/versions/8/design/text-input"}]}},"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"]}