title: Start and End Dates with Datepicker jQuery and Gravity Forms
body: <p>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:</p>
  
  <p>First I added a function in my <code>functions.php</code> from my theme:</p>
  
  <pre><code>/**
  * 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' );
  </code></pre>
  
  <p>Then I created a folder in my theme called <code>/js</code> and also i created a file called <code>my-js.js</code>, in which I have this code:</p>
  
  <pre><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);
          }
      });
  });
  </code></pre>
  
  <p>But the problem is that there is no effect in my datepickers, nothing changes, any idea why is this happening?</p>
  
  <p>There is another weird thing, if gravity forms have this file: <code>datepicker.js</code> 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:</p>
  
  <pre><code>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');
          }
      );
  }
  </code></pre>