Manuelle Datumseingabe Validierung für jQuery UI Datepicker maxDate Option

Question

Ich habe jQuery Datepicker auf einer Seite, die manuelle Eingabe des Datums erlauben muss, muss aber auch validieren, dass das Datum nicht mehr als einen Tag voraus ist. Das Picker-Steuerelement wurde über das maxDate begrenzt, aber wenn Sie das Datum manuell eingeben, können Sie ein Datum eingeben, das mehr als einen Tag voraus ist. Wie hört man das auf? Hier ist, was ich bisher habe:

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({ 
    showOn: "button", 
    maxDate: "+1", 
    showOtherMonths: true 
}); 

Answer 1

Nun, die obige Antwort richtig ist, aber es nicht die Form bestätigen, wird der Benutzer noch in der Lage sein, das Formular abzusenden,

Ich habe einige Nachforschungen gemacht, aber konnte Ny nicht finden, schließlich schrieb ich diese Funktion, die gut funktioniert und das Formular validiert, und lässt das Formular nicht einreichen, bis das richtige Datum eingegeben wird, hoffe es hilft!

Das einzige, was Sie tun müssen, ist diesen Code hinzuzufügen, und dann wird dies auf alle Felder mit der Klasse 'datePicker' angewendet.

$(".datePicker").datepicker({ 
      dateFormat: 'd/mm/yy', 
      changeMonth: true, 
      changeYear: true, 
      firstDay: 1, 
      minDate: Date.parse("1900-01-01"), 
      maxDate: Date.parse("2100-01-01"), 
      yearRange: "c-90:c+150" 
     }); 

     // validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql 
     $(function() { 
      $.validator.addMethod(
       "date", 
       function (value, element) { 

        var minDate = Date.parse("1900-01-01"); 
        var maxDate = Date.parse("2100-01-01"); 
        var valueEntered = Date.parse(value); 

        if (valueEntered < minDate || valueEntered > maxDate) { 
         return false; 
        } 
        return !/Invalid|NaN/.test(new Date(minDate)); 
       }, 
       "Please enter a valid date!" 
      ); 
     }); 

Answer 2

Ich bin nicht sicher, ob Datepicker ein Ereignis auslöst, wenn der Wert des Steuerelements durch direktes Eintippen geändert wird. Sie können eine Funktion zum .change() Ereignis binden:

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({ 
    dateFormat: "mm-dd-yy",     // since you have defined a mask 
    maxDate: "+1", 
    showOn: "button", 
    showOtherMonths: true 

}).on("change", function(e) { 
    var curDate = $(this).datepicker("getDate"); 
    var maxDate = new Date(); 
    maxDate.setDate(maxDate.getDate() + 1); // add one day 
    maxDate.setHours(0, 0, 0, 0);   // clear time portion for correct results 
    if (curDate > maxDate) { 
     alert("Invalid date"); 
     $(this).datepicker("setDate", maxDate); 
    } 
}); 

Demo here

Answer 3

Eine Möglichkeit ist es, die Fähigkeit zu entfernen, indem die Eingabefelder readonly manuell ein Datum eingeben. Dies wird den Benutzer davon abhalten, irgendetwas Verrücktes manuell einzugeben, und erzwingt die Verwendung des Datumsspeichers.

Answer 4

ich hatte genau die gleiche Anforderung und hier ist die Lösung, die für mich wie ein Zauber gearbeitet:

$(".datepicker").attr("placeholder", "mm-dd-yyyy").change(function(){ 
    $(this).datepicker('setDate', $(this).datepicker('getDate')); 
    }).datepicker({ 
     showOn: "button", 
     maxDate: "+1", 
     showOtherMonths: true 
    }); 

Geändert Geige here von Salman A dem referenzierten answer