JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://www.dangrossman.info/wp-content/themes/2012/moment.js"></script>
<script src="http://www.dangrossman.info/wp-content/themes/2012/daterangepicker.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.dangrossman.info/wp-content/themes/2012/daterangepicker-bs3.css">
<form class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <div class="controls">
                <div class="input-prepend input-group"> <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>

                    <input type="text" style="width: 200px" name="reservation" id="reservation" class="form-control" value="03/18/2013 - 03/23/2013" />
                </div>
            </div>
        </div>
    </fieldset>
</form>

JavaScript

$(document).ready(function () {
    $('#reservation').daterangepicker(null, function (start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
    });
});