Estoy tratando de usar la más simple posible escenario de uso de un selector de fecha en los diferentes navegadores. Sospecho que estoy haciendo algo muy simple el camino equivocado, pero después de mucho buscar alrededor, todavía no he encontrado una solución. A continuación se muestra algunos ejemplos de código que representa lo que estoy intentando.

Si yo uso Chrome (v12.0.742.122) y elegir una fecha desde el selector de como 13/08/2011 el jQuery validación de la lógica no va a permitir la página para enviar a pesar de que yo he especificado de forma explícita el formato ‘dd/mm/aa’.

Si puedo cambiar el formato ‘dd/M/aa’ y elegir una fecha como 13/Ago/2011 funciona en Chrome, pero luego no presentar para mí en IE (v8.0.7600.16385). En FireFox (v3.6.18) ambos formatos de trabajo.

Lo que la validación de secuencia de comandos necesito para ser capaz de soportar los formatos de fecha de ‘dd/mm/aa’ en Chrome?

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
  <script type="text/javascript" src="jquery-1.4.4.js"></script>
  <script type="text/javascript" src="jquery.validate.js"></script>
  <script type="text/javascript" src="jquery.validate.unobtrusive.js"></script>
  <script type="text/javascript" src="jquery-ui.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
    $('.date').datepicker({ dateFormat: 'dd/mm/yy' });
            $.validator.addMethod("dateRule", function(value, element) {
      return true;
    },
    "Error message");
      });
  </script>
 </head>
 <body>
    <form>
        Date: <input type="text" name="myDate" class="date dateRule" />
        <input type="submit" />
    </form>
 </body>
</html>
InformationsquelleAutor sipwiz | 2011-08-02

12 Comentarios

  1. 49

    Cuatro horas más tarde por fin me encontré con la respuesta. Por alguna razón Chrome parece que tiene incorporado predilección NOS utilice los formatos de fecha, donde IE y FireFox son capaces de ser sensibles y usar la configuración regional del sistema operativo.

    jQuery.validator.methods["date"] = function (value, element) { return true; } 
    • No esta claro la validación de la fecha?
    • Es este formato de fecha validador o simplemente I don't care?
    • Me tomó alrededor de una hora para encontrar la respuesta aquí. Esta línea de código funciona a la perfección.
    • De donde es esta línea supone que deben ser colocados?
    • se podría poner casi en cualquier lugar que se va a ejecutar antes de su fecha de validación de la necesidad de ocurrir. Lo tengo en el $(document).listo función.
    • Esto ignora la validación !! ¿Es en serio ?!
    • Gracias por la ayuda, me salvó un montón de dolor 🙂
    • IE and FireFox NO utilice el configuración regional del sistema operativo – sólo que si su introduzca 76/85/2015 que producen una fecha aún por que no es una fecha válida. Sólo Chome informa correctamente como una fecha no válida. Esta respuesta significa que usted nunca conseguirá la validación del lado del cliente.
    • Donde exactamente para agregar una línea de código?

  2. 48

    Puede utilizar el Globalize.js plugin disponible aquí: https://github.com/jquery/globalize

    A continuación, simplemente redefinir el método validate en su sitio web principal del archivo de secuencia de comandos como para (evitar edición de la jquery.validate.js archivo de la biblioteca como puede que desee actualizar en el futuro):

    $.validator.methods.date = function (value, element) {
        return this.optional(element) || Globalize.parseDate(value, "d/M/y", "en");
    }
    • Esto debe ser considerado como la respuesta. +1
    • A nadie buscando esto… debería haber un gran «M» i.e d/M/y como una pequeña indicar los minutos que funciona cuando no debería!
    • fijo, saludos 🙂
    • Muchas gracias por tu consejo!!!!!!! DIOS LOS BENDIGA!!!!!!
    • esto funcionó en mi caso concreto
  3. 22

    Sé que soy un poco tarde a la fiesta, pero aquí está la solución que se usa para Chrome validación de la no aceptación del reino unido formato de fechas. Un simple plug and play de validación, no depender de ningún plugin o modificación de los archivos. Se aceptará cualquier fecha entre 1/1/1900 y 31/31/2999, por lo que EE.UU. o el reino unido formato. Obviamente hay fechas no válidas que colarse, pero usted puede modificar la expresión al contenido de su corazón. Este ajustaba a mis necesidades, ya que se utilizará en una zona de poco tráfico del sitio, con la validación del lado del servidor. El área del sitio en cuestión está construido con ASP.net MVC.

    jQuery.validator.methods.date = function(value, element) {
        var dateRegex = /^(0?[1-9]\/|[12]\d\/|3[01]\/){2}(19|20)\d\d$/;
        return this.optional(element) || dateRegex.test(value);
    };
    • He utilizado una expresión regular que es un poco más complejo que esto, pero menos complejo que el masivo en otra respuesta. No comprobar el final de la cadena, con el fin de permitir a los tiempos a seguir. var dateRegex = /^(0?[1-9]|[12]\d|3[01])\/(0?[1-9]|10|11|12)\/(19/20)\d\d\D/; Fuera de la gama de problemas son manejados por la restricción de la fecha o fecha y hora del selector.
    • En realidad, hacer que var dateRegex = /^(0?[1-9]|[12]\d|3[01])\/(0?[1-9]|10|11|12)\/(19/20)\d\d(\D.*)?$/; Ahora que no admite caracteres finales en los casos donde es sólo una fecha (yo estaba trabajando con datetimes)
    • Gracias por esas David :). Solo para aclarar, para cualquiera que lo encuentre, la parte superior de uno acepta el reino unido fecha seguida de un no-dígito y, a continuación, nada más. El de abajo se aceptan en el reino unido fecha de formato único. Ellos proporcionan un mejor ajuste para el reino unido sólo el formato de las fechas, aunque todavía hay un par de casos de borde perdidas (como 31/02).
    • Gracias! Impresionante
    • Esta es la mejor respuesta pragmática la combinación de lado cliente y servidor de validación. Acabo de pasar varias horas de lucha libre con el de globalizar y relacionados con globalizar js archivos sin llegar a trabajar en todos los de IE, Chrome y Firefox y, finalmente, la copia de todo lo que fuera. Si yo hubiera usado esta desde el principio me he pasado 10 minutos sin problemas evidentes para el usuario.
    • Gracias…Esto es mucho más limpio, a continuación, añadir otra librería jquery.

  4. 18

    Se parece a este problema ha sido planteado con el equipo de JQuery.

    https://github.com/jzaefferer/jquery-validation/issues/153

    Se ve como la solución por ahora es usar dateITA en additional-methods.js

    Se parece a esto:

    jQuery.validator.addMethod(
        "dateITA",
        function(value, element) {
            var check = false;
            var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
            if( re.test(value)){
                var adata = value.split('/');
                var gg = parseInt(adata[0],10);
                var mm = parseInt(adata[1],10);
                var aaaa = parseInt(adata[2],10);
                var xdata = new Date(aaaa,mm-1,gg);
                if ( ( xdata.getFullYear() == aaaa ) 
                       && ( xdata.getMonth () == mm - 1 ) 
                       && ( xdata.getDate() == gg ) )
                    check = true;
                else
                    check = false;
            } else
                check = false;
            return this.optional(element) || check;
        },
        "Please enter a correct date"
    );

    Si además añadimos que el validador a continuación, puede adjuntar a su selector de fecha para el ‘.dateITA’ de la clase.

    Hasta ahora ha funcionado bien para mí, para mí conseguir más allá de este estúpido problema en Chrome.

  5. 2

    Este sigue siendo un problema en .net mvc4, donde el EditorFor DateTime todavía produce un data-val-date atributo, a pesar de la clara documentación de jQuery validation plugin que no lo uso!!! Esperemos que microsoft corrige esto y data-val-date nunca se escuchó de nuevo!

    Mientras tanto, usted puede utilizar las sugerencias de la biblioteca a través de modernizr:

    yepnope({
        test: isNaN(Date.parse("23/2/2012")),
        nope: 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js',
        complete: function () {
            $.validator.methods.date = $.validator.methods.dateITA
        }
    });

    o si no quieren usar yepnope/modernizr, y para deshacerse de la UTC componente de la dateITA método (si el uso de esta biblioteca para entrar en un local de tiempo, las fechas no siempre va a validar el 1 o el último día del mes, salvo en el Greenwich línea – es decir, UTC +0):

    (function ($) {
        var invokeTestDate = function () {
            return $.validator.methods.date.call({
                optional: function () {
                    return false;
                }, (new Date(2012,8,23)).toLocaleDateString(), null);
        };
        if (invokeTestDate()) {
            return;
        }
    
        //http://docs.jquery.com/Plugins/Validation/Methods/date
    
        $.validator.methods.date = function (value, element) {
            //ES - Chrome does not use the locale when new Date objects instantiated:
            //return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
            var d = new Date();
            return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
        }
    })(jQuery);
  6. 2

    Utilizamos el siguiente para trabajar en nuestros proyectos;

    if ($.validator) {
        $.validator.addMethod("date",
            function (value, element, params) {
                if (this.optional(element)) {
                    return true;
                }
    
                var ok = true;
                try {
                    $.datepicker.parseDate("dd/mm/yy", value);
                }
                catch (err) {
                    ok = false;
                }
                return ok;
            });
    }
  7. 1

    He encontrado el más simple corrección de este error para ser el fragmento de código siguiente después de llamar a su archivo de validación;

        jQuery.validator.methods["date"] = function (value, element){
            var shortDateFormat = "dd/mm/yy";
            var res = true;
            try {
                $.datepicker.parseDate(shortDateFormat, value);
            } catch (error) {
                res = false;
            }
            return res;
        }

    Incluso en versiones encontradas en 2016 im sigue teniendo este problema sin el código de arriba en Chrome y Firefox no.

    Esta es mi solución preferida, ya que no requiere de bibliotecas adicionales o plugins para trabajar.

    He encontrado este fragmento de código, mientras que googlear el tema aquí.

  8. 1

    De mayo de este código ayudarle.

    $.validator.addMethod(
    "date",
    function(value, element) {
    var check = false;
    var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
    var reBR = /^\d{4}\-\d{1,2}\-\d{1,2}$/;
    if( re.test(value)){
    var adata = value.split('/');
    var gg = parseInt(adata[0],10);
    var mm = parseInt(adata[1],10);
    var aaaa = parseInt(adata[2],10);
    var xdata = new Date(aaaa,mm-1,gg);
    if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
    check = true;
    else
    check = false;
    } else if( reBR.test(value)){
    var adata = value.split('-');
    var aaaa = parseInt(adata[0],10);
    var mm = parseInt(adata[1],10);
    var gg = parseInt(adata[2],10);
    var xdata = new Date(aaaa,mm-1,gg);
    if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
    check = true;
    else
    check = false;
    } else
    check = false;
    console.log(check);
    return this.optional(element) || check;
    },
    "Por favor insira uma data válida"
    );
    • ¿De dónde sacaste este código? ¿Cree usted mismo? ¿Por qué crees que funcionará?
  9. 0

    debe cambiar el dateRule método de definir en validar para (el regex es sólo una simple, por ejemplo):

    $.validator.addMethod(
    "dateRule",
    function(value, element) {
    return value.match(/^\d\d?\/\d\d?\/\d\d$/);
    },
    "Please enter a date in the format dd/mm/yy"
    );

    puede cambiar el regex para lo que usted desea. Tengo este regex para la fecha de aquí que apoya a M/D/YY o M/D/AAAA o MM/DD/AAAA o MM/DD/YY: 1/1/1920 a través de 12/31/2019; el 29 de Febrero y el 30 de siempre permitido

    ^((0?[13578]|10|12)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[01]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1}))|(0?[2469]|11)(-|\/)(([1-9])|(0[1-9])|([12])([0-9]?)|(3[0]?))(-|\/)((19)([2-9])(\d{1})|(20)([01])(\d{1})|([8901])(\d{1})))$
    • Ese sería el siguiente paso. En el momento en que ni siquiera puedo conseguir Chrome para pasar la validación por siempre devuelve true.
    • yo no puede replicar el problema. me parece que ser capaz de enviar un formulario. podría intentar no incluidos jquery.validate.unobtrusive.js y la adición de un $(‘form’).validate();
    • Excluyendo el jquery.validate.unobtrusive.js obtiene Cromo de enviar el formulario. Ahora necesito entender cómo configurar la discreta regla de validación para el trabajo.
    • esto podría ayudar a: haga clic aquí
    • Esto no parece ayudar en la obtención de Chrome para validar el formato dd/mm/aaaa ya que también permite mm/dd/aaaa
  10. 0

    Esta es la única solución que funcionó para mí:
    http://www.codeproject.com/Tips/579279/Fixing-jQuery-non-US-Date-Validation-for-Chrome

     jQuery.extend(jQuery.validator.methods, {
    date: function (value, element) {
    var isChrome = window.chrome;
    //make correction for chrome
    if (isChrome) {
    var d = new Date();
    return this.optional(element) || 
    !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
    }
    //leave default behavior
    else {
    return this.optional(element) || 
    !/Invalid|NaN/.test(new Date(value));
    }
    }
    }); 
  11. 0

    O podríamos intentar sobrescribir el validador en lugar de ignorarlo.

    $.validator.addMethod("date", function (value, element) {
    var result = true;
    try {
    $.datepicker.parseDate('dd/mm/yy', value);
    }
    catch (err) {
    result = false;
    }
    return result;
    });

Dejar respuesta

Please enter your comment!
Please enter your name here