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

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.

	<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.

$(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 ).