Gravity Forms - Datepicker extension for Date Range Fields

dateform.js

jQuery(function ($) {

	var datepickerInArgs = {
		minDate: 1,
		defaultDate: 0,
		dateFormat: 'dd/mm/yy',
		changeMonth: true,
		changeYear: true,
		onClose: function( dateText, inst ) {
			var d = $.datepicker.parseDate( inst.settings.dateFormat, dateText );
			d.setDate( d.getDate() + 1 );
			$( '.date-out input' )
				.val( $.datepicker.formatDate( inst.settings.dateFormat, d ) )
				.datepicker( 'option', {
				minDate: $.datepicker.formatDate( inst.settings.dateFormat, d )
			});
		}
	},
	datepickerOutArgs = {
		minDate: 'd',
		defaultDate: 'd',
		dateFormat: 'dd/mm/yy',
		changeMonth: true,
		changeYear: false,
	};

	/**
	 * Reset datepicker fields with new arguments.
	 */
	function changeDatepickerArgs() {
		$( '.date-in input, .date-out input' ).datepicker( 'destroy' );

		$( '.date-in input' ).datepicker( datepickerInArgs );
		$( '.date-out input' ).datepicker( datepickerOutArgs );
	}

	$( document ).on( 'gform_post_render', changeDatepickerArgs );
});

//Thanks to Gary Jones https://github.com/garyjones for the code reveiew (and subsequent rewrite)

functions.php

<?php

//Conditionally Enqueue the Script - not on Admin and only on Contact Page template

// Add CSS class to Gravity Input field for Date Picker
// Requires setting the Description in the forms with default content
add_action('gform_field_css_class', 'twp_custom_input_class', 10, 3);
	function twp_custom_input_class($classes, $field, $form){
    if($field['description'] == 'Arrival'){
        $classes .= " date-in";
    }
    if($field['description'] == 'Departure'){
        $classes .= " date-out";
    }
    return $classes;
}

style.css

/* Restore the Calendar Icon to the Date fields
Positioning will vary according to your styles*/

.page-template-page-contact-php .gfield.date-in .ginput_container,
.page-template-page-contact-php .gfield.date-out .ginput_container{
	background: url(http://cyc.org.au/wp-content/plugins/gravityforms/images/calendar.png) no-repeat 41% 50%;
}

These code snippets allow you to create custom Datepickers for Gravity Forms so you can simulate a date range field. In short, by selecting the date in the first field (date-in, or From date) the date-out or To Date prepopulates with the first day AFTER the To Date.

Thank you for your effort. Could you please tell me where to put the above codes? Thanks in advance.

If you just want the second one >= the first one insert this into a HTML field in the form (and adjust the field and form IDs)
Documentation : Gravity Forms Howto

<script type="text/javascript">
<!--
jQuery( document ).ready(function($) {

gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {

  	if ( fieldId == 17 || fieldId == 18 ) {
        optionsObj.minDate = 0;
    }

    if ( formId == 5 && fieldId == 17  ) {
        optionsObj.minDate = 0;
        optionsObj.onClose = function (dateText, inst) {
            jQuery('#input_5_18').datepicker('option', 'minDate', dateText).datepicker('setDate', dateText);
    	}
    }

    return optionsObj;

});

	
});

-->
</script>

I have a question, please. I am using the Gravity Wizz Inventory plugin for products. Will this snippet select just the start and end date or all days in between as well and would it work with Inventory? I need to be able to assign products to multiple days, not just 1st and last.
Thank you so much. Great work

It is a date range - will select the days in between.

Should i just use the HTML field in the form or should i use the java script too. where should i implement the .js?
Thank you

If you don't get whats going on there you should probably hire a developer.

Thank you. Thought that's what you were. Thanks for the help