--- title: "Form Date Picker Element" description: "With the Form Date Picker Element a Date can be entered or selected by the User." path: https://www.eonshowroom.eon.com/en/specials/form-elements/form-data-input/form-date-picker-element.html lastModified: 2025-02-25T10:14:04.659Z --- # Form Date Picker Element # Date Picker Element ### Information requested Choose a Date (default) **Date Picker without Restrictions (Default):** Example of the Default Setting of the Date Picker. Here you can put in any Date. Choose a Date without Weekends **Date Picker with Weekends excluded:** Example of the Default Setting of the Date Picker but with Weekends excluded. Here you can put in any Date except Weekends. [How to Configure](#how-to) ### Description The Form Date Picker Element Component can be used to offer an Option enter or select a Date. - Different Types are available - Can be made required [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-date-picker--interactive) ### Inspirations ### Information requested Choose from a Range of Dates [Info Icon Key: info-icon-1] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-1] **Date Picker with Date Range and Preselected Today:** Example of a defined Range an Today set as preselected of the Form Date Picker. Here you can only put in a Date in Range of 7 Days before or 3 Days after Today. Additional an Info Icon is added. Choose a Date within minimal and maximal Value **Date Picker with minimal and maximal Date and 02.05.2023 preselected:** Example of a defined minimal and maximal Date of the Form Date Picker. Here you can only put in a Date in Range of minimal and maximal Date. The difference to the Range is that Range is alway Days before and after Today, while minimal and maximal Date is not connected to Today. In this Example the minimal Date is 02.05.2023 and maximal Date is 15.05.2023, while 02.05.2023 is preselected. ### Usage Rules & Features ##### Features - Date Format is choosable ##### Properties - Can be made mandatory - Add Help Text, Error, and Required Messages ##### Design - Configure which Dates are choosable - Choose a preselected Day (optional) ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | no | ##### DO's - After Publishing, check Form sending works as expected - Ensure Mulesoft Integration and Configuration is done [Info Icon Key: info-icon-2] [Info Icon Aria Label: Mulesoft & MT Captcha Integration] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ##### Mulesoft & MT Captcha Mulesoft and MT Captcha are both needed for Forms. Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form. [Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html) [Info Icon Content End: info-icon-2] ##### DONT's - Do not use it in smaller Grid then 6 Column Grid - Try not to use it outside of Form Container - Any Kind of Form Element can be used only inside a Form Container ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ### Rules for the Element Name: The Element Name is a technical Name and therefore, there are some Rules to make it work: - Name must be UNIQUE - Just use lower Case Letters - No special Signs - No Blancs - No Numbers ### Form Date Picker With the Form Date Picker a Date can be selected. Therefore, it needs a Label, as well as an Element Name. This Element Name is needed for technical Referencing. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_date-picker_properties%3A3-4?fmt=webp) Furthermore, it is possible to set a Format for the Date, as well as entering an Help or Info Message. If no Format for the Date is provided, the Format of the current Language is taken. To configure Date Format please consider: - dd = days - MM = months - yyyy = years > These Settings are Case sensitive! > Valid Date Formats are for Example: MM/dd/yyyy, dd/MM/yyyy or yyyy/MM/dd. Beside that, it can be configured to close after Selection and / or to show the Message. Selecting "Enable Info Icon" Checkbox reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip or attach a Modal via Modal ID. #### Info Icon For Info Icon an Experience Fragment Path of a Tooltip or a Modal ID is needed. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) [Read More about configuring Modal](https://www.eonshowroom.eon.com/en/content-elements/modal.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_date-picker_date-config%3A3-4?fmt=webp) In Date Configuration Tab, multiple Settings can be made: - Day Range Check this Option if a Number of Days shall be enabled before/after the Date of User's Visit. The Number of "Days Before Current Date" and the Number of "Days After Current Date" can then be set instead of "Maximal Value" and "Minimal Value". - Maximal Value This defines the last Date which can be selected. The maximum Date must be provided in Format of "dd.MM.yyyy". - Minimal Value This defines the first (minimal) Date which can be selected. The minimal Date must be provided in Format of "dd.MM.yyyy". - Date Range Error Message This sets the Error Message when the Date Range is out of minimal and maximal Date Value. - Preselected Date Editor needs to choose between 4 Options: **1. Undefined** (Default) = no preselected Date **2. Today** = Today is preselected Date **3. Today(+ -)**= Number of Days before (-) / after (+) Today is preselected Date **4. Fix Date** = A fix Date, provided in Format of "dd.MM.yyyy", is preselected Date. - Excluded Dates Editor can define a List of Comma Separated Dates, provided each in Format of "yyyy-MM-dd", to be not selectable by User. - Exclude Weekends If selected, User will be not able to select Weekends as Date. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_date-picker_constraints%3A4-3?fmt=webp) In Constraints Tab of Date Picker, Editor can choose if this Field should be required. If so, also providing a Required Message is advisable.