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/
Laissez une réponse
cyril a dit:
Merci beaucoup 🙂 🙂 🙂
Nicolo a dit:
De rien 😉
Dimitri a dit:
Enfin une page claire permettant l’utilisation de timepicker !
bravo et MERCI !
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
Nicolo a dit:
As tu une erreur dans le débuger JS ?
Essaye de ne mettre que :
$(‘#date1′).datetimepicker();
Et pas :
$(‘#date1′).datepicker();
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
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 😉
Ess a dit:
Bonjour,
Svp passe moi le lien de telechargement de ces librairie de base ?
Nicolo a dit:
C’est dans l’article :
http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js
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.
😉
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.
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 😉
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
Nicolo a dit:
Faut chercher un peu 😉
https://github.com/trentrichardson/jQuery-Timepicker-Addon
http://jqueryui.com/
http://jquery.com/