jQDateRangeSlider (default ctor)

by bizamajig

HTML

<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderMouseTouch.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderDraggable.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderBar.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderHandle.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSliderLabel.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRangeSlider.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSliderHandle.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQDateRangeSlider.js"></script>
<script src="http://ghusse.github.io/jQRangeSlider/stable/jQRuler.js"></script>
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/iThing.css">
<article style="padding:50px 20px">
    <div id="slider"></div>
</article>

JavaScript

$("#slider").dateRangeSlider({
    bounds: {
        min: new Date(2013, 0, 1),
        max: new Date(2013, 0, 3, 23, 59, 59)
    },
    defaultValues: {
        min: new Date(2013, 0, 1, 8),
        max: new Date(2013, 0, 3, 18)
    },
    formatter: function (value) {
        var days = value.getDate(),
            month = value.getMonth() + 1,
            year = value.getFullYear(),
            hours = value.getHours(),
            minutes = value.getMinutes();
        return twoDigits(hours) + ":" + twoDigits(minutes) + " " + days + "/" + month + "/" + year;;
    }
});

function twoDigits(val) {
    if (val < 10) {
        return "0" + val;
    }

    return val;
}