Question

以下是示例代码： -

var a = window.open(returnedFile, "name");

这是我的js： -

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

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

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

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的帮助。

增量日取决于选择下拉引导程序datepicker

3 个答案: