FLUX RSS

  • YouTube
  • LinkedIn
  • Google

Archives pour : jQuery

À 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) { // Cette fonction doit retourner un masque var msk = "TC99/M9/D9"; // Notre format désiré 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 chiffres non si (v != '') { // a la valeur?
                        If ((/^[01]\d[0-3]\dd{4}$/).test(v)) { //vérifier si le modèle correspond à v seul jour/mois/année = 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) {
            // Caso já exista um valor, o formata no padrão dd/mm/yyyy com o opcional hh:mm:msk var SS = "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)) { // année/mois/jour 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:deuxième 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!

jQuery.html() não funciona em Internet Explorer

Recentemente tive problemas com um código javascript que utiliza jQuery et cela a fonctionné dans les différents navigateurs comme Chrome, le Firefox e algumas versões do Internet Explorer, mas que teimava em não funcionar em Internet Explorer 7 et 8.
Segue o código:

$.Publier(URL,{ Options }, 
  fonction (réponse) {
     $(« #myElement »).HTML(réponse);
  },
« texte »);

Após alguns testes percebi que não era um problema do método, pois em outros códigos ele se comportava como o esperado.
Então debugando minuciosamente o código e as respostas do método Ajax percebi um pequeno erro de sintaxe no HTML e foi só o corrigir que o IE 7 afficher correctement la réponse.
Segue então a dica, caso tenha problemas com o método jQuery.html(), verifique antes de tudo se o conteúdo a ser escrito no elemento é um código html sem erros, pois a validação do IE 7/8 não permitirá escrever HTML com nenhum erro, Peu importe la taille.