jQuery Girl
  1. jQuery Girl
  3. Highstock date input jquery ui modification de la position du sélecteur de date
Intereting Posts
La requête de Safari Ajax ne suit pas la redirection jquery trouve .html () égal à val (); JQuery est importé mais AJAX ne fonctionne pas? jQuery .get – Comment afficher le résultat de la requête .get? Les sélecteurs jQuery: first et: eq (0) sont-ils fonctionnellement équivalents? jquery – comment COUPER des éléments LI d’une UL à une autre UL Que se passe-t-il si j’appelle jQuery.post () avec une URL vide? Afficher le chargement lorsque le service Web est en cours d’exécution L’atsortingbut maxlength ne s’affiche pas lorsque le code HTML est rendu? Le rendu Sparkline est lent et bloque le navigateur Le moyen d’arrêter et de poursuivre l’animation en passant avec la souris dans JQuery jQuery ui autocomplete lorsque l’utilisateur ne sélectionne aucune option dans la liste déroulante Comment envoyer une documentation XML au serveur à partir du client dans jQuery jquery valider: si le formulaire est valide puis montrer le bouton d’envoi ckeditor ne se présentera pas à la fondation zurb

Highstock date input jquery ui modification de la position du sélecteur de date

Dans Highstock, vous pouvez utiliser le datepicker de jquery ui au lieu de saisir du texte dans les champs de date, comme dans cette démonstration … http://jsfiddle.net/hcharge/aNde9/ 

datepicker

En cliquant une fois sur l’entrée, le sélecteur de date apparaît en-dessous du champ de saisie. Toutefois, si vous le fermez et que vous l’ouvrez à nouveau, il rest ensuite en haut du conteneur. Mis en œuvre dans une page Web, ce serait le haut de la fenêtre du navigateur.

est-ce un problème connu?

Datepicker contrôle sa position verticale par le biais de l’atsortingbut “top” du style du widget. Pour une raison quelconque, “top” est toujours défini sur 0 lors des activations suivantes de datpicker.

Il est relativement facile de contourner le problème si les données du widget «se souviennent» de la position correcte et la définissent explicitement dans les appels suivants. Voir les fonctions ‘onClose’ et ‘beforeShow’ définies dans les options datePicker ci-dessous: 

 $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { // Create the chart window.chart = new Highcharts.StockChart({ chart : { renderTo : 'container' }, rangeSelector : { selected : 1, inputDateFormat: '%Y-%m-%d', inputEditDateFormat: '%Y-%m-%d' }, title : { text : 'AAPL Stock Price' }, series : [{ name : 'AAPL', data : data, tooltip: { valueDecimals: 2 } }] }, function(chart){ // apply the date pickers setTimeout(function(){ $('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo)) .datepicker({ beforeShow: function(i,obj) { $widget = obj.dpDiv; window.$uiDatepickerDiv = $widget; if ($widget.data("top")) { setTimeout(function() { $uiDatepickerDiv.css( "top", $uiDatepickerDiv.data("top") ); },50); } } ,onClose: function(i,obj) { $widget = obj.dpDiv; $widget.data("top", $widget.position().top); } }) },0) }); });

Voici un lien vers jsFiddle

Vous devez définir les mêmes formats d’entrée, modifier le paramètre dateFormat de dateFormat pour qu’il soit identique à celui de Highstock ou modifier inputRangeFormat de Highstock.