<!DOCTYPE HTML> <html> <head> <title>Timeline | Show current and custom time bars</title> <style type="text/css"> body, html { font-family: sans-serif; font-size: 11pt; } </style> <script src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> </head> <body> <p> <input type="text" id="setTime" value="2014-02-07" /> <input type="button" id="set" value="Set custom time" /> </p> <p> <input type="button" id="get" value="Get custom time" /> <span id="getTime"></span> </p> <p> <code>timechange</code> event: <span id="timechangeEvent"></span> </p> <p> <code>timechanged</code> event: <span id="timechangedEvent"></span> </p> <div id="visualization"></div> <script type="text/javascript"> var container = document.getElementById('visualization'); var items = new vis.DataSet(); var options = { showCurrentTime: true, showCustomTime: true, start: new Date(Date.now() - 1000 * 60 * 60 * 24), end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6) }; var timeline = new vis.Timeline(container, items, options); document.getElementById('set').onclick = function () { var time = document.getElementById('setTime').value; timeline.setCustomTime(time); }; document.getElementById('setTime').value = new Date().toISOString().substring(0, 10); document.getElementById('get').onclick = function () { document.getElementById('getTime').innerHTML = timeline.getCustomTime(); }; timeline.on('timechange', function (properties) { document.getElementById('timechangeEvent').innerHTML = properties.time; }); timeline.on('timechanged', function (properties) { document.getElementById('timechangedEvent').innerHTML = properties.time; }); </script> </body> </html>