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 *