1. Home
  2. Snippets
  3. Allow date range or multiple dates in date picker

Allow date range or multiple dates in date picker

Heads up!

This article contains PHP and javascript code and is intended for developers. We offer this code as a courtesy, but don't provide support for code customizations or 3rd party development.

For extra guidance, please see WPBeginner's tutorial on adding custom code.

Dismiss

The Date/Time field’s date picker option provides the user a calendar of dates to choose from. By default, a single date can be selected within this calendar.

The snippets below can be added to your site to allow the user to select a range of consecutive dates, or multiple non-consecutive dates, within the date picker calendar.

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

NOTE: 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.

Date Range

/**
 * Modify WPForms Date/Time field date picker to accept a range of dates.
 */
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' );

Front end view of date range selection

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

Entry data view of date range selection

Multiple Dates

/**
 * Modify WPForms Date/Time field date picker to accept multiple dates.
 */
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' );

Front end view of multiple date selection

Within the entry, any selected dates will be separated by a semicolon (;).

Entry data view of multiple date selection

Updated on April 4, 2018

Was this article helpful?