JavaScript RangeSelector

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

by jqwidgets

HTML

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

JavaScript

$("#rangeSelector").jqxRangeSelector({
    width: 500,
    height: 100,
    theme:'energyblue',
    min: "June 01, 2013",
    max: "August 31, 2013",
    groupLabelsFormatFunction: function (value,
    date) {
        return "<span style='font-style: italic;'>" + value + "<span>";
    },
    range: {
        from: "July 29, 2013",
        to: "August 05, 2013",
        min: "day",
        max: {
            weeks: 3
        }
    },
    majorTicksInterval: "week",
    minorTicksInterval: "day",
    labelsFormat: 'dd',
    markersFormat: 'd',
    showGroupLabels: true
});