Bootstrap-datepicker is a flexible datepicker widget in the bootstrap style.
It requires bootstrap 2.0.4+ and jquery 1.7.1+.
Syntax:
Used datepicker method to initialise datepicker using jquery on target input element:
$('.datepicker').datepicker();
Options are passed to the datepicker function at instantiation.
Eg:
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});
Most options can also be provided as data-attributes on the target element:
<input class="datepicker" data-date-format="mm/dd/yyyy">
Some options list:
For list of options, see here.
Bootstrap: datepicker sandbox:
You can use the following bootstrap online datepicker sandbox to auto-generate bootstrap datepicker html and script.
To use, see here.
Examples:
Eg: basic datepicker with calender icon:
Cdn example.
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function () {
$('.input-group.date').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true,
});
});
</script>
</head>
<body>
<div class="container">
<div class="input-group date" style="width:250px">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</body>
</html>
Outputs:
Eg2: month year only picker:
Using font awesome calender icon.
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
@* font awesome reference *@
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#datepicker").datepicker(
{
format: 'mm-yyyy',
minViewMode: "months",
startView: "months",
autoclose: true,
});
});
</script>
</head>
<body>
<div class="container">
<div class="input-append date" id="datepicker" data-date="01-2017" data-date-format="mm-yyyy">
<input type="text" readonly="readonly" name="date">
@* add-on css class is required *@
<span class="add-on"><i class="fa fa-calendar" aria-hidden="true"></i></span>
</div>
</div>
</body>
</html>
Outputs:
Eg3: year only picker:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container text-center">
<input class="date-own form-control" style="width: 300px;" type="text">
<script type="text/javascript">
$('.date-own').datepicker({
minViewMode: 2,
format: 'yyyy'
});
</script>
</div>
</body>
</html>
Outputs:
For more information on year picker, see here.
For more information, see here.
And here.
To search for a font awesome icon, see here.
