Bootstrap Datepicker Demo

by Geo George

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="container">
	
    <div class="row">
        <div class="col-sm-6">
            With data provide attribute
        </div>
        <div class="col-sm-6">
            <div class="input-group date" data-provide="datepicker">
                <input type="text" class="form-control" id="data-date">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <p class="bg-info">
                Uses the data-provide attribute in HTML
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            With JavaScript
        </div>
        <div class="col-sm-6">
            <div class="input-group date">
                <input type="text" class="form-control" id="js-date">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <p class="bg-info">
                No data-provide attribute in HTML. Initialized using JavaScript
            </p>
        </div>
    </div>
	<div class="row">
        <div class="col-sm-12">
            <p class="bg-primary" style="margin-top: 10px;">
                Plugin Used: <a href="https://github.com/uxsolutions/bootstrap-datepicker">https://github.com/uxsolutions/bootstrap-datepicker</a>
...

CSS

.bg-primary a {
	color: #fff;	
}

JavaScript

$(document).ready(function() {
    $('#js-date').datepicker({
     format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
    });
     $('.bg-primary').data('DateTimePicker').show();
});