How to Allow Date Range or Multiple Dates in Date Picker

Introduction

Would you like to customize the Date Picker field to allow for a date range or even multiple dates to be selected inside your form? When you allow for multiple bookings in one form, you may need to give your visitors the ability to select a range of dates or multiple dates. By default, only a single date can be selected within this calendar. In this tutorial, we’ll show you how to use PHP to provide a date range or multiple date selections for your WPForms.

When using snippets for the Date Picker, it’s best turn off any of the built-in features WPForms provides in the form builder for further restricting dates. For more information, please see this documentation.

Creating the form

First you’ll need to create your form and add at least one Date/Time form field and set the field to Date Picker.

If you need any assistance in creating a form, please review this documentation.

just create your form and add your date picker field to the form

Adding the code snippet to allow for a date range or multiple dates

Once you’re form is created, choose if you’d like to allow for a date range or to allow for multiple dates to be selected in your form and add that snippet to your site.

If you need any help in how to add snippets to your site, please see this tutorial.

Each of these snippets are designed to be applied to all forms created with WPForms on your site. However, with slight modifications, you can apply the code to a specific form or a specific field.

Allow a date range

This particular snippet will allow for all date pickers to select a range of dates for all forms.

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */

function wpf_dev_date_picker_range() {
?>
	<script type="text/javascript">

	    window.wpforms_datepicker = {
	        mode: "range"
	    }

	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );

Your user can select a date range from the date picker

Within the submission entry, the start and end dates will be noted.

The date range will show in the form entry with a from and to

Allow multiple dates

Alternatively, you can use this snippet that would allow for multiple dates to be selected for every date picker on your forms created with WPForms.

/**
 * Modify WPForms Date/Time field date picker to accept multiple dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */

function wpf_dev_date_picker_multiple() {
	?>
	<script type="text/javascript">

	window.wpforms_datepicker = {
	    mode: "multiple"
	}

	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_multiple', 10 );

The user can now select multiple dates from the date picker

Within the entry, any selected dates will be separated by a comma.

The multiple dates will show in the form entry and separated by a semicolon

If using third-party integrations, these date formats may not be accepted by those services. Be sure to test any customizations before using on a live form.

And that’s it! You’re now able to select a range of dates or multiple dates on your WPForms. Would you like to create more options for your Date field? Try out the article on How to Create Additional Formats for the Date Field.

Action Reference: wpforms_wp_footer_end

FAQ

Q: How do I target a single form or a single date picker inside a specific form?

A: To target a specific form for the date range as an example, you would use this snippet.

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */

function wpf_dev_limit_date_picker() {
?>

<script type="text/javascript">

    window.wpforms_1049 = window.wpforms_1049 || {};

    window.wpforms_1049.datepicker = {
        mode: "range",
    }

</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );

Where as the 1049 inside the window.wpforms_1049 is the form ID.

If you have multiple date pickers inside a specific form, you could target a specific field ID with this example.

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */

function wpf_dev_limit_date_picker() {
?>

<script type="text/javascript">

    window.wpforms_1049_11 = window.wpforms_1049_11 || {};

    window.wpforms_1049_11.datepicker = {
        mode: "range",
    }

</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );

Just as with the first example, we’re targeting the form ID 1049, however with this example we’re also only targeting the date picker with the field ID of 11.

If you need help in finding your form and field ID, please see this tutorial.

Q: Can the form use the date range and still limit the dates?

A: Absolutely! You can use the date range, not allow past dates, and only allow a number of days to be picked in advance. In the code snippet below, we’re targeting form ID 1049 and the form’s date picker will:

  1. Not allow past dates to be selected
  2. Use the date range functionality
  3. Allow only up to 14 days to be selected
/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */

function wpf_dev_limit_date_picker() {
?>
    <script type="text/javascript">

    window.wpforms_1049 = window.wpforms_1049 || {};
    
    window.wpforms_1049.datepicker = {
        minDate: new Date(),
        mode: "range",
        maxDate: new Date().fp_incr(14)
    }

    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );

Q: Can I change the separator for the date range?

A: Absolutely! To use a different date separator on the date range, use this code snippet instead of the above.

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */

function wpf_dev_date_picker_range() {
?>
    <script type="text/javascript">

        window.wpforms_datepicker = {
            mode: "range",
	    locale: {
	        rangeSeparator: 'sep-text-goes-here'
	    }
        }

    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );

Just remember to change rangeSeparator: ‘sep-text-goes-here’ to match what you want the separator to be. By default, you will see a dash (-) as a separator.

Q: Can I require a minimum range of days to be selected?

A: Absolutely, to use the range and require a minimum number of days, just use this code snippet.

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 *
 * @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
 */

function wpf_dev_date_picker_range() {
?>
    <script type="text/javascript">

        window.wpforms_datepicker = {
            mode: "range",
	    onClose: function(selectedDates, dateStr, instance) {
                var daysInRange = document.getElementsByClassName('inRange');
		var totalDays = daysInRange.length+2;
		if(totalDays<=7) {
                    alert("Min 7 Days Required");
		    this.clear();
		}
            }
        }

    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );