Bootstrap-datepicker

by Osama Qassar

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" class="datepicker" name="updatedDate" value='12/11/2012' data-date-format="dd/mm/yyyy" />
    <br/>
    <label for="yearsPicker">DOB(started with years):</label>
    <input type="text" id="yearsPicker" class="datepicker" data-date-format="dd/mm/yyyy" />
    <br/>
    <label for="monthsPicker">DOB(started with months):</label>
    <input type="text" id="monthsPicker" class="datepicker" data-date-format="dd/mm/yyyy" />
    
        <br/>
    <label for="minMonthsPicker">Pick months (minimum is month):</label>
    <input type="text" id="minMonthsPicker" class="datepicker" data-date-format="mm/yyyy" />
    
        <br/>
    <label for="minMonthsPicker">Pick months (minimum is month):</label>
    <input type="text" id="timePicker" class="datepicker" data-date-format="mm/yyyy" />
</div>

JavaScript

$(document).ready(function () {
    $('#updatedDate').datepicker();
    $('#yearsPicker').datepicker({'viewMode':'years'});
    $('#monthsPicker').datepicker({'viewMode':'months'});
    $('#timePicker').datepicker({'format':'HH:mm'});
    $('#minMonthsPicker').datepicker({'viewMode':'years', 'minViewMode':'months'}).changeDate();
});