Using the Divi Date Picker plugin to create start date and end date fields

Code Snippets, Divi

One of the most common questions I get asked is how to set up start date and end date fields in a Divi form using the date picker in the Divi Date/Time Picker plugin and forcing the end date to always be after whatever value the user selected for the start date.

While this functionality is not part of the core plugin code, you can easily achieve this using some javascript.

Place the following javascript in one these places:

  • a code module after your form
  • in your child theme JS file
  • in one of the fields in the Integration tab under the Divi Theme Options
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(){
    var startDateFieldID = 'FIELD_ID_OF_START_DATE',
    endDateFieldID       = 'FIELD_ID_OF_END_DATE';
    var $startDateField = document.querySelector('[data-original_id="' + startDateFieldID + '"]'),
    $endDateField       = document.querySelector('[data-original_id="' + endDateFieldID + '"]');
    $startDateField.addEventListener('change', setMinimumEndDate);
    function setMinimumEndDate(e){
      let currentFp =;
      let targetFp  = $endDateField._flatpickr;

      let dateInValue = currentFp.selectedDates; // get current date from first date picker
      let currentDateObj = new Date(dateInValue);
      currentDateObj.setDate(currentDateObj.getDate() + 1); //set next datepicker init date

      targetFp.config.minDate = currentDateObj;
      targetFp.setDate(currentDateObj);; // comment out this line if you don't want the end date field to open automatically.

Integrating the Script into Your Form

You only need to make 2 changes to the above code to integrate it into your form. At the top of the script where it says FIELD_ID_OF_START_DATE and FIELD_ID_OF_END_DATE – change these to the field IDs you’re using for these fields on your form.

Consider the following example.

Divi Date/Time Picker Start Date Field ID
Divi Date/Time Picker End Date Field ID

If we used start_date and end_date as our field IDs like in the images above, then the top part of our code would look like this:

var startDateFieldID = 'start_date',
    endDateFieldID   = 'end_date';

It’s also important to note that for the best results, I recommend using only lower case letters, numbers and underscores in your Field ID.

I consider this best practice on every Divi Contact Form whether you’re using a plugin like the Divi Date/Time Picker, Divi Multistep Contact Form or any custom code. Standardizing your field IDs will also make your life easier if you need to debug something down the road.

If you use spaces and special characters like apostrophes or commas you could experience unexpected results.

Optional Settings

Towards the end of the script you’ll notice a line that says:;

This causes the End Date field to open automatically when the user selects the start date. If you wish to disable this field from opening automatically, simply comment this line out by placing 2 forward slashes before it. For example:


Join the Discussion

Have something to add to this or want to comment on something mentioned in the article? Hop on over to our offical Facebook page and join the discussion!

About the Author

Alex Brinkman

Alex Brinkman

In addition to being an entrepreneur, Alex is addicted to lifestyle design, a sucker for motivational quotes and: "... just an all around great guy." - everyone When he's not busy banging on a laptop in a some obscure coffeeshop, he enjoys obstacle course races, giving random strangers compliments and automating as much of his life as possible.