jQuery RangeSelector

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

by Gary Geniesse

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>
Hour: 00:00:00
</div>
<div id="rangeSelector">
</div>
<div>
<p>
</p>
Hour: 19:00:00
</div>
<div id="rangeSelector2">
</div>

JavaScript

$("#rangeSelector").jqxRangeSelector({
     width: 400,
     height: 100,
     theme:'energyblue',
     min: new Date("12/30/2014 0:00:00"),
     max:  new Date("6/30/2015 19:00:00"),
     range: {
         from:  new Date("12/30/2014 19:00:00"),
         to:  new Date("1/30/2015 19:00:00")
     },
		majorTicksInterval: {months:1}, 
		minorTicksInterval: {weeks:1},
     showGroupLabels: false,
     showMajorTicks: true,
     showMarkers: true,
     showMinorTicks: true,
     snapToTicks: false,
     labelsFormat: 'd',
     markersFormat: 'd'

 });
  $("#rangeSelector2").jqxRangeSelector({
     width: 400,
     height: 100,
     theme:'energyblue',
     min: new Date("12/30/2014 19:00:00"),
     max:  new Date("6/30/2015 19:00:00"),
     range: {
         from:  new Date("12/30/2014 19:00:00"),
         to:  new Date("1/30/2015 19:00:00")
     },
		majorTicksInterval: {months:1}, 
		minorTicksInterval: {weeks:1},
     showGroupLabels: false,
     showMajorTicks: true,
     showMarkers: true,
     showMinorTicks: true,
     snapToTicks: false,
     labelsFormat: 'd',
     markersFormat: 'd'

 });