JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.6.2/moment.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://codeseven.github.com/toastr/toastr.css">
<link rel="stylesheet" href="http://codeseven.github.com/toastr/toastr-responsive.css">
<script src="http://codeseven.github.com/toastr/toastr.js"></script>
<form class="form-horizontal well">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="firstName">First Name</label>
      <div class="controls">
          <input id="firstName" type="text" class="input-xlarge">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="lastName">Last Name</label>
      <div class="controls">
          <input id="lastName" type="text" class="input-xlarge">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="birthday">Birthday</label>
      <div class="controls">
          <input id="birthday" type="text" class="date input-xlarge">
      </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="anniversary">Anniversary</label>
      <div class="controls">
        <input id="anniversary" type="text" class="date input-xlarge">
      </div>
    </div>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save changes</button>
        <button class="btn">Cancel</button>
    </div>
    </fieldset>
</form>

CSS

.well { margin: 10px; }

JavaScript

(function( $ ) {

    $( document ).on( "focus", "input.date:not(.hasDatepicker)", function() {
        toastr.info( "Initializing " + this.id );

        $( this ).datepicker({
            minDate: moment().subtract( "months", 1 ).toDate(),
            maxDate: moment().add( "months", 1 ).toDate(),
            dateFormat: "d M, y",
            constrainInput: true,
            beforeShowDay: $.datepicker.noWeekends
        });
    });

})( jQuery );