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'
 });
 
 
 $("#rangeSelector").on("change", function (event) {
   var range=$('#rangeSelector').jqxRangeSelector('getRange');
   alert(range.from+" "+range.to);
 });