JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/moment.min.js"></script>
<script src="http://code.highcharts.com/stock/1.3.7/highstock.js"></script>
<script src="http://code.highcharts.com/3.0.7/modules/exporting.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.css">
<div id="container" style="height: 400px; min-width: 600px"></div>
JavaScript
$(function () {
//$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Need sample data by the minute.
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector : {
selected : 1,
inputDateFormat : "%m/%d/%Y",
inputEditDateFormat : "%m/%d/%Y",
inputDateParser: function (value) {
console.log("Before parse:");
console.log(value);
/*
var parsedDate = Date.UTC(
parseInt(value.substr(6, 4)),
parseInt(value.substr(0, 2) - 1),
parseInt(value.substr(3, 2)),
12
);
*/
// Parse using moment.js
//var parsedDate = moment(value, "MM/DD/YYYY");
//var parsedDate = moment.utc(value, "MM/DD/YYYY");
var parsedDate = moment.utc(value, "MM/DD/YYYY").hours(0);
console.log("After parse:");
console.log(moment.utc(value, "MM/DD/YYYY").hours(0));
return parsedDate;
}
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2,
xDateFormat: '%A, %b %e, %l:%M %P'
}
//'%Y-%m-%d<br/>%H:%M'
//'%A, %b %e, %l:%M %P'
...