Bootstrap-datepicker
HTML
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css">
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css">
<script src="http://cdn5.iconfinder.com/data/icons/duesseldorf/32/calendar.png"></script>
<div style="margin: 10px">
<label for="updatedDate">Bootstrap datepicker:</label>
<input type="text" id="updatedDate" data-toggle="datepicker" />
<br/>
<label for="yearsPicker">DOB(started with years):</label>
<input type="text" data-toggle="datepickeryear" id="yearsPicker" class="datepicker" data-date-format="dd/mm/yyyy" />
<br/>
<label for="monthsPicker">DOB(started with months):</label>
<input type="text" id="monthsPicker" data-toggle="datepickeryearmonth"/>
</div>
JavaScript
$(document).ready(function () {
$('[data-toggle="datepicker"]').datepicker({'viewMode':'years'});
$('[data-toggle="datepickeryear"]').datepicker({'viewMode':'years'});
$('data-toggle="datepickeryearmonth" ').datepicker({'viewMode':'months'});
$('[data-toggle="datepickeryearmonth"]').datepicker({'viewMode':'years', 'minViewMode':'months'}).changeDate();
});