Make datepicker work with highcharts

Question

I have a rails 3 highchart built into the program, and I'm trying to expand it further so that it is attached to it with high definition. The purpose of why I am trying to do this is that the user can select a specific date and will download data for the selected date. I searched and found something similar to what I'm trying to achieve http://jsfiddle.net/E8WQ5/8/

Here you have a normal base height chart . Base stock chart . What I'm trying to do is replace the range selector with a datepicker. Is it possible, and if so, how can I do it. I followed suit (the first link I put) and the datepicker function is implemented. What I'm trying to do now is to make the datepicker really work with highcharts. My knowledge with javascript is not the highest, so it is a pity that this may seem like an easy question.

All I'm struggling with is replacing the date range selector with datepicker ..

Answer 1

You must change the datepicker onselect event handler

onSelect: function( selectedDate ) {
    var option = this.id == "from" ? "minDate" : "maxDate",
    instance = $( this ).data( "datepicker" ),
    date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat,
         selectedDate, instance.settings );
    dates.not( this ).datepicker( "option", option, date );
}

:

onSelect: function( selectedDate ) {
    var option = this.id == "from" ? "minDate" : "maxDate",
    instance = $( this ).data( "datepicker" ),
    date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat,
         selectedDate, instance.settings );
    dates.not( this ).datepicker( "option", option, date );

    var startDate=$("#from")[0].value;
    var endDate=$("#to")[0].value;
    if (startDate!=="" && endDate!=="") {
        startDate=startDate.split("/");
        endDate=endDate.split("/");
        chart.xAxis[0].setExtremes(
            Date.UTC(startDate[2], startDate[0]-1, startDate[1]),
            Date.UTC(endDate[2], endDate[0]-1, endDate[1])
        );
    }
}

, , , , .

chart.xAxis [0].getExtremes(), , .

JQuery ( Mootools) datepicker, , , , 't Highstock.