JavaScript RangeSelector

Set the markersFormat property of the jqxRangeSelector. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="rangeSelector">
</div>

JavaScript

var curTime = new Date();
var fromTime = new Date();
fromTime.setDate(curTime.getDate() - 31);
$("#rangeSelector").jqxRangeSelector({
  width: 500,
  height: 100,
  theme: 'energyblue',
  min: new Date(fromTime.getFullYear(), fromTime.getMonth(), fromTime.getDate(), fromTime.getHours(), fromTime.getMinutes(), fromTime.getSeconds()),
  max: new Date(curTime.getFullYear(), curTime.getMonth(), curTime.getDate(), curTime.getHours(), curTime.getMinutes(), curTime.getSeconds()),
  range: {
    from: new Date(fromTime.getFullYear(), fromTime.getMonth(), fromTime.getDate(), fromTime.getHours(), fromTime.getMinutes(), fromTime.getSeconds()),
    to: new Date(curTime.getFullYear(), curTime.getMonth(), curTime.getDate(), curTime.getHours(), curTime.getMinutes(), curTime.getSeconds())
  },
  majorTicksInterval: {
    days: 7
  },
  minorTicksInterval: {
    minutes: 30
  },
  labelsFormat: 'MM/dd',
  //showGroupLabels: true,
 // markersFormat: 'MM/dd/yyyy HH:mm',
  markersFormatFunction: function(value, position) {
    return $.jqx.formatDate(new Date(value), 'MM/dd/yyyy HH:mm');
  }
});