Increment день зависит от выбора ниспадающего начальной загрузки DatePicker

Вот пример кода: -Increment день зависит от выбора ниспадающего начальной загрузки DatePicker

<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 в последний datepicker. И я также хочу открыть последнюю подборку даты в раскрывающемся списке изменений. пожалуйста, предложите мне. Вот 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, но когда я меняю ниспадающее меню, ничего не меняется во втором datepicker –

он будет работать, как только вы выберете 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); 
     } 
    }); 
});

Это работа для меня как очарование. спасибо бхуми за помощь.

источник

2016-12-21 06:54:09

Increment день зависит от выбора ниспадающего начальной загрузки DatePicker

ответ

Смежные вопросы