jquery datepicker: Validar el valor de entrada actual?

Question

He estado usando el plugin Datepicker de jQuery UI. Quiero poder validar si el cuadro de texto de entrada al que está conectado actualmente tiene una fecha válida o no.

Por ejemplo:

Si alguien decide escribir 02/30/2010 Me gustaría ser capaz de pedir alguna manera el plugin si ese valor de entrada actual es una fecha válida (que no lo es en este caso).

¿Alguien sabe cómo se puede hacer esto?

Answer 1

Mira el dateFormat y constrainInput opciones del selector de fechas. http://jqueryui.com/demos/datepicker/#option-dateFormat

Answer 2

Agregué un método "truedate" al validador. Me encantaría darle crédito al código de quien sea, pero no recuerdo dónde lo encontré.

$.validator.addMethod("truedate", function (value) { 
     function GetFullYear(year) { 
      var twoDigitCutoffYear = 10 % 100; 
      var cutoffYearCentury = 10 - twoDigitCutoffYear; 
      return ((year > twoDigitCutoffYear) ? (cutoffYearCentury - 100 + year) : (cutoffYearCentury + year)); 
     } 

    if (value == null || value == '') 
     return true; 
    var yearFirstExp = new RegExp("^\\s*((\\d{4})|(\\d{2}))([-/]|\\. ?)(\\d{1,2})\\4(\\d{1,2})\\.?\\s*$"); 
    try { 
     m = value.match(yearFirstExp); 
     var day, month, year; 
     if (m != null && (m[2].length == 4)) { 
      day = m[6]; 
      month = m[5]; 
      year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3])); 
     } 
     else { 
      var yearLastExp = new RegExp("^\\s*(\\d{1,2})([-/]|\\. ?)(\\d{1,2})(?:\\s|\\2)((\\d{4})|(\\d{2}))(?:\\s\u0433\\.)?\\s*$"); 
      m = value.match(yearLastExp); 
      if (m == null) { 
       return null; 
      } 
      day = m[3]; 
      month = m[1]; 
      year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6])); 
     } 
     month -= 1; 
     var date = new Date(year, month, day); 
     if (year < 100) { 
      date.setFullYear(year); 
     } 
     return (typeof (date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()) ? date.valueOf() : null; 
    } 
    catch (err) { 
     return null; 
    } 
}, "Please enter an actual date."); 

$('form').validate({ 
       rules: { 
        insurance_GL: "truedate", 
       }, 
       messages: { 
        insurance_GL: "Insurance GL date is not valid", 
       } 
}); 

EDITAR Debo haber conseguido a partir de aquí: Jquery datepicker: validate date mm/dd/yyyy

Answer 3

Usted puede resolver su problema haciendo cuadro de texto de sólo lectura y establecer el formato de fecha que lo desee. Por lo tanto, el usuario no puede escribir nada en el cuadro de texto, el usuario solo selecciona el formato de fecha correcto (que configura) desde el selector de fecha. Por favor, mira el siguiente ejemplo.

<p>Date: <input type="text" id="datepicker" size="30" readonly="readonly"/></p>  
<script> 
$(function() { 
    $("#datepicker").datepicker(); 
    $("#datepicker").datepicker("option", "dateFormat",'yy-mm-dd'); 
}); 
</script> 

Answer 4

Aunque esta pregunta es casi dos años, he tratado recientemente con una solución similar y se encontró que la biblioteca Globalize es el mejor enfoque. Por ejemplo, supongamos que tiene un cuadro de texto que tiene asociado un jQueryUI datepicker. Cuando se pierde el foco en el cuadro de texto, puede usar Globalize para validar la fecha ingresada. En este caso, el cuadro de texto se queda en blanco si la fecha no es válida o poner en un formato estándar si la fecha es válida:

$('#myDateTextBox').blur(function() { 
    var parsedDate = Globalize.parseDate($(this).val()); 
    if (parsedDate == null) { 
     $(this).val(''); 
    } 
    else { 
     $(this).val(Globalize.format(parsedDate, 'd')); 
    } 

La biblioteca Globalize le permite especificar una cultura (utilizando el lenguaje de la solicitud idealmente) por lo el usuario puede ingresar una fecha en el formato de su cultura.

Answer 5

Es posible usar JS Date para validar su cadena de fecha.

var myDate = new Date(userInputString); 

if (myDate == "Invalid Date"){ 
// user input is invalid 
} 

También tenga en cuenta que (myDate === "Invalid Date") vuelve falsa incluso para las fechas no válidas. El uso de == funciona bien sin embargo la forma correcta de comprobar es (isNaN(d.getTime()))

Answer 6

Es muy fácil

let value = $(this).val(); 
let format = $(this).datepicker('option', 'dateFormat'); 
let valueIsValid = false; 
try { 
    $.datepicker.parseDate(format, value); 
    valueIsValid = true; 
} 
catch (e) {}