Pour mon nouveau site (qui devrait sortir sous peu), j’avais besoin d’un champ texte pour entrer une date dans un format précis (jj/mm/aaaa) avec un petit calendrier permettant de choisir cette date.
Après de multiples recherches sur Google, je suis tombé sur le site de Aeron Glenmann et sur son script de calendrier utilisant Mootools :
Pour l’installer ajouter le fichier Mootools ou utiliser Google API ainsi que le fichier calendar.js dans les balises <head></head> de votre page.
Dans un fichier javascript à inclure également ajouter le code suivant :
window.addEvent('domready', function() { myCal = new Calendar({ date: 'd/m/Y' }); });
De multiples petites options sont disponibles pour changer le comportement du calendrier sont disponibles sur le site de l’auteur.
Dans le HTML, ajouter simplement un input de type texte portant l’id date :
<input id="date" name="date" type="text" />
Par défaut le calendrier n’a pas de CSS attaché, mais l’auteur explique sur son site comment le mettre en forme.
Par défaut le script utilise la balise <button> pour afficher le petit bouton à coté du champ texte. Sous Safari 4 sur mac, le bouton envoie le formulaire, j’ai donc remplacé la ligne suivante dans calender.js :
button: new Element('button', { 'type': 'button' }),
par
button: new Element('span' ),
Catégories
- .NET (51)
- ASP.NET (6)
- C# (20)
- DevExpress (2)
- Silverlight (23)
- WPF (1)
- Accès aux données (5)
- ADO.NET (1)
- Entity Framework (2)
- Linq To SQL (2)
- Azure (1)
- Base de données (6)
- MySQL (2)
- SQL Server (4)
- Communauté (3)
- Développement (1)
- Développement web (15)
- Javascript (4)
- PHP (6)
- Wordpress (1)
- Evénements (2)
- Afterworks (1)
- Imagine Cup 2011 (3)
- Livre (1)
- Mac OS X (1)
- Microsoft Student Partner (2)
- Non classé (2)
- Perso (2)
- Publications (2)
- Réseaux (5)
- Réseaux sociaux (1)
- Visual Studio 2010 (10)
- WebMatrix (1)
- Windows Phone 7 (13)
- Windows Server 2008 (2)
