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