Tuto jQuery UI : modifier date (datepicker)

Le 02/01/2012 par Jérôme PASQUELIN

Jquery UI permet, entre autre, d’afficher un datepicker : c’est un calendrier visuel qui apparait généralement au clic sur un input ‘text’.
Par défaut, la date est au format  MM/JJ/AAAA. Pour la passer au format JJ/MM/AAAA, rien du plus simple, il y a 1 ligne à rajouter.

Code initial, qui permet d’afficher simplement un calendrier au clic del’input type text ayant l’id ‘date’ :

   …
<head>
<script src= »/js/jquery-1.7.1.js »></script>
<script src= »/js/jquery-ui-1.8.16.custom.min.js »></script>
<script>
$(function()
{
$(« #date »).datepicker();
});
</script>
<link rel= »stylesheet » href= »/css/custom-theme/jquery-ui-1.8.16.custom.css » type= »text/css » />
</head>
<body>

Date : <input type= »text » id= »date » name= »date »>

Utilisation de  l’option dateFormat pour modifier le format de la date affiché dans l’input :

var date = $(‘#date’).datepicker({ dateFormat: ‘dd/mm/yy’ });

Code final :

  …
<head>
<script src= »/js/jquery-1.7.1.js »></script>
<script src= »/js/jquery-ui-1.8.16.custom.min.js »></script>
<script>
$(function()
{
var date = $(‘#date’).datepicker({ dateFormat: ‘dd/mm/yy’ });

$(« #date »).datepicker();
});

</script>
<link rel= »stylesheet » href= »/css/custom-theme/jquery-ui-1.8.16.custom.css » type= »text/css » />
</head>
<body>

Date : <input type= »text » id= »date » name= »date »>

PS : attention au copier/coller, les doubles quotes sont re-interprétées sur cette page

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ce site utilise Kèwhorde-Louve. Pour une ancre personnalisée, rédigez un commentaire de qualité (et si votre site est hors thématique, la modération sera plus stricte).

Lire les articles précédents :
Diapo slideshow : plugin jQuery de défilement d’images

Diapo slideshow est un plugin jQuery qui permet de créer un diaporama défilant d'images. Il est assez récent car il date d’août 2011 (version actuelle...

Fermer