Question

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

我有两个文本框FromDate和Todate 这取决于用户他将首先选择哪个领域，他有2个选项来自日期和todate。

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

如果用户，1st选择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

以下代码适合您：

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

我得到了解决方案问题发生在我的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');
             }
         });
})

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

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

2 个答案: