Javascript : Gestion des dates
Publié le 24/01/2008 par Another
Optimiser la saisie des dates en javascript
Lorsque vous réalisez une application métier dans des technologies Web, un des petits souçis que rencontrent les utilisateurs réside dans l'ergonomie de la saisie de certaines données, tout particulièrement pour la saisie des dates. (Les applications winform donnent de mauvaises habitudes ;-).
Le contrôle présenté ci-dessous, permet d'améliorer l'ergonomie et la saisie des données de types date. Outre la mise en forme automatique au bon format de la saisie de l'utilisateur, il permet via, une série de mots clefs d'atteindre une date selon le nom du jour de la semaine.
N.B: le contrôle permet d'améliorer la saisie des dates il ne contrôle ni le format ni l'existence de la date.
Pour contrôler la validité du format de date, consulter la section"C# - Contrôle des dates"
Démonstration
Quelques exemples
- 31/12/06
- 31/12
- 1407
- demain
- hier
- mardi
- ...
Comment ça marche ?
La mise en forme s'effectue sur le onBlur de la zone de saisie, si les données correspondent à un masque de saisie, la zone est automatiquement mise au format dd/mm/yyyy.
Le contrôle admet l'absence de séparateur, ou les séparateurs suivantes (" ","-","/",".").
Les masques de saisie reconnus sont les suivants:
- ddmmyy
- dd/mm/yy
- ddmmyyyy
- ddmm
- dd/mm
Les mots clefs suivant permettent d'obtenir rapidement une date au format dd/mm/yyyy : selon leur valeur associée:
- dem[ain]
- hier
- auj[ourd'hui]
- lun[di] ou mar[di] ou mer[credi] ou jeu[di] ou ven[dredi] ou sam[di] ou dim[anche]
Le contrôle considère les jours de la semaine, comme ceux de la semaine en cours, par exemple si nous sommes le mercredi 17 mai 2006 :
- mar (ou mardi) ='-.; 16/05/2006
- jeu (ou jeudi) ='-.; 18/05/2006
L'utilisation des caractères "-" ou "+" à la suite d'un nom de jour permet de se décaler de 1 à 3 semaines :
- mar+ (ou mardi+) ='-.; 23/05/2006
- jeu+ (ou jeudi+) ='-.; 25/05/2006
Téléchargement
Fichier source javascript : dateEnhance.js
Installation
- Inclure le fichier dateEnhance.jsdans la page du contrôle
- Ajouter l'appel à la fonction enhanceDatesur le onBlur du textbox
.-';input type="text" id="txtDate" onblur="javascript:enhanceDate(this)" /'-.;