jquery minDate不能用於日期驗證

Question

我必須輸入框，其中每個從jquery datepicker接收日期。現在我試圖從第一個輸入中驗證日曆，以便不允許過去幾天中以前的日期不再存在。

參照這個問題，我添加以下代碼下的「numberOfMonts」，它發生在以下幾點：

minDate: 0, 

我選擇「從」我想日期，但是當點擊「到「日期，我仍然可以在」從現場「選擇日期之前選擇日期。

希望你可以從我snippet here

明白這是我所沒有的驗證工作的代碼。 如何正確驗證日曆以不選擇舊日期？

這裏我完全JS：

jQuery(document).ready(function(){ 
    $("ul").on("click", ".init", function() { 
     $(this).closest("ul").children('li:not(.init)').toggle(); 
    }); 
    var allOptions = $("ul").children('li:not(.init)'); 
    $("ul").on("click", "li:not(.init)", function() { 
    allOptions.removeClass('selected'); 
    $(this).addClass('selected'); 
    $("ul").children('.init').html($(this).html()); 
    allOptions.toggle(); 
    console.log($('.selected .value').text()); 
    }); 
    var txtFromDate, txtToDate; 
    $("#txtFrom").datepicker({ 
    dateFormat: "d/M/yy", 
    numberOfMonths: 1, 
    minDate: 0, 
    onSelect: function(selected) { 
     txtFromDate = selected; 
     var dt = new Date(selected); 
     dt.setDate(dt.getDate() + 1); 
     $("#txtTo").datepicker("option", "minDate", dt); 
    } 
    }); 
    $("#txtTo").datepicker({ 
    numberOfMonths: 1, 
    defaultDate: "+1w", 
    onSelect: function(selected) { 
     txtToDate = selected; 
     var dt = new Date(selected); 
     dt.setDate(dt.getDate() - 1); 
     $("#txtFrom").datepicker("option", "maxDate", dt); 
    } 
    }); 

    $('a#atributo').click(function() { 
    var monthNames = [ 
     "Jan", "Feb", "Mar", 
     "Apr", "May", "Jun", "Jul", 
     "Aug", "Sep", "Oct", 
     "Nov", "Dec" 
     ]; 

    var date1 = $("#txtFrom").datepicker('getDate'), 
     day_1 = date1.getDate(), 
     month_1 = date1.getMonth() + 1,    
     year_1 = date1.getFullYear(); 

    var date2 = $("#txtTo").datepicker('getDate'), 
     day_2 = date2.getDate(), 
     month_2 = date2.getMonth() + 1,    
     year_2 = date2.getFullYear(); 


    var people = $('#search-pax :selected').val(); 

    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people); 
    }); 
}); 

我如何驗證日曆正確

在此先感謝

Answer 1

試試這個JS：

$(document).ready(function() { 

    $("#dt1").datepicker({ 
    dateFormat: "dd-M-yy", 
    minDate: 0, 
    onSelect: function (date) { 
     var dt2 = $('#dt2'); 
     var startDate = $(this).datepicker('getDate'); 
     var minDate = $(this).datepicker('getDate'); 
     dt2.datepicker('setDate', minDate); 
     startDate.setDate(startDate.getDate() + 30); 
     //sets dt2 maxDate to the last day of 30 days window 
     dt2.datepicker('option', 'maxDate', startDate); 
     dt2.datepicker('option', 'minDate', minDate); 
     $(this).datepicker('option', 'minDate', minDate); 
    } 
    }); 
    $('#dt2').datepicker({ 
    dateFormat: "dd-M-yy" 
    }); 
}); 

HTML示例可能看起來像e：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all"> 
<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/> 

Answer 2

// Change inside onSelect as follow : 
$("#txtFrom").datepicker({ 
    dateFormat: "d/M/yy", 
    numberOfMonths: 1, 
    minDate: 0, 
    onSelect: function(selected) { 
     $('#txtTo').datepicker('option', { 
      minDate: $(this).datepicker('getDate') 
     }); 
    } 
});