增加日期取决于 select 下拉列表 bootstrap datepicker

Question

这里是示例代码：-

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

这里我想添加日期取决于下拉列表 select if dropdown select 1 而不是在最后一个日期选择器中添加第 1 天。而且我还想在更改下拉列表中打开最后一个日期选择器。请建议我。这里是demo

Answer 1

这是更新后的 fiddle：

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

Answer 2

更改下拉列表没有任何变化，因为没有附加到更改下拉列表的事件。

检查一次。 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 );
  }

我在这里所做的是，每当第一个日期或下拉菜单发生变化时，我就会更改第二个日期。

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

这对我来说是一种魅力。感谢 bhumi 的帮助。

增加日期取决于 select 下拉列表 bootstrap datepicker

Increment day depend on select dropdown bootstrap datepicker

javascript

jquery

html

datepicker

bootstrap-datepicker