Datepicker jquery-ui für eckige highcharts-ng rangeSelector

Question

Ich versuche, einen Datepicker (jquery-ui) zu der Bereichsauswahl hinzuzufügen, aber ich kann es nicht zum Laufen bringen.

möchte ich etwas wie in diesem Beispiel mit Jquery bekommen:

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { 
     // Create the chart 
     $('#container').highcharts('StockChart', { 


      rangeSelector : { 
       selected : 1 
      }, 

      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').datepicker(); 
      }, 0); 
     }); 
    }); 




}); 

fiddle with jquery

Aber getan mit Winkel:

$scope.chartConfig = { 
     options: { 
      chart: { 
       zoomType: 'x' 
      }, 
      rangeSelector: { 
       enabled: true 
      }, 
      navigator: { 
       enabled: true 
      } 
     }, 
     series: [], 
     title: { 
      text: 'Hello' 
     }, 
     useHighStocks: true, 
     function (chart) { 
      // apply the date pickers 
      $timeout(function() { 
       $('input.highcharts-input-group').datepicker(); 
      }, 0); 
     } 

    } 

fiddle with angular

Kein Zweifel jquery-ui datepicker works in angular:

Answer 1

Der Fehler war in meiner Funktion am Ende des chartConfig:

func: function (chart) { 
     $timeout(function() { 
      $.datepicker.setDefaults({ 
        dateFormat: 'yy-mm-dd' 
        }); 
      //to make the calendar appear at the date that is already in the input 
      $('input.highcharts-range-selector').datepicker(); 
     }, 0); 
    } 

Answer 2

Ich weiß nicht, wie und wie man Winkel und jquery nicht mischt, aber Sie könnten einen Blick in die eckige Bibliothek ui-bootstrap werfen. Es hat einen konfigurierbaren Datumsauswahl.

https://angular-ui.github.io/bootstrap/

und blättern, bis Datumsauswahl