JavaScript RangeSelector

Set the groupLabelsFormatFunction 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 id="rangeSelector">
</div>

JavaScript

$("#rangeSelector").jqxRangeSelector({
    width: 900,
    height: 100,
    theme:'energyblue',
    min: "December 30, 2014 19:00:00",
    max: "June 30, 2016",
    groupLabelsFormatFunction: function (value, date) {
        return "<span style='font-style: italic;'>" + value + "<span>";
    },
    range: {
        from: "December 31, 2014",
        to: "January 31, 2015",
        min: "day",
    },
    majorTicksInterval: "week",
    minorTicksInterval: "day",
    labelsFormat: 'dd',
    markersFormat: 'd/MMM/yyyy',
    showGroupLabels: true
});