Utilizando jQueryMask Plugin para formato de fechas en diferentes patrones

jQuery Plugin de máscara es una gran librería de Javascript para campos del formato para la presentación de o para forzar una entrada adecuadamente por los usuarios.

Aquí, Se muestra cómo hacer frente a la entrada o un elemento HTML para mostrar las fechas cuando la fecha de la fuente tiene un formato diferente del elemento de destino.

Ejemplo:

• Tenemos una fecha y hora con Año-mes-día hora:Minutos:Segundos y tiene que mostrar sólo el Día de mes de año parte.
• Tenemos da fecha de Año-mes-día y necesidad de dar formato a Día/mes/año.

jQueryMask es muy fácil de usar. No necesita mucho para enmascarar todo lo que necesites. Echa un vistazo a los ejemplos en su sitio de Internet.

Si necesita dar formato a un campo de fecha simple (incluso en un elemento input no), sólo tiene que utilizar el código siguiente.

jQuery('[datos de papel ="fecha"]).máscara("TC99/M9/D9", {
        marcador de posición: "____/__/__",
        traducción: {
            "D": {patrón de: /[0-3]/, opcional: falso, recursiva: true},
            "M": {patrón de: /[01]/, opcional: falso, recursiva: true},
            "T": {patrón de: /[12]/, opcional: falso, recursiva: true},
            "(C)": {patrón de: /[09]/, opcional: falso, recursiva: true}
        }
    });

El código anterior puede enmascarar y validar previamente las fechas en DÍA DE MES DE AÑO formato.

Con una entrada como

<;tipo de entrada ="texto" datos de papel ="fecha" valor ="2018-06-11 15:47" />;

cambiar su valor a 2018/06/11.

Si intenta escribir otra fecha (después de borrar, Claro) usted no puede comenzar con un número diferente de 1 o 2. Esta razón es que nuestra máscara tiene una traducción a hacer al permitir caracteres. Si el patrón no coincide con, se borra el char.

The meaning of “;TC99/M9/D9”; la máscara es:

• Debe comenzar con 1 o 2 (Traducción de T: /[12]/ –; Formato personalizado)
• Debe tener número de 0 o 9 (Traducción C: /[09]/ –; Formato personalizado)
• Debe tener un número (cualquier) (Traducción 9 –; Formato de base de MaskPlugin)
• Debe tener un número (cualquier) (Traducción 9 –; Formato de base de MaskPlugin)
• Una barra se agregará en automático ( / )
• Debe tener número de 0 o 1 (Traducción de M: /[01]/ –; Formato personalizado)
• Debe tener un número (cualquier) (Traducción 9: Formato de base de MaskPlugin)
• Una barra se agregará en automático ( / )
• Debe tener número de 0, 1, 2 o 3 (Traducción D: /[0-3]/ –; Formato personalizado)
• Debe tener un número (cualquier) (Traducción 9: Formato de base de MaskPlugin)

Claro, no hay ninguna validación real. You can type “;2999/19/39”; y esto no es una fecha válida, pero está casi listo.

Por lo tanto, formatear de otra manera, cambiar orden de parámetro de máscara.

Pero, Si la fecha de la fuente en un diverso patrón, como día/mes/año, la máscara no funcionan. The date output for “;06/11/2018 15:40”; will be weird “;1018/15/0“;.

Para manejar fecha diferentes formatos se necesitará más que sencilla mascarilla. Necesitamos una función.

Ver el código de abajo

        var maskBehaviorDateTime = function (Val, y, campo) { // Esta función debe devolver un valor MASK var msk = "TC99/M9/D9"; // Nuestro formato deseado var v = field.is('input') ? Field.Val() : Field.Text(); // es una entrada o elemento html otro??
                    v = v.replace(/\D/g, ''); // raya que no es dígito si (v != '') { // tiene valor?
                        If ((/^[01]\d[0-3]\dd{4}$/).prueba(v)) { //probar si el patrón coincide solo con el mes / día / año v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                        } if else ((/^[01]\d[0-3]\dd{4}[012]\d[0-5]\d$ /).prueba(v)) { //prueba si el patrón coincide con día/mes/año hora:Minuto v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                            // Si necesitamos Mostrar la hora y minutos, máscara devuelta debe cambiarse también
                            // v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                            // MSK = ' h9 TC99/M9/D9:M9'; // h y m deben ser existe en opciones de traducción
                        }
                        Field.is('input') ? Field.Val(v) : Field.Text(v);
                    }
                    volver msk;
                },
                optionsDateTime = {
                    marcador de posición: "____/__/__",
                    traducción: {
                        "D": {patrón de: /[0-3]/, opcional: falso, recursiva: true},
                        "M": {patrón de: /[01]/, opcional: falso, recursiva: true},
                        "T": {patrón de: /[12]/, opcional: falso, recursiva: true},
                        "(C)": {patrón de: /[09]/, opcional: falso, recursiva: true},
                        "h": {patrón de: /[0-2]/, opcional: true, recursiva: true},
                        "m": {patrón de: /[0-5]/, opcional: true, recursiva: true}
                    }
                };
        jQuery('[datos de papel ="fecha"]').máscara(maskBehaviorDateTime,  optionsDateTime);

Ahora tenemos dos más patrón de traducción (h y m). h significa que la posición de índice n debe tener números 0, 1 o 2 y m números entre 0 y 5. Tenga en cuenta que caso importa.

Con el código anterior, podemos dar formato y Mostrar fecha en varias formas. solo tienes que cambiar .prueba() y .Vuelva a colocar() patrón para llenar su patrón deseado.

Este es el código que estoy utilizando para dar formato a campos de datetime de la base de datos año-mes-día hora:MINUTOS:En segundo lugar en los elementos html con hora del día, año y mes:MINUTOS

    var maskBehaviorDateTime = function (Val, y, campo) {
            // Si ya existe un valor, los formatos en el dd/mm/aaaa estándar con el hh opcional:mm:ss var msk = "H9 de TC99/M9/D9:M9:S9";
            If (campo de atributos.("valor de la fecha original") == undefined) {
                var o = field.is('input') ? Field.Val() : Field.Text();
            } otra cosa {
                var atributos = campo.("valor de la fecha original");
            }
            v = el. reemplazar(/\D/g, '');
            If (v != '') {
                campo de atributos.("valor de la fecha original") == undefined &;&; campo de atributos.("valor de la fecha original", el);
                If ((/^[12][09]\d{2}[01]\d[0123]\d$ /).prueba(v)) { // año/mes/día v = v.reemplazar(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                    MSK = "D9/M9/TC99";
                } if else ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d$ /).prueba(v)) { // año/mes/día hora:minuto v = v.reemplazar(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                    MSK = "D9/M9/TC99 h9:M9";
                } if else ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$ /).prueba(v)) { // año/mes/día hora:minutos:Segundo V = V.Reemplazar(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5:$6');
                    MSK = "D9/M9/TC99 h9:M9:S9";
                }
                Field.is('input') ? Field.Val(v) : Field.Text(v);
            }

            volver msk;
        },
        optionsDateTime = {
            marcador de posición: "__/__/____",
            traducción: {
                "D": {patrón de: /[0-3]/, opcional: falso, recursiva: true},
                "M": {patrón de: /[01]/, opcional: falso, recursiva: true},
                "T": {patrón de: /[12]/, opcional: falso, recursiva: true},
                "(C)": {patrón de: /[09]/, opcional: falso, recursiva: true},
                "h": {patrón de: /[0-2]/, opcional: true, recursiva: true},
                "m": {patrón de: /[0-5]/, opcional: true, recursiva: true},
                "s": {patrón de: /[0-5]/, opcional: true, recursiva: true}
            },
        };
    jQuery('[datos de papel ="fecha"]').máscara(maskBehaviorDateTime,  optionsDateTime);

Con una entrada como

<;tipo de entrada ="texto" datos de papel ="fecha" valor ="2018-06-11 15:40">;

La salida será

11/06/2018 15:40

Esto ayudará a esperanza!