Fixed #247: Support for custom date formatting of the labels on the time axis

HISTORY.md

@@ -12,6 +12,10 @@ http://visjs.org
 
 - Fixed round-off errors of zero on the y-axis.
 
+### Timeline
+
+- Support for custom date formatting of the labels on the time axis.
+
 
 ## 2014-12-09, version 3.7.2
 

docs/css/style.css

@@ -16,7 +16,7 @@ body, td, th {
   position: relative;
   margin: 0 auto;
   padding: 10px 10px 50px 10px;
-  width: 700px;
+  width: 970px;
   max-width: 100%;
   box-sizing: border-box;
 }

docs/timeline.html

@@ -465,6 +465,39 @@ var options = {
         end date.</td>
 </tr>
 
+<tr>
+    <td>format</td>
+    <td>Object</td>
+    <td>none</td>
+    <td>
+      Apply custom date formatting of the labels on the time axis. The default value of <code>format</code> is:
+      <pre class="prettyprint lang-js">{
+  minorLabels: {
+    millisecond:'SSS',
+    second:     's',
+    minute:     'HH:mm',
+    hour:       'HH:mm',
+    weekday:    'ddd D',
+    day:        'D',
+    month:      'MMM',
+    year:       'YYYY'
+  },
+  majorLabels: {
+    millisecond:'HH:mm:ss',
+    second:     'D MMMM HH:mm',
+    minute:     'ddd D MMMM',
+    hour:       'ddd D MMMM',
+    weekday:    'MMMM YYYY',
+    day:        'MMMM YYYY',
+    month:      'YYYY',
+    year:       ''
+  }
+}</pre>
+      For values which not provided in the customized <code>options.format</code>, the default values will be used.
+      All available formatting syntax is described in the <a href="http://momentjs.com/docs/#/displaying/format/">docs of moment.js</a>.
+    </td>
+</tr>
+
 <tr>
     <td>groupOrder</td>
     <td>String | Function</td>

lib/timeline/TimeStep.js

@@ -1,5 +1,6 @@
 var moment = require('../module/moment');
 var DateUtil = require('./DateUtil');
+var util = require('../util');
 
 /**
  * @constructor  TimeStep
@@ -48,32 +49,45 @@ function TimeStep(start, end, minimumStep, hiddenDates) {
   if (hiddenDates === undefined) {
     this.hiddenDates = [];
   }
+
+  this.format = TimeStep.FORMAT; // default formatting
 }
 
 // Time formatting
 TimeStep.FORMAT = {
   minorLabels: {
-    'millisecond':'SSS',
-    'second':     's',
-    'minute':     'HH:mm',
-    'hour':       'HH:mm',
-    'weekday':    'ddd D',
-    'day':        'D',
-    'month':      'MMM',
-    'year':       'YYYY'
+    millisecond:'SSS',
+    second:     's',
+    minute:     'HH:mm',
+    hour:       'HH:mm',
+    weekday:    'ddd D',
+    day:        'D',
+    month:      'MMM',
+    year:       'YYYY'
   },
   majorLabels: {
-    'millisecond':'HH:mm:ss',
-    'second':     'D MMMM HH:mm',
-    'minute':     'ddd D MMMM',
-    'hour':       'ddd D MMMM',
-    'weekday':    'MMMM YYYY',
-    'day':        'MMMM YYYY',
-    'month':      'YYYY',
-    'year':       ''
+    millisecond:'HH:mm:ss',
+    second:     'D MMMM HH:mm',
+    minute:     'ddd D MMMM',
+    hour:       'ddd D MMMM',
+    weekday:    'MMMM YYYY',
+    day:        'MMMM YYYY',
+    month:      'YYYY',
+    year:       ''
   }
 };
 
+/**
+ * Set custom formatting for the minor an major labels of the TimeStep.
+ * Both `minorLabels` and `majorLabels` are an Object with properties:
+ * 'millisecond, 'second, 'minute', 'hour', 'weekday, 'day, 'month, 'year'.
+ * @param {{minorLabels: Object, majorLabels: Object}} format
+ */
+TimeStep.prototype.setFormat = function (format) {
+  var defaultFormat = util.deepExtend({}, TimeStep.FORMAT);
+  this.format = util.deepExtend(defaultFormat, format);
+};
+
 /**
  * Set a new range
  * If minimumStep is provided, the step size is chosen as close as possible
@@ -493,7 +507,7 @@ TimeStep.prototype.getLabelMinor = function(date) {
     date = this.current;
   }
 
-  var format = TimeStep.FORMAT.minorLabels[this.scale];
+  var format = this.format.minorLabels[this.scale];
   return (format && format.length > 0) ? moment(date).format(format) : '';
 };
 
@@ -508,7 +522,7 @@ TimeStep.prototype.getLabelMajor = function(date) {
     date = this.current;
   }
 
-  var format = TimeStep.FORMAT.majorLabels[this.scale];
+  var format = this.format.majorLabels[this.scale];
   return (format && format.length > 0) ? moment(date).format(format) : '';
 };
 

lib/timeline/component/TimeAxis.js

@@ -39,7 +39,8 @@ function TimeAxis (body, options) {
     orientation: 'bottom',  // supported: 'top', 'bottom'
     // TODO: implement timeaxis orientations 'left' and 'right'
     showMinorLabels: true,
-    showMajorLabels: true
+    showMajorLabels: true,
+    format: null
   };
   this.options = util.extend({}, this.defaultOptions);
 
@@ -64,7 +65,7 @@ TimeAxis.prototype = new Component();
 TimeAxis.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels','hiddenDates'], this.options, options);
+    util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels','hiddenDates', 'format'], this.options, options);
 
     // apply locale to moment.js
     // TODO: not so nice, this is applied globally to moment.js
@@ -181,8 +182,10 @@ TimeAxis.prototype._repaintLabels = function () {
   var minimumStep = timeLabelsize - DateUtil.getHiddenDurationBefore(this.body.hiddenDates, this.body.range, timeLabelsize);
   minimumStep -= this.body.util.toTime(0).valueOf();
 
-
   var step = new TimeStep(new Date(start), new Date(end), minimumStep, this.body.hiddenDates);
+  if (this.options.format) {
+    step.setFormat(this.options.format);
+  }
   this.step = step;
 
   // Move all DOM elements to a "redundant" list, where they

test/timeline.html

@@ -94,6 +94,16 @@
     //height: 200,
     showCurrentTime: true,
     showCustomTime: true,
+    format: {
+      minorLabels: {
+        'weekday':    'dddd D',
+        'month': 'MMMM'
+      },
+      majorLabels: {
+        'minute':     'dddd D MMMM',
+        'hour':       'dddd D MMMM'
+      }
+    },
     //clickToUse: true,
     //min: moment('2013-01-01'),
     //max: moment('2013-12-31'),