Javascript 无法基于两个日期在datepicker中设置最大和最小范围

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

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

我怎样才能摆脱它

更新：在遵循其中一种方法之后，我得到了这个UI 但年份字段不可见。任何原因？？？

您应该使用“onSelect”表示“from”和“to”，而不是“resultant”。 现在，边界计算在“结果”中的拾取日期之后进行

---

尝试使用下面的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 {};
        }

---

我找到了另一个解决办法

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

---

这是因为onSelect在您选择某个内容或将文本放入

日期选择器的
输入
之前不会启动，您要做的是在from和to
日期选择器的onClose中设置最小和最大日期

工作

在用户未选择“开始日期”和“截止日期”之前，您不能这样做吗？将所选输入框设置为“禁用”为什么不禁用“直到用户设置最小和最大日期”的结果呢？我们不能这样做。无法更改项目要求。请查看更新的问题，您可以告诉我为什么看不到年份吗？？在你的小提琴例子中，year getting displayYupe，小提琴没有问题。我只是想问你，你知道为什么年份会隐藏吗。
$(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();
        }
    });
});

  $("#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 {};
        }

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

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

 }

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

        },
        onClose: function (selectedDate) {            
            $('#resultant').datepicker("option", "minDate", selectedDate);
        }
    });

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

        },
        onClose: function (selectedDate) {
            $('#resultant').datepicker("option", "maxDate", selectedDate);
        }
    });

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