Convalida voce data manuale per jQuery UI Datepicker maxDate opzione

Question

Ho jQuery datepicker su una pagina che deve consentire l'inserimento manuale della data, ma deve anche verificare che la data non sia più di un giorno prima. Il controllo di selezione è stato limitato tramite maxDate, ma quando si inserisce manualmente la data, è possibile immettere una data più di un giorno prima. Come fa uno (me) a smetterla? Ecco quello che ho finora:

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

Answer 1

Bene, la risposta di cui sopra è corretta, ma non convalida la forma, l'utente ancora sarà in grado di inviare il modulo,

Ho fatto alcune ricerche, ma non ho potuto trovare ny, finalmente ho scritto questa funzione che funziona bene e convalidare il modulo, e non lasciare inviare il modulo fino a quando non viene inserita la data corretta, Spero che aiuti!

L'unica cosa che devi fare è aggiungere questo codice, e questo sarà applicato a tutti i campi con la classe 'datePicker'.

$(".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

Non sono sicuro se datepicker genera un evento se il valore del controllo è cambiato digitando direttamente. È possibile associare una funzione per l'evento .change():

$(".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

Una possibilità è quella di rimuovere la possibilità di inserire manualmente una data, rendendo i campi di input readonly. Ciò limiterà all'utente di inserire manualmente qualcosa di pazzo e impone l'uso di DatePicker.

Answer 4

Ho avuto esattamente lo stesso requisito e qui è la soluzione che ha funzionato per me come un fascino:

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

violino Modificato here riferimento da Salman A di answer