How to Allow Date Range or Multiple Dates in Date Picker

Overview

Would you like to customize the date picker to allow for a date range or even multiple dates? 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. This tutorial will show you how to use PHP to provide a date range or multiple date selections for your WPForms.

The Date/Time field’s Date Picker option provides the user a calendar of dates to choose from.

By default, only a single date can be selected within this calendar.

Implementation Options

To customize the Date Picker option for a date range or multiple date selection, just add one of the code snippets below to your site.

These snippets are designed to be applied to all WPForms on your site. However, with slight modifications, you can apply the code to a specific form or field. Please see our article on customizing the date picker for examples.

Allow a date range

/**
 * 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', 'wpf_dev_date_picker_range' );

With the code above, the user will be able to select a date range on the form as shown in this screenshot below.

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

/**
 * 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', 'wpf_dev_date_picker_multiple' );

Now with this code above, your user will be able to select multiple dates on the form as shown in the screenshot below.

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