增加天數取決於選擇下拉引導日期選擇器

下面是示例代碼： -增加天數取決於選擇下拉引導日期選擇器

<input class="cal" type="text" id="cal3"> 
<select class="form_line_only form-control" name="ho_night" id="night"> 
         <option selected> Night </option> 
         <option > 1 </option> 
         <option > 2 </option> 
         <option > 3 </option> 
         <option > 4 </option> 
         <option > 5 </option> 
         <option > 6 </option> 
         <option > 7 </option> 
         <option > 8 </option> 
         <option > 9 </option> 
         <option > 10 </option> 
         </select> 
<input type="text" class="cal" id="cal4">

這是我的JS： -

$(document).ready(function() { 
    $("#cal3").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      //$("#cal4").datepicker("setDate", selectedDate); 
      var date = $(this).datepicker("getDate"); 
      date.setDate(date.getDate() + 3); 
      $("#cal4").datepicker("setDate", date); 
      $("#cal4").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    $("#cal4").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      $("#cal3").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
});

在這裏我要補充一天取決於選擇下拉菜單中，如果下拉列表中選擇1比在最後的日期選擇器中添加第1天。而且我還希望在更改下拉菜單中打開最後一個日期選擇器。請給我建議。這裏是demo

來源

2016-12-21 Milan Parekh

因爲您還必須爲下拉菜單添加更改事件。 – GeekAb

更改下拉菜單時沒有任何更改，因爲沒有附加到更改下拉菜單的事件。

請檢查一次。 http://jsbin.com/petiguwezo/1/edit?html,js,output

$(document).ready(function() { 
    $("#cal3").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      changeDate(); 
     } 
    }); 


    $("#cal4").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      $("#cal3").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 

    $('#night').on('change', function(){ 
      changeDate(); 
    }); 
}); 

function changeDate() { 
    var date = $('#cal3').datepicker("getDate"); 
    var nights = $('#night').val(); 

    if(nights === 'Night') 
     nights = 0; 

     date.setDate(date.getDate() + parseInt(nights)); 
     $("#cal4").datepicker("setDate", date); 
     $("#cal4").datepicker("option", "minDate", date); 
    }

我在做什麼這裏是我改變，只要第一次約會或下拉正在改變第二次約會。

來源

2016-12-21 06:48:53 GeekAb

這裏是更新小提琴：

https://jsfiddle.net/bhumi/9120gwnb/1/

改變了這一行

date.setDate(date.getDate() + parseInt($('#night option:selected').text()));

，並打開日期選擇器，你可以添加以下行：

$("#cal4").datepicker("show");

這是最後的代碼：

$(document).ready(function() { 
    $("#cal3").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      //$("#cal4").datepicker("setDate", selectedDate); 
      var date = $(this).datepicker("getDate");alert($('#night option:selected').text()); 
      date.setDate(date.getDate() + parseInt($('#night option:selected').text())); 
      $("#cal4").datepicker("setDate", date); 
      $("#cal4").datepicker("option", "minDate", selectedDate); 
      $("#cal4").datepicker("show"); 
     } 
    }); 
    $("#cal4").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      $("#cal3").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
});

來源

2016-12-21 06:18:13

我看到了你的jsfiddle，但是當我改變下拉菜單時，第二個日期選擇器 –

沒有任何變化，一旦你從下拉列表中選擇了1,2,3等，它就會起作用。你想要設置的夜晚選項 –

$(document).ready(function() { 
    $("#cal3").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      //$("#cal4").datepicker("setDate", selectedDate); 

     } 
    }); 
    $('#night').change(function(){ 
    var date = $("#cal3").datepicker("getDate"); 
      date.setDate(date.getDate() + parseInt($('#night option:selected').text())); 
      $("#cal4").datepicker("setDate", date); 
      $("#cal4").datepicker("option", "minDate", date); 
      $("#cal4").datepicker("option", "maxDate", date); 
    }); 
    $("#cal4").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     dateFormat: "dd/mm/y", 
     onSelect: function(selectedDate) { 
      $("#cal3").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
});

這是爲我工作的魅力。感謝bhumi的幫助。

來源

2016-12-21 06:54:09

增加天數取決於選擇下拉引導日期選擇器

回答

相關問題