JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js"></script>
<div class="details">
    <div class="filters">
        <div class="btn-group date-filter"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Date Range
            <span class="caret"></span>
          </a>

            <ul class="dropdown-menu">
                <li><a href="#">Last 3 Months</a>
                </li>
                <li><a href="#">Last 6 Months</a>
                </li>
                <li><a href="#">Last 12 months</a>
                </li>
                <li><a href="#" class="show-custom-range">Custom Range</a>
                </li>
                <li class="custom-range-box">
                    <div class="custom-range">
                        <div class="start-date">
                            <label>From</label>
                            <div class="input-append date datepicker" data-date="02-2012" data-date-format="mm-yyyy">
                                <input type="text" class="input-small"> <span class="add-on"><i class="icon-calendar"></i></span>

                            </div>
                        </div>
                        <div class="end-date">
                            <label>To</label>
                            <div class="input-append date datepicker" data-date="02-2012" data-date-format="mm-yyyy">
                                <input type="text" class="input-small"> <span class="add-on"><i class="icon-calendar"></i></span>

                            </div>
                        </div>
                        <button...

JavaScript

$(document).ready(function () {
    (function initializeFilters() {
        $(".date-filter").on("click", "ul li a", function (e) {
            e.preventDefault();

            if (!$(this).hasClass("show-custom-range")) {
                $(this).parents("ul").children().last().hide();
            } else {
                $(this).parent().next().show();
            }

            var thisValue;
            thisValue = $(this).html();
            $(this).parents("ul").find("a").removeClass("a-disabled");
            $(this).addClass("a-disabled");
            $(".breadcrumb li span").html(thisValue);
        });

        $('.date-filter').on("click", "ul li *", function (e) {
            e.stopPropagation();
        });

        $(".datepicker").datepicker({
            format: "mm-yyyy",
            viewMode: "months",
            minViewMode: "months",
            autoclose: true
        });

        $(document).on('click', 'span.month, th.next, th.prev, th.switch, span.year', function (e) {
            e.stopPropagation();
        });

    })();
});