无法根据两个日期在datepicker中设置最大和最小范围

Question

我有三种输入类型，它们都与日期选择器相关联 JS FIDDLE DEMO

   <div class="demo"> 

   <label for="from">From</label> 
   <input type="text" id="from" name="from"/> 
   <label for="to">to</label> 
   <input type="text" id="to" name="to"/> 

   <label for="resultant">Resultant</label>
   <input type="text" id="resultant">
   </div>

的JavaScript

 $(function() {
       $("#from").datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3,
          onSelect: function( selectedDate ) {
           this.focus();
          }
    });

        $("#to").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
            this.focus();

        }
    });

        $("#resultant").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {   
         $('#resultant').datepicker("option","minDate",$('#from').datepicker('getDate')); 
         $('#resultant').datepicker("option","maxDate",$('#to').datepicker('getDate')); 

        }
    });
});

这里的问题是我第一次选择结果日期输入框时，未选择minRange和maxRange。第二次选中他们。原因是在第一次选择后设置了最小和最大范围

我怎么能摆脱它？

更新：遵循其中一种方法后，我将获得此用户界面 但是没有看到年份领域。有什么理由??

Answer 1

尝试使用以下javascript代码进行范围修复

  $("#resultant").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            beforeShow: changeRange,
            onSelect: function (selectedDate) {
                //$('#resultant').datepicker("option", "minDate", $('#from').datepicker('getDate'));
                //$('#resultant').datepicker("option", "maxDate", $('#to').datepicker('getDate'));
            }
        });

        function changeRange(input) {
            if ($('#from').val() != null && $('#to').val() != null) {
                var minDate = new Date($('#from').val());
                var maxDate = new Date($('#to').val());
                //minDate.setDate(minDate.getDate() + 1)

                return {
                    minDate: minDate,
                    maxDate: maxDate
                };
            }

            return {};
        }

Answer 2

你应该使用“onSelect”代表“from”和“to”，而不是“结果”。 现在，边界计算在“结果”中选择日期后发生。

$(function () {
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onSelect: function (selectedDate) {
            $('#resultant').datepicker("option", "minDate", $('#from').datepicker('getDate'));
            this.focus();

        }
    });

    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onSelect: function (selectedDate) {
            $('#resultant').datepicker("option", "maxDate", $('#to').datepicker('getDate'));
            this.focus();

        }
    });

    $("#resultant").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onSelect: function (selectedDate) {
            this.focus();
        }
    });
});

Answer 3

我找到的另一种解决方案

  <label for="resultant">Resultant</label>
  <input type="text" id="resultant" onclick="showDatePicker()">

JavaScript代码

 function showDatePicker(){
   //check null safe too
     $('#resultant').datepicker("show");
     $('#resultant').datepicker("option","minDate",$('#from').datepicker('getDate')); 
     $('#resultant').datepicker("option","maxDate",$('#to').datepicker('getDate')); 

 }

Answer 4

那是因为onSelect在您选择了某些内容或将文本放入input的{​​{1}}之后才会触发您想要做的事情是在onClose中设置最小和最大日期来自datepicker

工作jsFiddle

datepicker