Start and End Dates with Datepicker jQuery and Gravity Forms

Question

I have a form with Gravity Forms in WordPress, this form has 2 datepickers: Check-in date and Check-out Date, but I want that when the costumer selects a date in the check-in date, automatically the check-out date updates with a day after the check-in date, so, this is what i have done with no result:

First I added a function in my functions.php from my theme:

/**
* Gravity Forms Datepicker Changes
*/
function my_scripts_method() {
   wp_register_script( 'my-js-file',
       get_template_directory_uri() . '/js/my-js.js',
       array( 'jquery' ),
       '1.0',
       false );

   wp_enqueue_script( 'my-js-file' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Then I created a folder in my theme called /js and also i created a file called my-js.js, in which I have this code:

jQuery.noConflict();

jQuery(document).ready(function ($)) {
    $('#input_7_1').datepicker({
        changeMonth: true,
        onSelect: function (selectedDate) {
            $('#input_7_5').datepicker('option', 'minDate', selectedDate);
        }
    });

    $('#input_7_5').datepicker({
        changeMonth: true,
        onSelect: function (selectedDate) {
            $('#input_7_1').datepicker('option', 'maxDate', selectedDate);
        }
    });
});

But the problem is that there is no effect in my datepickers, nothing changes, any idea why is this happening?

There is another weird thing, if gravity forms have this file: datepicker.js and if i delete everything there, nothing changes, or if change some value, also there are no changes. this is the code inside that file:

jQuery(document).ready(gformInitDatepicker);
function gformInitDatepicker(){
    jQuery('.datepicker').each(
        function (){
            var element = jQuery(this);
            var format = "mm/dd/yy";

            if(element.hasClass("mdy"))
                format = "mm/dd/yy";
            else if(element.hasClass("dmy"))
                format = "dd/mm/yy";
            else if(element.hasClass("dmy_dash"))
                format = "dd-mm-yy";
            else if(element.hasClass("dmy_dot"))
                format = "dd.mm.yy";
            else if(element.hasClass("ymd_slash"))
                format = "yy/mm/dd";
            else if(element.hasClass("ymd_dash"))
                format = "yy-mm-dd";
            else if(element.hasClass("ymd_dot"))
                format = "yy.mm.dd";

            var image = "";
            var showOn = "focus";
            if(element.hasClass("datepicker_with_icon")){
                showOn = "both";
                image = jQuery('#gforms_calendar_icon_' + this.id).val();
            }

            element.datepicker({ yearRange: '-100:+20', minDate: +10, maxDate: "+24M +30D", showOn: showOn, buttonImage: image, buttonImageOnly: true, dateFormat: format,  changeMonth: false, changeYear: false, showAnim: 'slideDown', duration: 'slow' }).attr('readonly','readonly');
        }
    );
}

Answer 1

i figured out at the end, and i would like to share the solution:

For some reason i wasn´t able to use the code in the way i tried, so the code in functions.php of my theme in wordpress doesn´t work, but i tried with another code inserting this on my page.php of my theme, and it worked, also i had to change every "$" to "jQuery", so the code worked in that way, this is the code i used:

<script type="text/javascript">
jQuery(document).bind('gform_post_render', function(){
        // destroy default Gravity Form datepicker
jQuery("#input_7_1").datepicker('destroy');
        // create new custom datepicker
jQuery('#input_7_1').datepicker({
    minDate: 1,
    defaultDate: 0,
    dateFormat: "m/d/yy",
    changeMonth: true,
    changeYear: true,
    onClose: function (dateText, inst) {
        var d = jQuery.datepicker.parseDate(inst.settings.dateFormat, dateText);
        d.setDate(d.getDate() + 1);
        jQuery('#input_7_5').val(jQuery.datepicker.formatDate(inst.settings.dateFormat, d));
        jQuery('#input_7_5').datepicker('option', {
            minDate: jQuery.datepicker.formatDate(inst.settings.dateFormat, d)
        });
    }
});
// destroy default Gravity Form datepicker
jQuery('#input_7_5').datepicker('destroy');
jQuery('#input_7_5').datepicker({
    minDate: "d",
    defaultDate: "d",
    dateFormat: "m/d/yy",
    changeMonth: true,
    changeYear: false,
});
})
</script>

Hope this help anyone else trying to change something from the jquery datepicker of gravity forms.

Best regards