Web-tutoriel

Tutoriels javascript css php java jquery

Ajouter un timepicker à jquery ui datepicker gérer l’heure dans un datepicker 2 octobre , 2010





Si vous utilisez jquery régulièrement, vous connaissez probablement jquery datepicker permettant de gérer les dates dans un champ input text:

 

Les librairies de base à intégrer :

<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.5.custom.css" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>

Ceci est généré à l’aide du code suivant :
Le champ texte:

<input type="text" name="date_picker" id="date_picker" />

Le code javascript:

$("#date_picker").datepicker();

Pour ajouter l’heure à ce datepicker, le transformer donc en un datetimepicker:

 

On ajoute la librairie suivante :

<script src="/js/jquery-ui-timepicker-addon-0.6.2.js" type="text/javascript"></script>

Et le petit bout de CSS suivant :

/* css for timepicker */
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }

Enfin on déclare le datetimepicker :

$("#datetime_picker").datetimepicker();

Il est possible de passer plusieurs options:
– activer am/pm
– mettre des limites min / max
– mettre des valeurs par défaut
etc …

$('#datetime_picker').timepicker({
	ampm: true,
	hour: 13,
	minute: 15,
	hourMin: 8,
	hourMax: 16
});

Plus d’infos sur le site de Trent Richardson : http://trentrichardson.com/examples/timepicker/

Mise à jour du 25/07/2012

Il est possible d’indiquer la date à positioner dans le datetimepicker :

Utiliser la dernière version du plugin (1.0.1 aujourd’hui) :
http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js

$('#datetime_picker').datetimepicker(‘setDate’,new Date(2012, 4, 20, 8, 30));

Attention, la deuxième valeur (4) est le numéro du mois moins 1 : 4 : mai (et pas avril)
0 : janvier
11 : décembre

Vous pourrez trouver un exemple complet de ceci à l’adresse :
http://jsfiddle.net/xenetis/PX7yt/1/


14 Reponses à “Ajouter un timepicker à jquery ui datepicker gérer l’heure dans un datepicker
Le 11 mars 2011 à 18 h 06 min
cyril a dit:

Merci beaucoup 🙂 🙂 🙂

Le 9 décembre 2011 à 15 h 07 min
Nicolo a dit:

De rien 😉

Le 13 avril 2012 à 20 h 47 min
Dimitri a dit:

Enfin une page claire permettant l’utilisation de timepicker !
bravo et MERCI !

Le 25 juin 2012 à 10 h 27 min
naroco a dit:

J’ai un souci de mise en pratique. je suis novice en jquery.

$(document).ready(function(){
$(‘#date1’).datepicker();
$(‘#date1’).datetimepicker();
});

ça ne fonctionne pas

Le 25 juin 2012 à 11 h 00 min
Nicolo a dit:

As tu une erreur dans le débuger JS ?

Essaye de ne mettre que :
$(‘#date1′).datetimepicker();

Et pas :
$(‘#date1′).datepicker();

Le 19 juillet 2012 à 9 h 36 min
Abyssale a dit:

Bonjour,

Comment faire pour indiquer une date ?
J’ai donc au moment de cliquer dans le champs déjà une date de renseignée. Donc en cliquant, il faudrait que le datepicker se positionne sur cette date et non pas celle du jour.

Merci

Le 25 juillet 2012 à 12 h 15 min
Nicolo a dit:

Bonjour,

En utilisant la dernière version du plugin, il est possible d’indiquer la date, version 0.9.9 actuellement.

Pour cela ajouter une ligne du type :
$(this).datetimepicker(‘setDate’,new Date(2012, 4, 20, 8, 30));

Attention, la deuxième valeur (4) est le numéro du mois moins 1 : 4 : mai (et pas avril)

Je modifie le tutoriel afin d’indiquer tout ça 😉

Le 14 mai 2013 à 13 h 11 min
Ess a dit:

Bonjour,
Svp passe moi le lien de telechargement de ces librairie de base ?

Le 16 mai 2013 à 10 h 49 min
Rachid a dit:

Merci pour ce tuto, ça fait plus de deux jours que je cherche à faire ce genre de calendrier mais j’ai pas pu, jusqu’à ce que je découvre cette page.

merci une autre fois.

😉

Le 29 juin 2013 à 21 h 12 min
lesage a dit:

Pour ma part, la création d’un « DatePicker » fonctionne trés bien mais l’ajout des lignes que vous citez-ci dessus ne le transforme pas en « DateTimePicker » … J’ai pourtant quelques années d’expérience en développement.

Il s’agit bien seulement d’ajouter la référence au fichier « jquery-ui-timepicker-addon » et de modifier l’appel JQuery de datePicker() à dateTimePicker() ?

PS : Je continue de chercher via votre lien « jsfiddle.net » mais ça ne fonctionne pas non plus pour ce site.

Le 30 juin 2013 à 21 h 38 min
Nicolo a dit:

Un développeur depuis plusieurs années se rendant compte que le lien jsfiddle.net ne fonctionne pas ouvrirait sa console chrome (par exemple) et se rendrait compte que le lien vers jquery-ui-timepicker-addon.js des « External ressources » indique 403 forbidden car le fournisseur de ce plugin interdit les liens extérieurs …
La solution: cliquer sur le lien jquery-ui-timepicker-addon.js et rafraichir si ça dit « 403 Forbidden » pour qu’il s’affiche, puis re rafraichir la page jsfiddle.net … et là au miracle de la technologie spaciale … ça fonctionne 😉

Le 26 avril 2014 à 12 h 38 min
khaoula a dit:

le code est très clair merci mais concernant les fichiers jquery ils sont ou?? pour qu’on puisse les rajouter dans notre dossier js

Laissez une réponse

Nom (requis)

Email (requis)

Site Web

Haut