Bonjour Michel, bonjour à tous
Pour utiliser le Datepicker de JQuery.ui, c'est vrai que ça n'est pas facile. J'ai moi-même galéré avec ça.
Pour se faire, il faut 2 fichiers de code JavaScript et 2 fichiers de Feuille de Style en Cascade CSS
jquery-ui.js
jquery.ui.datepicker-fr.js
jquery-ui.css
datepicker.css
Le fichier jquery.ui.datepicker-fr.js permet d'avoir le datepicker en français.
Avec Firefox, pour ne citer que lui,
Cliquez gauche sur les liens ci-dessus et les ouvrir dans un nouvel onglet
Faire un clic gauche au milieu du nouvel onglet qui s'est ouvert et cliquez sur Enregistrer sous
Enregistrez le fichier dans le répertoire de votre choix avec le nom qui s'affiche dans la boite de dialogue "Enregistrer sous"
soit
jquery-ui.css, datepicker.css, jquery-ui.js et jquery.ui.datepicker-fr.js
Ensuite, entre les balises <head> et </head> il faut charger ces fichiers comme ceci
Code : Tout sélectionner
<link rel="stylesheet" href="../Scripts/JS/jquery-ui/themes/start/jquery-ui.css">
<link rel="stylesheet" href="../Scripts/JS/jquery-ui/datepicker.css">
<script type="text/javascript" src="../Scripts/JS/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="../Scripts/JS/jquery-ui/jquery.ui.datepicker-fr.js"></script>
Attention, les chemins relatifs ci-dessus sont les miens. Pensez à les modifier si vous n'avez pas les même répertoires que moi.
Maintenant, juste avant l'accolade et la parenthèse de fin de scripts Highstock
})</script>, il faut rajouter ces 2 fonctions
Code : Tout sélectionner
function(chart) { // on complete
// appliquer les sélecteurs de dates
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker({minDate:-180, maxDate:0,})
},0)
// Définir le format de date des datepickers
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: false,
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});
});
Il faut enfin régler minDate. Il doit être précédé du signe moins (-) suivit d'un nombre qui correspond au nombre de jours total que vous voulez afficher.
Pour ce qui me concernent, j'affiche 6 mois de données, donc -180 jours
maxDate lui doit rester à zéro (0). Ca correspond au dernier jours extrait.
Thats all folks
A+
Pascal