logo标签列表

jQuery 日期选择器 - 根据前一个日历限制最小日期

jquerycalendar
8

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

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

我希望datepicker2有一个最小日期值，该值是在第一个日历中选择的日期加一天。(即，如果第一个日历的日期是5月16日，则第二个日历应将最小日期设置为5月17日)。
8个回答
12

我遇到了同样的情况。我的做法是在第一个日期选择器的“select”事件处理程序中设置第二个日期选择器的minDate值。效果非常好。

编辑：这里有一个例子：

$("#datepicker1").datepicker({
    //normal setup parameters here
    onSelect: function (dateValue, inst) {
        $("#datepicker2").datepicker("option", "minDate", dateValue)
    }
});
1
仅传递日期，例如函数(date){} - Kamal Pundir
2

这里详细的答案并没有真正回答问题，问题是“如何在第一个日期选择器的值基础上加上1天来设置第二个日期选择器的minDate”？

也许对你来说已经太晚了，但由于我很难找到解决方案，所以在这里：

$(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对象。
然后，将此Date对象转换为UNIX时间戳，再加上86400000（一天中的微秒数），得到一个新的Date对象。
接下来，通过调用jQuery DatePicker API的formatDate方法，对刚刚创建的Date对象进行正确的显示格式化（可能与本答案中提供的显示格式不同）。
最后，将datepicker2字段的minDate设置为new_date。
这和tobias86的答案有什么区别？看起来你正在使用不同的事件处理程序，但做着相同的基本事情。 - Jasper
Tobias86的答案将第二个字段的minDate设置为与第一个字段选择的日期相同的日期。而我的答案将第二个字段的minDate设置为第一个字段选择的日期+1天。 - Jivan
如果你在 onClose 事件处理程序中接收到日期，那么可以通过以下代码更简洁地实现：$( "#datepicker2" ).datepicker( "option", "minDate", new Date(selectedDate.getTime() + 86400000))。这将选定日期加上一天，需要注意的是 JavaScript 时间戳精确到毫秒。 - Jasper
maxDate: "+90D"，那真的帮了我很多。 - fubo
0

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

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

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

$(document).ready(function(){    
    var dateToday=new Date();
    $("#datepicker2").datepicker();
    $("#datepicker1").datepicker({  
      minDate: dateToday,   
      onSelect:function(ui, event) { $('#datepicker2').datepicker("option","minDate",ui);}  
      });
});
请在您的回答中提供一些细节。 - Parixit
你需要哪种类型的细节？ - Sulabh Singla
0
试试这个：对我来说很好用。
$("#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 );
    }   
   });

希望有所帮助。 谢谢。
0
$(function() { $( "#datepicker, #datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6" ).datepicker({ minDate: 'today', maxDate: "+90D", showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true, dateFormat: "D, dd MM, yy" }); }); - Romin
其实我有7个日期选择器...我只是简化了问题！！！我希望每个日期选择器的mindate应该比前一个日期选择器的minDAte多1天.... $（function（）{ $（“#datepicker，#datepicker1，#datepicker2，#datepicker3，#datepicker4，#datepicker5，#datepicker6”）。datepicker（{ minDate：'today'， maxDate：“+90D”， showOn：“button”， buttonImage：“images/calendar.gif”， buttonImageOnly：true， dateFormat：“D，dd MM，yy” }）; }）; - Romin
正如您在示例的src中所看到的，在onSelect: function( selectedDate )中实现您的要求。 - DanielB
0
0
$(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', 
    });
    }
});
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接