JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<script src="http://egorkhmelev.github.com/jslider/js/jquery.slider.min.js"></script>
<link rel="stylesheet" href="http://egorkhmelev.github.com/jslider/css/jquery.slider.min.css">
<div id="wrapper">
    <input type="text" id="date-picker" value="1;5">
</div>

CSS

#wrapper {
    margin: 50px;
}

JavaScript

$(document).ready(function() {
    var totalDays = function(month, year) {
        return (new Date(year, month - 1, 0)).getDate();
    }

    var generateScale = function(month, year) {
        var total = totalDays(month, year);
        var scale = [];
        for (var i = 1; i <= total; i++) {
            if (i == 1 || i == total) {
                scale.push(i);
                continue;
            }
            scale.push("|");
        }
        return scale;
    }

    var month = 8;
    var year = 2012;

    $('#date-picker').slider({
        from: 1,
        to: totalDays(month, year),
        scale: generateScale(month, year),
        step: 1,
        round: 0,
        dimension: ""
    });
});