example - jquery ui datepicker es js

Jquery Datepicker Chrome

Question

Cuando usamos jQuery UI Datepicker, encontramos un problema cuando lo usamos en Google Chrome: cuando ingresamos una fecha con un día superior a 12, no lo acepta como una fecha válida, esto es porque Chrome piensa que el formato de fecha es mm / dd / aaaa Intentamos solucionar esto agregando código para intentar forzar los ajustes de fecha en dd / mm / aaaa

$(''.date'').datepicker({ dateFormat: "dd/mm/yy" });

¿Hay alguna manera de resolver este problema, por lo que nuestro datepicker aceptará valores dd / mm / aaaa? Solo tenemos este problema en google Chrome, el datefix funciona para firefox, es decir, y safari. Estamos utilizando ASPX y MVC3 con este proyecto.

Si alguien pudiera resolver nuestro problema, sería genial

Gracias

Answer 1

Crea un nuevo archivo jquery.validate.date.js.

Pegue el siguiente código dentro del archivo.

 $(function () {
    $.validator.methods.date = function (value, element) {
      if ($.browser.webkit) {
        var d = new Date();
        return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
      }
      else {
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
    }
  };
});

Ahora asegúrese de que este archivo se cargue después del archivo jquery.validate.js.

Answer 2

Debe sobrescribir la validación de fecha ''en-US'' predeterminada con la validación de fecha ''en-GB''.

• ''en-US'' => ''mm / dd / aa''
• ''en-GB'' => ''dd / mm / aa''

Solución:

agregue un archivo "jquery.validate.date.js" en su proyecto y coloque el siguiente código en él:

//To Fix jQuery date format ''en-GB'' validation problem in Chrome
$(function () {
    $.validator.addMethod(
        "date",
        function (value, element) {
            var bits = value.match(/([0-9]+)/gi), str;
            if (!bits)
                return this.optional(element) || false;
            str = bits[1] + ''/'' + bits[0] + ''/'' + bits[2];
            return this.optional(element) || !/Invalid|NaN/.test(new Date(str));
        },
        "Please enter date in valid format [dd/mm/yyyy]"
    );
});

y asegúrese de que se cargue después de ''jquery.validate.min.js'':

<script type="text/javascript" src="/Scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.date.js"></script>

Answer 3

He tenido el mismo problema y está relacionado con todos los navegadores web basados ​​en Webkit. Si establece M en mayúscula, el cuadro de texto muestra la polilla con letras. La mejor solución para mí fue anular la función de fecha de validación de jquery.validate.js

Crea jquery.validate.date.js y asegúrate de que esté cargado después de jquery.validate.js

Agregue el siguiente código a jquery.validate.date.js

$(function() {
    $.validator.methods.date = function (value, element) {
        if ($.browser.webkit) {

            //ES - Chrome does not use the locale when new Date objects instantiated:
            var d = new Date();

            return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
        }
        else {

            return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
        }
    };
});

Answer 4

La solución user1011138 no funciona para mí ya que .toLocaleDateString(value) no analiza el value cadena

aquí está la solución que se me ocurrió => en jquery.validate.js encontrar esta definición de función: "fecha: función (valor, elemento)" y reemplazar el código con:

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function (value, element) {
    var d = value.split("/");
    return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
},

Answer 5

Las soluciones anteriores no funcionaron porque el control del navegador jquery está en desuso lanzando jquery.validate.min.js Uncaught TypeError: Cannot read property ''webkit'' of undefined. Exception occurred when checking element DateOfBirth, check the ''date'' jquery.validate.min.js Uncaught TypeError: Cannot read property ''webkit'' of undefined. Exception occurred when checking element DateOfBirth, check the ''date''

En mi proyecto, uso momentjs con bootstrap datetimepicker , por lo que esta solución funciona muy bien:

 $(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, ''DD/MM/YYYY'').isValid();
  };
});

Llamar a este derecho después de cargar jquery.validate()

Answer 6

 $.validator.methods.date = function (value, element) {                
            if ($.browser.webkit) {                    
                var d = value.split("/");   
                return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
              }
            else {
                return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
            }
        };