À l’aide de jQueryMask Plugin au format dates dans différents modèles

Masque de Plugin jQuery est une grande bibliothèque Javascript pour les champs de format pour la présentation ou de forcer une entrée correctement par les utilisateurs.

Ici, Je montre comment faire face à l’entrée ou un autre élément HTML pour afficher des dates quand la date de la source a un format différent de l’élément cible.

Exemple de:

• Nous avons un datetime avec Année-mois-jour heure:Minute:Secondes et le besoin de ne montrer que la Année/mois/jour partie.
• Nous avons da date Année-mois-jour et il fallait formater à Jour/mois/année.

jQueryMask est très simple à utiliser. Il est inutile de beaucoup pour masquer tout ce que vous devez. Jetez un oeil à exemples sur son site Internet.

Si vous avez besoin pour mettre en forme un champ date simple (même d’un élément non-input), Il suffit d’utiliser le code ci-dessous.

jQuery('[données-rôle ="Date"]).masque("TC99/M9/D9", {
        espace réservé: "____/__/__",
        translation: {
            "D": {modèle: /[0-3]/, en option: faux, récursif: true},
            "M": {modèle: /[01]/, en option: faux, récursif: true},
            "T": {modèle: /[12]/, en option: faux, récursif: true},
            "C": {modèle: /[09]/, en option: faux, récursif: true}
        }
    });

Le code ci-dessus peut masquer et valider des dates dans ANNÉE/MOIS/JOUR format.

Avec une entrée comme

<;input type ="texte" données-rôle ="Date" valeur ="2018-06-11 15:47" />;

changerait sa valeur à 2018/06/11.

Si vous essayez de taper une autre date (après clear, Bien sûr) vous ne pouvez pas commencer par un chiffre différent de 1 ou 2. Cette raison est que notre masque ont une traduction à faire lorsque vous autorisez des caractères. Si le modèle ne correspond pas, le char est effacée.

The meaning of “;TC99/M9/D9”; le masque est:

• Doit commencer par 1 ou 2 (Translation T: /[12]/ –; Format personnalisé)
• Devez disposer du numéro 0 ou 9 (Traduction C: /[09]/ –; Format personnalisé)
• Doit avoir un numéro (n’importe quel) (Translation 9 –; Format de base de MaskPlugin)
• Doit avoir un numéro (n’importe quel) (Translation 9 –; Format de base de MaskPlugin)
• Une barre oblique s’ajouteront automatique ( / )
• Devez disposer du numéro 0 ou 1 (Traduction M: /[01]/ –; Format personnalisé)
• Doit avoir un numéro (n’importe quel) (Translation 9: Format de base de MaskPlugin)
• Une barre oblique s’ajouteront automatique ( / )
• Devez disposer du numéro 0, 1, 2 ou 3 (Traduction D: /[0-3]/ –; Format personnalisé)
• Doit avoir un numéro (n’importe quel) (Translation 9: Format de base de MaskPlugin)

Bien sûr, Il n’y a aucune véritable validation. You can type “;2999/19/39”; et ce n’est pas une date valide, mais est presque fini.

Alors, pour mettre en forme une autre manière, Il suffit de changer ordre de paramètre de masque.

Mais, Si la date de la source se trouve dans un modèle différent, comme le jour/mois/année, le masque ne fonctionnent pas. The date output for “;06/11/2018 15:40”; will be weird “;1018/15/0“;.

Pour gérer les dates différentes formats il faudra plus qu’un masque simple. Nous aurons besoin d’une fonction.

Regardez le code ci-dessous

        var maskBehaviorDateTime = function (Val, et, domaine) { // This function must return a MASK
                    var msk = "TC99/M9/D9"; // Our desired format
                    var v = field.is(« entrée ») ? Field.Val() : Field.Text(); // une entrée ou un autre élément html??
                    v = v.replace(/\D/g, ''); // stripe non digits
                    if (v != '') { // a la valeur?
                        If ((/^[01]\d[0-3]\dd{4}$/).test(v)) { //test if pattern match Month/Day/Year only
                            v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                        } sinon si ((/^[01]\d[0-3]\dd{4}[012]\d[0-5]\d$ /).test(v)) { //vérifier si le modèle correspond à l’heure de jour/mois/année:Minute
                            v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                            // Si nous devons montrer l’heure et minute, masque retourné doit être changé aussi
                            // v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                            // MSK = ' TC99/M9/D9 h9:M9'; // h et m doivent être existe dans les options de traduction
                        }
                        Field.is(« entrée ») ? Field.Val(v) : Field.Text(v);
                    }
                    retour de msk;
                },
                optionsDateTime = {
                    espace réservé: "____/__/__",
                    translation: {
                        "D": {modèle: /[0-3]/, en option: faux, récursif: true},
                        "M": {modèle: /[01]/, en option: faux, récursif: true},
                        "T": {modèle: /[12]/, en option: faux, récursif: true},
                        "C": {modèle: /[09]/, en option: faux, récursif: true},
                        "h": {modèle: /[0-2]/, en option: true, récursif: true},
                        "m": {modèle: /[0-5]/, en option: true, récursif: true}
                    }
                };
        jQuery('[données-rôle ="Date"]').masque(maskBehaviorDateTime,  optionsDateTime);

Nous avons maintenant deux modèle de traduction plus (h et m). h signifie que la position n-index doit avoir des nombres 0, 1 ou 2 et m nombres entre 0 et 5. N’oubliez pas que l’affaire des questions.

Avec le code ci-dessus, Nous pouvons formater et afficher la date de plusieurs façons. Il suffit de changer .test() et .remplacer() modèle pour remplir votre motif désiré.

C’est le code que j’utilise pour mettre en forme les champs de la base datetime avec l’année-mois-jour heure:MINUTE:DEUXIÈME dans les éléments html avec heure jour/année/mois:MINUTE

    var maskBehaviorDateTime = function (Val, et, domaine) {
            // S’il y a déjà une valeur, les formats dans le jj/mm/aaaa standard avec le hh en option:mm:ss
            var msk = "TC99/M9/D9 h9:M9:S9";
            If (champ d’attr.("valeur date d’origine") == undefined) {
                var o = field.is(« entrée ») ? Field.Val() : Field.Text();
            } d’autre {
                var attr = champ.("valeur date d’origine");
            }
            v = la. remplacer(/\D/g, '');
            If (v != '') {
                champ d’attr.("valeur date d’origine") == undefined &;&; champ d’attr.("valeur date d’origine", le);
                If ((/^[12][09]\d{2}[01]\d[0123]\d$ /).test(v)) { // year/month/day
                    v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                    MSK = "D9/M9/TC99";
                } sinon si ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d$ /).test(v)) { // année/mois/jour heure:minute
                    v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                    MSK = "D9/M9/TC99 h9:M9";
                } sinon si ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$ /).test(v)) { // année/mois/jour heure:minute:second
                    v = v.replace(/^(\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(« entrée ») ? Field.Val(v) : Field.Text(v);
            }

            retour de msk;
        },
        optionsDateTime = {
            espace réservé: "__/__/____",
            translation: {
                "D": {modèle: /[0-3]/, en option: faux, récursif: true},
                "M": {modèle: /[01]/, en option: faux, récursif: true},
                "T": {modèle: /[12]/, en option: faux, récursif: true},
                "C": {modèle: /[09]/, en option: faux, récursif: true},
                "h": {modèle: /[0-2]/, en option: true, récursif: true},
                "m": {modèle: /[0-5]/, en option: true, récursif: true},
                "s": {modèle: /[0-5]/, en option: true, récursif: true}
            },
        };
    jQuery('[données-rôle ="Date"]').masque(maskBehaviorDateTime,  optionsDateTime);

Avec une entrée comme

<;input type ="texte" données-rôle ="Date" valeur ="2018-06-11 15:40">;

La sortie sera

11/06/2018 15:40

J’espère que cela vous aider!