增量天取决于选择下拉引导日期选择器答案

【问题标题】：Increment day depend on select dropdown bootstrap datepicker增量天取决于选择下拉引导日期选择器
【发布时间】：2017-05-06 11:49:40
【问题描述】：

这里是示例代码：-

<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

【问题讨论】：

因为您还必须为下拉菜单添加更改事件。

标签： javascript jquery html datepicker bootstrap-datepicker

【解决方案1】：

这是更新后的小提琴：

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

【讨论】：

我看到了你的 jsfiddle，但是当我改变下拉列表时，第二个 datepicker 没有任何变化
一旦您从下拉列表中选择 1,2,3 等，它将起作用。您要为夜间选项设置的内容

【解决方案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 );
  }

我在这里所做的是，只要第一个日期或下拉列表发生变化，我就会更改第二个日期。

【讨论】：

【解决方案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 的帮助。

【讨论】：