Mise en place d'un calendrier comprenant date et heure.

TimePicker et DatePicker personnalisable avec JQuery.

28 avril 2011

Ce tutoriel a pour but de vous apprendre à créer des champs contenant des calendriers comme ceci : Calculer la différence entre deux dates


Tout d'abord il faut posséder une version de JQuery avec DatePicker et vous pourrez télécharger le TimePicker sur le site officiel http://milesich.com/timepicker/. J'utilise la version 0.9.3 du timepicker.


Etape 1 : Les includes

Ca parait bête comme ça mais beaucoup de gens ne savent pas que pour utiliser un fichier JS ou CSS il faut l'inclure avant.


Etape 2 : La création d'un champ en HTML

Un simple champ de type texte fera l'affaire. N'oubliez pas de lui mettre un identifiant, ce sera date1 pour notre cas.

Création d'un champ texte en HTML

	<input id="date1" type="text"/>
	

Etape 3 : On transforme le champ texte en datetimepicker

Ajoutez ce code au dessus du champ HTML dans des balises script. Bien sûr les trois options ne sont pas obligatoires et il en existe beaucoup d'autres.

Création d'un champ datetimepicker

$(function(){
	$('#date1').datetimepicker({
	showSecond: false,
	timeFormat: 'hh:mm',
	showTime: false
	});
});
	

Normalement vous voila avec un datetimepicker standard, en anglais et totalement pas personnalisé. Vous pouvez prendre celui du site informatix en allant regarder un peu dans le code source de la page citée plus haut (un peu d'efforts avant le réconfort ).

Par
Créateur et administrateur.

Dans la même catégorie

Ecrire une extension pour Google Chrome
JSONP : envoyer des requêtes cross-domains
Chargement asynchrone d'images en javascript
Le principe de l'AJAX
Utiliser l'objet Date de javascript pour effectuer des calculs sur les dates
Apparition d'une fenetre de saisie avec jquery.

Commentaire(s)