Jquery datepicker根据第一个日期字段中的选定日期限制第二个日期字段中的日期，反之亦然

Question

Jquery datepicker 根据第一个日期字段中的选定日期限制第二个日期字段中的日期，反之亦然（根据第二个日期字段中的选定日期限制第一个日期字段中的日期）

我有 2 个文本框 FromDate 和 Todate 这取决于用户他将首先选择哪个字段，他有 2 个选项 fromdate 和 todate。

如果用户，1st 选择 fromdate ex(2017 年 6 月 15 日)，则在 Todate 字段中，fromdate 中选择的所有先前日期都将被阻止，Todate 字段仅可用于选择未来日期

如果用户，1st 选择 Todate ex(2017 年 6 月 15 日)，那么在 Fromdate 字段中，所有未来的日期都将被阻止，Fromdate 字段只能选择过去的日期

另一个例子 如果从日期选择为（2017 年 6 月 15 日），则 todate 将无法选择小于 2017 年 6 月 15 日的日期，todate 只能选择 2017 年 6 月 15 日之后的日期。

如果选择 Todate 为（2017 年 6 月 15 日），则 fromdate 将无法选择大于 2017 年 6 月 15 日的日期，fromdate 将只能选择小于 2017 年 6 月 15 日的日期。

下面是我的代码

    <div class="input-group date" id="datetimepicker1">
                                        @Html.TextBoxFor(model => model.FromDate, "{0:d}", new { tabindex = "2", @class = "form-control" })
                                        <span class="input-group-addon" style="cursor: pointer;">
                                            <span class="fa fa-calendar"></span>
                                        </span>

                                    </div>
<div class="input-group date" id="datetimepicker2">
                                        @Html.TextBoxFor(model => model.ToDate, "{0:d}", new { tabindex = "3", @class = "form-control" })
                                        <span class="input-group-addon" style="cursor: pointer;">
                                            <span class="fa fa-calendar"></span>
                                        </span>

                                    </div>
<script>
  $(document).ready(function () {
    var date_input = $('#datetimepicker1'); //our date input has the name "date"
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
    var options = {
        format: 'mm/dd/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    };
    date_input.datepicker(options);
})

$(document).ready(function () {
    var date_input = $('#datetimepicker2'); //our date input has the name "date"
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
    var options = {
        format: 'mm/dd/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    };
    date_input.datepicker(options);
})
</script>

Answer 1

以下代码将为您工作：

$("#FromDate").datepicker({
        changeMonth: true,
        changeYear: true,
         yearRange: '-30:+1',
        onSelect: function (dateText) {
            //self.validateDate();            
        },
        onClose: function (selectedDate, instance) {
            if (selectedDate !== '') {               
                var orginalDate = new Date(selectedDate);
                var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() + 3));
                $("#ToDate").datepicker("option", "minDate", selectedDate);
                $("#ToDate").datepicker("option", "maxDate", date);


            }
        }
    });
    $("#ToDate").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '-30:+1',       

        onSelect: function (dateText) {
            //self.validateDate();
        },
        onClose: function (selectedDate) {
            var orginalDate = new Date(selectedDate);
            var date = new Date(new Date(orginalDate).setMonth(orginalDate.getMonth() -3 ));
            $("#FromDate").datepicker("option", "minDate", date);
            $("#FromDate").datepicker("option", "maxDate", selectedDate);
        }        
    });

Answer 2

我得到了解决方案 问题出在我的日期选择器 jquery 中 下面是我使用的代码，效果很好

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

<script>

$(document).ready(function () {
$('#from').datepicker(
     {

         beforeShow: function () {
             $(this).datepicker('option', 'maxDate', $('#to').val());
         }
     });
$('#to').datepicker(
         {
             defaultDate: "+1w",
             beforeShow: function () {
                 $(this).datepicker('option', 'minDate', $('#from').val());
                 if ($('#from').val() === '') $(this).datepicker('option');
             }
         });
})

<div> 

    <label for="from">From</label> <input type="text" id="from" name="from" class="form-control datepicker" /> <label for="to">to</label> <input type="text" id="to" class="form-control datepicker" name="to" />
</div>