Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by jakehowl

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<h1>Bootstrap DatePicker</h1>

<div class="row controls-row">
	<div class="control-group span6">
		<label class="control-label">Date</label>
        <div class="controls"><input type="text" id="SearchAuditNumber" class="span2" rel="date date-advanced" />
	</div>
</div><!--/controls-row-->

CSS

body {
    margin: 20px;
}

JavaScript

$("input[rel*='date']")
  .datepicker({dateFormat: "dd-M-yy"})
  .wrap('<div class="input-append" />')
  .attr("readonly",true)
  .after($('<button class="btn"><i class="icon icon-calendar" /></button>')
  .click(function(){$(this).parent().parent().children().first().focus()}));

$("input[rel*='date-advanced']")
  .parent().children().last()
  .wrap($('<div class="btn-group" />'))
  .before('<button class="btn dropdown-toggle" style="border-radius:0 !important;" data-toggle="dropdown"><span class="caret"></span></button>')
  .before($('<ul class="dropdown-menu" role="menu"><li data-increment="1"><a>In a month</a></li><li data-increment="3"><a>In 3 months</a></li><li data-increment="6"><a>Within 6 months</a></li><li data-increment="12"><a>In a year</a></li></ul>').on('click', 'li', function(){$(this).closest('.input-append').children().first().val(new Date((new Date().setMonth(new Date().getMonth()+$(this).data('increment')))).toUTCString().substring(5,16).replace(/ /g,"-"))})
);