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

Question

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

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

如果用户1选择fromdate ex（2017年6月15日），则在“Todate”字段中，将阻止在“fromdate”中选择的所有以前的日期，并且“Todate”字段仅可用于选择未来的日期

如果用户1选择了Todate ex（2017年6月15日），则在Fromdate字段中，所有未来的日期都将被阻止，并且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

我在我的datepicker 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');
             }
         });
})

null

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

Answer 2

下面的代码适用于您：

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