Increment day depend on select dropdown bootstrap datepicker

Question

Here is sample code:-

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

This is my 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 );
        }
    });
});

Here I want add day depend on dropdown select if dropdown select 1 than add day 1 in last datepicker. And I also want open last date picker on change dropdown. please suggest me. Here is demo

Answer 1

Nothing change on changing dropdown because there is no event attached to changing of dropdown.

Check this once. 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 );
  }

What I am doing here is I am changing the second date whenever first date or dropdown is changing.

Answer 2

Here is the updated fiddle:

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

changed this line

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

and to open date picker you can add below line:

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

Here is the final code:

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

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

this is work for me as a charm. thanks bhumi for help.