FLUX RSS

  • YouTube
  • LinkedIn
  • Google

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

Partager vos médias sociaux
  • 1
  •  ;
  •  ;
  •  ;
  •  ;
  •  ;
  •  ;

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.

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

Avec une entrée comme

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

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

Avec une entrée comme

La sortie sera 11/06/2018 15:40

J’espère que cela vous aider!


Partager vos médias sociaux
  • 1
  •  ;
  •  ;
  •  ;
  •  ;
  •  ;
  •  ;

Commentaire (1)

  1. Muito bom.
    Pena que é muito arquivo pra distribuir com aplicação.

Laisser une réponse

Votre adresse email ne sera pas publié. Les champs obligatoires sont marqués *

Ce site utilise Akismet pour réduire le spam. Apprenez comment vos données de commentaire sont transformées.