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

小编典典

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

html

我正在使用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中的日期选择？

阅读 434

2020-05-10

共1个答案

小编典典

我为您创建了一个jsfiddle。我不是100％肯定，如果它是“万无一失”，但以防止用户手动输入一个日期，你可以设置输入readonly如

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

目前，我检查了dt2 onClose，如果它的日期低于dt1s日期，我将其更正。同样，如果在dt1中选择了日期，则dt2
的minDate设置为dt1 date +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);
            }
        }
    });
});

2020-05-10