Gravity Form: How to Allow Date Range in Date Picker

Do you want to customize the Date Picker field in Gravity Forms to allow for a date range picker within your form? If you’re offering multiple days bookings or appointments through your form, it may be necessary to allow visitors to select a range of dates. By default, the Date Picker field in Gravity Forms only allows for a single date selection. But, with the help of Custom Code & Scripts, you can modify the form to enable the selection of date ranges. In this tutorial, we will guide you through the steps to implement this functionality in Gravity Forms.

There are Two Ways to create a date range picker in gravity form

1. By Using WPGuiders Plugin gfdaterangepicker
2. By Using Scripts

1. By Using WPGuiders Plugin gfdaterangepicker

The WPGuiders gfdaterangepicker plugin provides an easy way to add a date range picker to your Gravity Forms. This field allows users to select a start and end date by clicking on the corresponding input fields and choosing a date from the calendar that appears. Once the start and end dates are selected, they are displayed in the field as a range.

Additionally, the date range picker field has been configured to disable days that have already passed, so users cannot select past dates. This ensures that the date range selected is valid and avoids any errors that could occur if users were able to select expired dates. Overall, the date range picker field provides a user-friendly and efficient way for users to input date information on the form.

To use the gfdaterangepicker feature, follow these steps:

The WPGuiders plugin provides an easy way to add a date range picker to your Gravity Forms. One of the most popular use cases for this is when you need to allow users to select a date range for a reservation, booking, or appointment.

• Dowload our gfdaterangepicker plugin

To use the gfdaterangepicker feature, follow these steps:

• Install and activate the gfdaterangepicker plugin on your WordPress site.

• To start, create a form in Gravity Forms and add a daterangepicker field.

• Save the form.

After following these steps, your Gravity Form will now have a date range picker enabled, and users can select a date range using the date range picker feature.

2. By Using Scripts

Creating The Form

To start, create a form in Gravity Forms and add a Text field.

Insert the javascript Scripts

Inserting the javascript libraries that enable the selection of a date range. you can add these code snippets on the footer of your site. you can use Plugin to add scripts on the footer in WordPress.There are several plugins available in WordPress that can be used to add custom scripts to the header and footer of a website, such as WP Code, Insert Headers and Footers, Woody Snippets, and Add Custom Codes. In this article, we will be using WP Code to insert scripts into the footer.

• After installing WP Code, navigate to Code Snippets, click on the header & footer buttons, and add the custom code given below in the footer.

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

• After adding the necessary scripts via CDNs, identify the name of the text field on the Gravity Form for which you want to enable a date range picker.

• Add this script below the above scripts inside the footer

<script>
  jQuery.noConflict();
 jQuery(function() {

  jQuery('input[name="input_5"]').daterangepicker({
     autoUpdateInput: false,
    locale: {
       cancelLabel: 'Clear',
    },
    minDate: moment().startOf('day'),
    changeMonth: false,
    changeYear: false
  });
jQuery('input[name="input_5"]').on('apply.daterangepicker', function(ev, picker) {
      jQuery(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
  });

  jQuery('input[name="input_5"]').on('cancel.daterangepicker', function(ev, picker) {
     jQuery(this).val('');
  });
});
 
</script>

• After adding the script, update your text field name where the input[name=” “] exists. You can use the Chrome Inspector tool to find the name of your field.

Now, your Gravity Forms date range picker is displayed on the form field, and you can select a date range from this field.

Conclusion

In conclusion, allowing date range in Gravity Forms’ date picker is a useful feature that can greatly enhance the functionality of your forms. By following the steps outlined in this article, you can easily implement this feature in your own forms and give your users more control over the dates they select.

If you need further assistance with implementing this or any other feature in your Gravity Forms, be sure to check out the resources available at WPGuiders. With their extensive knowledge and experience in WordPress and Gravity Forms, they can provide you with the support and guidance you need to create forms that meet your specific requirements.

So why wait? Head over to WPGuiders now and take advantage of their expertise to enhance your Gravity Forms today!