jQuery Datepicker - 根据之前的日历限制 minDate

Question

我有 2 个日期选择器，如下所示：

$(function() {
    $( "#datepicker1, #datepicker2" ).datepicker({
    minDate: 'today',
    maxDate: "+90D",
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: "D, dd MM, yy"
    });
});

我希望 datepicker2 在第一个日历 + 1 天中选择最小日期值。（即，如果第一个日历日期是 5 月 16 日，第二个日历应将最小日期设置为 5 月17日）

Answer 1

我也有同样的情况。我所做的是在第一个日期选择器的“select”事件处理程序中设置第二个日期选择器的 minDate 值。工作起来就像一个魅力。

编辑：这是一个例子：

$("#datepicker1").datepicker({
    //normal setup parameters here
    onSelect: function (dateValue, inst) {
        $("#datepicker2").datepicker("option", "minDate", dateValue)
    }
});

Answer 2

这里的详细答案并没有真正回答这个问题，即“如何根据第一个日期选择器的值设置第二个日期选择器的 minDate + 1 DAY”？

对你来说可能已经太晚了，但由于我很难找到解决方案，这里是：

$(function() {
    $( "#datepicker1" ).datepicker({
        minDate: 'today',
        maxDate: "+90D",
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        dateFormat: "D, dd MM, yy"
        onClose: function(selectedDate, inst) {
            var selected_date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
            new_date = new Date(selected_date.getTime() + 86400000);
            new_date = jQuery.datepicker.formatDate('dd/mm/yy', new_date);
            $( "#datepicker2" ).datepicker( "option", "minDate", new_date);
  }
    });
});

说明：

你必须从 datepicker1 字段获取一个包含年、月、日的日期对象。

然后，调用此 Date 对象并将其转换为 UNIX 时间戳，并在其中添加 86400000（一天的微秒数）。这会给你一个新的 Date 对象。

之后，通过调用 jQuery DatePicker API 的 formatDate 方法，将刚刚创建的 Date 对象格式化为正确的显示（可能不是本答案中提供的显示）。

最后，将 datepicker2 字段的 minDate 与 new_date 一起应用。

Answer 3

看一下范围示例： http://jqueryui.com/demos/datepicker/#date -范围

Answer 4

我推荐 Filament Group 的 DateRange Picker： http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework /

我过去曾使用过它，并且设置起来很容易。

Answer 5

这是另一个解决方案。在这种情况下，我使用“日期从”和“日期到”作为日期选择器中的默认文本。

$(function () {
        $("#DateFrom").datepicker({

            maxDate: new Date(new Date($('#DateTo').val()).valueOf()),
            beforeShow: function () {
                if ($("#DateFrom").val() == "Date From" && $("#DateTo").val() == "Date To") {
                    $("#DateFrom").datepicker('option', { minDate: null, maxDate: null });
                }

            },
            onSelect: function (dateText, inst) {
                var currentDate = new Date(dateText);
                var valueofcurrentDate = currentDate.valueOf();
                var newDate = new Date(valueofcurrentDate);
                $("#DateTo").datepicker("option", "minDate", newDate);


            }

        });

        $("#DateTo").datepicker({

            minDate: new Date(new Date($('#DateTo').val()).valueOf()),
            beforeShow: function () {
                if ($("#DateFrom").val() == "Date From" && $("#DateTo").val() == "Date To") {
                    $("#DateTo").datepicker('option', { minDate: null, maxDate: null });
                }

            },
            onSelect: function (dateText, inst) {
                var currentDate = new Date(dateText);
                var valueofcurrentDate = currentDate.valueOf();
                var newDate = new Date(valueofcurrentDate);
                $("#DateFrom").datepicker("option", "maxDate", newDate);



            }

        });



 //checking for key combinations which are allowed

        $("#DateFrom").keypress(function (e) {
            switch (e.keyCode) {
                case 46:  // delete                      
                case 8:  // backspace                       
                    break;
                default:
                    e.preventDefault();
                    break;
            }
        });

        $("#DateTo").keypress(function (e) {
            switch (e.keyCode) {
                case 46:  // delete                      
                case 8:  // backspace                      
                    break;
                default:
                    e.preventDefault();
                    break;
            }
        });
    });

Answer 6

您必须初始化两个日期选择器。

$(document).ready(function(){    
    var dateToday=new Date();
    $("#datepicker2").datepicker();
    $("#datepicker1").datepicker({  
      minDate: dateToday,   
      onSelect:function(ui, event) { $('#datepicker2').datepicker("option","minDate",ui);}  
      });
});

Answer 7

试试这个：对我来说效果很好

$("#datepicker1").datepicker({
    //normal setup parameters here
    onSelect: function(date) {
              var           minDateObject= new Date();//compose the date you want to set
          $( "#datepicker2" ).datepicker( "option", "minDate",minDateObject );
    }   
   });

希望会有帮助。
谢谢。

Answer 8

$(document).ready(function(){ 
    $("#txtStartDate").datepicker({
    //pick the first date and must not max today
        dateFormat: 'dd/mm/yy',
        changeYear: true,
        maxDate: '+0D', 
    onSelect: function (dateValue){
        //onselect set the min of txtEndDate to be the current txtStartDate value
        $("#txtEndDate").datepicker({ 
        dateFormat: 'dd/mm/yy',
        changeYear: true,
        minDate: dateValue,
        maxDate: '+0D', 
    });
    }
});
});