Validación manual de entrada de fecha para jQuery UI Datepicker opción maxDate

Question

Tengo jQuery datepicker en una página que necesita permitir la entrada manual de la fecha, pero también necesita validar que la fecha no es más que un día antes. El control del selector se ha limitado a través de maxDate, pero cuando uno ingresa manualmente la fecha, pueden ingresar una fecha con más de un día de anticipación. ¿Cómo puede uno (yo) detener eso? Aquí es lo que tengo hasta ahora:

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

Answer 1

Bueno, la respuesta es correcta, pero no valida el formulario, el usuario será capaz de enviar el formulario,

He realizado algunas búsquedas, pero no he encontrado ny, finalmente escribí esta función que funciona bien y valida el formulario, y no dejo el formulario hasta que se ingrese la fecha correcta, ¡espero que ayude!

Lo único que debe hacer es agregar este código, y luego esto se aplicará a todos los campos con la clase '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

No estoy seguro de si selector de fechas dispara un evento si el valor del control se cambia tecleando directamente. Puede enlazar una función al 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 opción es eliminar la posibilidad de introducir manualmente una fecha en la toma de los campos de entrada readonly. Esto restringirá al usuario de ingresar manualmente algo loco, y fuerza el uso del selector de fecha.

Answer 4

que tenían exactamente el mismo requisito y aquí está la solución que funcionó para mí como un encanto:

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

violín Modificado here referencia desde Salman Una de answer