Html RangeSelector

Invoke the setRange method 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>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Set new range" />

JavaScript

var now = new Date();

var minDate = new Date();
    minDate.setHours(0);
    minDate.setMinutes(0);
    minDate.setSeconds(0);
    minDate.setMilliseconds(0);
    minDate.setFullYear(minDate.getFullYear() - 1);
    
var maxDate = new Date(now.getTime() + 24*60*60000);

$("#rangeSelector").jqxRangeSelector({
     width: 611,
     height: 10, 
     min: minDate, 
     max: maxDate, 
     labelsOnTicks: false, 
     range: { from: now, to: maxDate, max:{weeks:52}},
      majorTicksInterval: "month", minorTicksInterval: "day", labelsFormat: 'MMM', 	  
      markersFormat:'dd.MM.yyyy',
     showGroupLabels: true
 });
 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 200,
     height: 30
 });
 $('#jqxbutton').click(function () {
 			var from = new Date("July 16, 2013 00:00:00");
      var until = new Date("July 25, 2013 00:00:00");
     $('#rangeSelector').jqxRangeSelector({'min':from});
     $("#rangeSelector").jqxRangeSelector('setRange', from, until);
 });