Skip to main content

Adding and Customizing the Date Field in Divi Form Builder

The Date Field in the Divi Form Builder module allows users to select a date from a calendar interface. This field includes several helpful features to enhance user experience and ensure accurate date selection.

Video​

Step 1: Add Form Field​

  1. Navigate to the page with your form and open the Form Builder module.
  2. Click on the Add New Field button.

Add Form Field

Step 2: Select the Date Field​

  1. Enter a descriptive Field Title that users will see.
  2. Enter an Admin Title to help identify the field in the backend.
  3. Assign a unique Field ID for data handling.
  4. Set Field Type to Date Field.

Select Date Field

Step 3: Configure Date Field Settings​

In addition to styling controls in the Design Tab, the Date Field has several configuration options under Field Options.

Customize Date Field

Field Options:​

  • Add Form Builder Prefix to Field
    Disable this if you want to define the ID and Name manually (useful for tracking or advanced integration).

  • Date and Time Picker Language
    Select the localization for month and day labels in the calendar picker.

  • Calendar Start Year / End Year
    Restrict the range of years shown in the calendar.
    This is helpful when expecting dates within a specific window—such as for date of birth fields or project timelines.

  • Calendar Date Format
    Define how the selected date should appear in the input.
    You can use formats like:

    • dd-mm-yy → 29-06-25
    • mm/dd/yy → 06/29/25
    • yy-mm-dd (default) → 25-06-29
    warning

    Do not use yyyy in your format string. This can cause the year to display twice due to the jQuery datepicker handling.
    Refer to the jQuery UI Date Format Docs for all format options.

  • Disable Dates
    Prevent users from selecting certain dates or ranges:

    • Disable Past Days: Prevents selection of any date before the current day.
    • Disable Future Days: Prevents selection of any date after today.
    • Disable Specific Days of Week: Uncheck individual weekdays (e.g., Saturday, Sunday) to block recurring days.
    • Disable Specific Days: Manually enter specific dates to disable (e.g., holidays or unavailable dates).
    • Disable Current Date: Prevents today’s date from being selected.

  • Default Date
    Automatically populate the field with a preset date. Leave this blank to have an empty field by default.