ben voila, je me résout a nouveau a faire appel a vous.
mon soucis:je n'arrive pas implémenter convenablement un datepiker directement sur la page graphique
-A l'aide du tuto hihcharts/highstock j'ai bien réussit a faire un graphe des xxx dernières heures.
-j'ai ajouté (dans le cas hicharts) un champs input, je récupère convenablement la valeur entrée grâce a la méthode POST, ensuite il ne me reste plus qu'a actualiser la variable du tuto start et stop.
a la main comme cela je peut choisir le jour et l'intervalle de temps affiché.(c'est pour test, il n'y a pas de contrôle et je rentre le timstamp directement dans le champs.)
-Je précise que je travaille directement sur ma page de graphique et non pas par l’intermédiaire d'un formulaire.
- toujours dans hicharts, mais highstock a déjà les input j'ai ajouté deux champs: appelé date debut et date de fin et ça va a pêut pres.
-donc j'ai une fonction qui marche: avancer ou reculer d'un jour.
par contre quand je veut mettre un datepicker je n'ai plus de graph, je pense a un conflit dans mes appels aux librairies JS car le datepiker marche convenablement seul, le graph aussi, mais une fois sur la même page, ça marche plus.
[u]pour test[/u] sur mes input je fait comme cela: ce code part du bas, de la fin du tuto, j'ai nommée cette page:48h_teleinfo.php
Code : Tout sélectionner
<!-- Maitenant il ne reste plus qu'à afficher le graphique dans le corps "body" de la page et on ferme la balise html
id="container" = C'est le nom que vous avez défini au début dans "renderTo: 'container', "
style="width: 550px; height: 300px; = la largeur et la hauteur que vous voulez donner à votre graphique.
Votre graphique est terminé.-->
</head>
<body>
<!-- on créé le formulaire php , passage de paramètres par la méthode post-->
<form action="48h_teleinfo.php" method="post">
<!-- on déclare un champs select, pour affichier la liste de choix -->
<select name="jours">
<option value=""> ----- jours ----- </option>
<option value="01"> 01 </option>
<option value="02"> 02 </option>
<option value="03"> 03 </option>
<option value="04"> 04 </option>
</select>
<select name="mois">
<option value=""> ----- jours ----- </option>
<option value="01"> 01 </option>
<option value="02"> 02 </option>
<option value="03"> 03 </option>
<option value="04"> 04 </option>
</select>
<!-- un bouton pour valider -->
<input type="submit" value="valider" name="OK">
</form>
</center>
<div id="container" style="width: 1280px; height: 500px; margin: 0 auto"></div>
</body>
</html>
Code : Tout sélectionner
<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
<!-- receupere les langues pour la traduction du calendrier -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script>
-le datepiker simple
- le datepiker aller et retour qui surveille que l'on ne peut pas choisir des dates (DU) (AU) de façon coherente, je n'utilise pas la source ajax
Code : Tout sélectionner
/**
* Création d'un calendrier
* @return {[type]} [description]
*/
$(function()
{
// définit les options par défaut de tous les calendriers
$.datepicker.setDefaults($.datepicker.regional["fr"]); // affiche le calendrier en fr
// définit les options par défaut du calendrier
$.datepicker.setDefaults({
showButtonPanel: true,// affiche des boutons sous le calendrier
showOtherMonths: true, // affiche les autres mois
selectOtherMonths: true, // possibilités de sélectionner les jours des autres mois
showOn: "button", // affiche le calendrier via un bouton image
buttonImage: "10-calendar-icon.png",
buttonImageOnly: true,
changeMonth: true, // listes déroulantes pour les mois et les années
changeYear: true,
yearRange: "-1:+3",// le nombre d'année disponible dans la liste déroulante
//defaultDate: "16-05-2014",// la date par défaut sélectionnée dans le calendrier
firstDay: 1, // premier jour le lundi
//beforeShowDay: $.datepicker.noWeekends, // masque les week end
showWeek: true, // affiche les semaines
duration: "fast", // ajoute une animation sur le calendrier
showAnim: "slide",
showOptions: {direction: "left"}
/*minDate: "+3", // les dates sélectionnables (minimum et maximum)
maxDate: "+13" */
});
//$("#calendar").datepicker();
/**
* Gestion d'une date de départ et d'une date de retour
* @param
* @return {[type]} [description]
*/
$("#calendar_from").datepicker({
onClose: function(date) {
$("#calendar_to").datepicker("option", "minDate", date);
}
});
$("#calendar_to").datepicker();
/**
* Communication avec PHP via AJAX lors de la sélection de la date
* @param
* @return {[type]} [description]
*/
$("#calendar").datepicker ({
onSelect : function (dateTexte){
var data = {date : dateTexte};
$.ajax ({ // appel du script php
url : "10-ajax.php",
data : data,
complete : function (xhr, result){
// si il y a une erreur
if (result != "success")
{
$("#confirmation").html ("<b>Erreur durant votre résevertion, veuillez recommencer plus tard.</b>") ; // ajout de la reponse php sous forme HTML
return;
}
var retour = xhr.responseText;
$("#confirmation").html (retour) ; // ajout de la reponse php sous forme HTML
}
});
}
});
});
http://www.boock.ch/meteo/graphiques_dy ... e_jour.php
Quelques fonctions si cela peut etre utile a quit lit ce message, testée, ellent fonctionne toutes
Calendar 4 renvoie la date en tstamp
Code : Tout sélectionner
/**
* Affiche les différents formats des dates
* @return {[type]} [description]
*/
$(function() {
$("#calendar1").datepicker({dateFormat: "mm-dd-yy", appendText: " mm-dd-yy - défaut ango-saxon"});
});
$(function() {
$.datepicker.setDefaults($.datepicker.regional["fr"]);
$("#calendar2").datepicker({dateFormat: "dd-mm-yy", appendText: " dd-mm-yy - défaut français"});
});
$(function() {
$("#calendar3").datepicker({dateFormat: "yy-mm-dd", appendText: " yy-mm-dd"});
});
$(function() {
$("#calendar4").datepicker({dateFormat: "@"});
});
$(function() {
$("#calendar5").datepicker({dateFormat: "!", appendText: " ticks Windows"});
});
$(function() {
$("#calendar6").datepicker({dateFormat: $.datepicker.COOKIE, appendText: " COOKIE"});
});
$(function() {
$("#calendar7").datepicker({dateFormat: "'Le' d 'du mois de' MM yy", appendText: " avec du texte"});
});