Datepicker jquery-ui for angular highcharts-ng rangeSelector

Question

I am trying to add a datepicker (jquery-ui) to the range selector but I can't get it to work.

I want to get something like this example with jquery:

 $.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

But done with angular:

$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

No doubt jquery-ui datepicker works in angular:

var app = angular.module('myApp', []);

        app.directive('datepicker', function () {
            return {
                restrict: 'C',
                require: 'ngModel',
                 link: function (scope, element, attrs, ngModelCtrl) {
                    $(element).datepicker({
                        dateFormat: 'dd, MM, yy',
                        onSelect: function (date) {
                            scope.date = date;
                            scope.$apply();
                        }
                    });
                }    
            };
        });

        app.controller('myCtrl', function($scope) {
            console.log('it works');
            $scope.count = 0;

            $scope.popdp=function(event){
                console.log('XD')
            event.preventDefault();
                $('.datepicker2').datepicker({
                    dateFormat: 'dd, MM, yy',
                    onSelect: function (date) {
                        scope.date = date;
                        scope.$apply();
                    }
                });
            }
        });

Answer 1

The error was in my function at the end of the 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);
    }