帶日期選擇器jQuery和重力形式的開始日期和結束日期

Question

我在WordPress中有一個Gravity Forms的表單，這個表單有2個日期選擇器：入住日期和結帳日期，但我希望當客戶選擇日期入住日期自動退房日期在入住日期後一天更新，所以，這是我所做的沒有結果：

首先我在我的主題中添加了一個函數functions.php ：

/** 
* 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'); 

然後我在主題名爲/js創建的文件夾，也是我創建了一個名爲my-js.js文件，其中我有這樣的代碼：

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); 
     } 
    }); 
}); 

但問題是，有我在datepickers沒有效果，沒有什麼變化，任何想法，爲什麼會出現這種情況？

還有另一個奇怪的事情，如果重力形式有這個文件：datepicker.js，如果我刪除了那裏的一切，沒有什麼改變，或者如果改變一些值，也沒有改變。這是該文件中的代碼：

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

我想通了，到了最後，我想與大家分享的解決方案：

出於某種原因，我wasn't能夠使用我試過方式的代碼，所以在函數的代碼.php我在wordpress中的主題不起作用，但我試着用另一個代碼插入我的主題page.php中，並且它的工作原理，我也必須將每個「$」更改爲「jQuery」，所以代碼以這種方式工作，這是我使用的代碼：

<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> 

希望這可以幫助任何人試圖改變從j查詢重力形式的日期選擇器。

問候

Answer 2

您可以使用setDate執行此操作，請參閱Fiddle。

$(function() { 
    $("#from").datepicker({ 
    onSelect: function() { 
     var newDate = $(this).datepicker('getDate'); 
     newDate.setDate(newDate.getDate()+7); 
     $('#to').datepicker('setDate', newDate); 
    } 
    }); 

    $("#to").datepicker(); 
}); 

Answer 3

你的代碼的作品，我用它在我的網站，但我有一個問題，我找到了一種方法來解決它。

問題是，當你第一次點擊輸入字段時，datepicker顯示得很好。但是，如果您不選擇日期並單擊頁面上的任何其他位置，當再次單擊輸入字段時，日期選擇器不再顯示。解決方法是將onClose事件更改爲onSelect。我是一個noob，所以我不知道是什麼原因引起的問題，但我現在就開始工作了。

<script type="text/javascript"> 
jQuery(document).bind('gform_post_render', function(){ 
jQuery(".event_date_value input").datepicker('destroy'); 
jQuery('.event_date_value input').datepicker({ 
    minDate: 1, 
    defaultDate: 0, 
    dateFormat: "m/d/yy", 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function (dateText, inst) { 
     var d = jQuery.datepicker.parseDate(inst.settings.dateFormat, dateText); 
     d.setDate(d.getDate() - 30); 
     jQuery('.balance_date_value input').val(jQuery.datepicker.formatDate(inst.settings.dateFormat, d)); 
    jQuery('.balance_date_value input').datepicker('option', { 
     minDate: jQuery.datepicker.formatDate(inst.settings.dateFormat, d) 
    }); 
} 
}); 

jQuery('.balance_date_value input').datepicker('destroy'); 
jQuery('.balance_date_value input').datepicker({ 
    minDate: "d", 
    defaultDate: "d", 
    dateFormat: "m/d/yy", 
    changeMonth: true, 
    changeYear: false, 
}); 
}) 
</script>` 

Answer 4

我意識到這是一個比較舊的文章，但對於那些在同一個問題即絆倒，這個問題並不需要如此複雜的解決方案 - 所有的失蹤是「刷新：

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('refresh'); 
     } 
    }); 

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

Answer 5

如果你不想大驚小怪，我寫了一個插件，可以在Gravity Forms UI中處理這個插件。

http://gravitywiz.com/how-to-restrict-dates-in-second-date-field-based-on-date-selected-in-first-date-field-with-gravity-forms/