Jquery datepicker根据第一个日期字段中的选定日期限制第二个日期字段中的日期答案

【问题标题】：Jquery datepicker restrict dates in second date field based on selected date in first date fieldJquery datepicker根据第一个日期字段中的选定日期限制第二个日期字段中的日期
【发布时间】：2013-04-28 17:34:11
【问题描述】：

我正在使用 Jquery 日期选择器，并且我有以下代码，当用户选择日期时，下面的字段将填充日期 +1

$('#dt2').datepicker({
        dateFormat: "dd-M-yy" 
    });

$("#dt1").datepicker(
    {dateFormat: "dd-M-yy", 
    minDate:  0,
onSelect: function(date){
var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate()+1);
            $('#dt2').datepicker('setDate', date2);

我想限制 dt2 字段中的日期，该日期不应低于 dt1 字段中的日期。例如。如果dt1中选择的日期是01-May-2013，则允许用户选择01-May-2013之后的日期，不少于02-May-2013

如何限制日期字段 2 中的日期选择？

【问题讨论】：

标签： jquery html datepicker jquery-ui-datepicker

【解决方案1】：

我为你创建了一个 jsfiddle。我不是 100% 确定它是否“万无一失”，但为了防止用户手动输入日期，您可以将输入设置为 readonlye.g.

<input type="text" id="dt1" readonly="readonly">

目前我检查 dt2 onClose，如果它的日期低于 dt1s 日期，我会更正它。此外，如果在 dt1 中选择了日期，则 dt2 的 minDate 将设置为 dt1 日期 +1。

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 1);
            $('#dt2').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#dt2').datepicker('option', 'minDate', date2);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            var dt2 = $('#dt2').datepicker('getDate');
            //check to prevent a user from entering a date below date of dt1
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });
});

见jsfiddle

【讨论】：

酷！总是乐于提供帮助。
+1，这正是我所需要的。而不是你在#dt2 中的最后一个 if 我将 readonly 属性添加到我的输入元素中。
@SirDerpington 可以仅使用 javascript 来完成吗？并输入日期？
@IngusGraholskis 我没有真正看过，但我想它可以，是的。但是，并非所有主要浏览器都支持输入类型日期。如果我是正确的，例如 Firefox 缺乏支持。所以你可能想给 jQuery 一个可靠的解决方案

【解决方案2】：

我是这样做的--

DEMO

而代码如下

$('#dt2').datepicker({
    dateFormat: "dd-M-yy" 
});

$("#dt1").datepicker({
    dateFormat: "dd-M-yy", 
    minDate:  0,
    onSelect: function(date){            
        var date1 = $('#dt1').datepicker('getDate');           
        var date = new Date( Date.parse( date1 ) ); 
        date.setDate( date.getDate() + 1 );        
        var newDate = date.toDateString(); 
        newDate = new Date( Date.parse( newDate ) );                      
        $('#dt2').datepicker("option","minDate",newDate);            
    }
});

【讨论】：

很棒的答案。

【解决方案3】：

我刚刚更改了您的代码，以便自动设置 date2 的最小日期，如果 date1 大于 date2，则设置 date2=date1

  $("#dt1").datepicker({
            dateFormat: "dd/mm/yy",
            onSelect: function (date) {
                var dt1 = $('#dt1').datepicker('getDate');
                var dt2 = $('#dt2').datepicker('getDate');
                if (dt1 > dt2) {
                    $('#dt2').datepicker('setDate', dt1);
                }
                $('#dt2').datepicker('option', 'minDate', dt1);
            }
        });
        $('#dt2').datepicker({
            dateFormat: "dd/mm/yy",
            minDate: $('#dt1').datepicker('getDate'),
            onClose: function () {
                var dt1 = $('#dt1').datepicker('getDate');
                var dt2 = $('#dt2').datepicker('getDate');
                //check to prevent a user from entering a date below date of dt1
                if (dt2 <= dt1) {
                    var minDate = $('#dt2').datepicker('option', 'minDate');
                    $('#dt2').datepicker('setDate', minDate);
                }
            }
        });

【讨论】：

更好 - 这似乎是在不惹恼用户的情况下做到这一点的正确方法。