jQuery datepicker：从 selectedDate 限制日期答案

【问题标题】：jQuery datepicker: Limit date from selectedDatejQuery datepicker：从 selectedDate 限制日期
【发布时间】：2015-01-05 10:09:17
【问题描述】：

我想限制我的日历，以便用户限制日期范围。

例如：如果用户在 From 处选择 2014 年 3 月 10 日，则用户不得在 To 处选择 2014 年 6 月 10 日之后。

这是我制作的代码：

提前致谢。

$(function() {
   $( "#from" ).datepicker({
      maxDate: 0,
      dateFormat : 'dd-mm-yy',
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
        var date = $(this).datepicker('getDate');
        var maxDate = new Date(date.getMonth() + 3);
        $( "#to" ).datepicker( "option", "maxDate", maxDate );
      }
    });

    $( "#to" ).datepicker({
        maxDate: 0,
        onClose: function( selectedDate ) {
          $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
}

【问题讨论】：

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

您可以从 From datepicker 中获取月份，并将 To datepicker 的 maxDate 增加到 3 个月。

$("#from").datepicker({
        dateFormat: "dd-M-yy",            
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#from').datepicker('getDate');
            date2.setMonth(date2.getMonth() + 3);
            $('#to').datepicker('setDate', date2);
            $('#to').datepicker('option', 'maxDate', date2);
        }
    });
    $('#to').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {                
            var from = $('#from').datepicker('getDate');
            console.log(from);
            var to = $('#to').datepicker('getDate');
            if (to <= from) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#from').datepicker('setDate', minDate);
            }
        }
    });

检查这个小提琴：

http://jsfiddle.net/PPSh3/586/

【讨论】：

谢谢。这是一个巨大的帮助。

【解决方案2】：

问题与您使用日期的方式有关。请检查这个fiddle

您必须先将日期解析为有效格式，然后再将其分配给日期选择器的 maxDate 或 minDate 选项：

        var arr = selectedDate.split("-");
        var date = new Date(arr[2] + "-" + arr[1] + "-" + arr[0]);
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var minDate = new Date(y, m + 1, d);
        $("#to").datepicker("option", "minDate", minDate);
        //var date = $(this).datepicker('getDate');
        var maxDate = new Date(y, m + 3, d);
        $("#to").datepicker("option", "maxDate", maxDate);

这同样适用于其他日期选择器：

        var arr = selectedDate.split("-");
        var date = new Date(arr[2] + "-" + arr[1] + "-" + arr[0]);
        $("#from").datepicker("option", "maxDate", date);

希望对你有帮助。

【讨论】：

【解决方案3】：

$(function() {
  $( "#to").datepicker();
  $( "#from").datepicker({
        maxDate: 0,
        dateFormat : 'dd-mm-yy',
        onSelect: function( selectedDate ) {
           $( "#to").datepicker("setDate", selectedDate);
           $( "#to").datepicker( "option", "minDate", selectedDate );
           var date = $(this).datepicker('getDate');
           var maxDate = date.setMonth(date.getMonth() + 3);
           $( "#to" ).datepicker( "option", "maxDate", maxDate );
  }
});

【讨论】：