Bootstrap Date picker
Simple Bootstrap Date Picker is used for creating a calendar.
HTML
<div class="form-group">
<label for="inputState">Calendar</label>
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span><i class="fa fa-calendar" aria-hidden="true"></i></span>
</span>
</div>
</div>JavaScript
<script type="text/javascript">
$(document).ready(function () {
$('#datetimepicker').datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true
});
});
</script>Example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<title>Hello, world!</title>
<link href="bootstrap-datepicker.css" rel="stylesheet">
</head>
<body>
<h1>HTML File Upload</h1>
<div class="form-group">
<label for="inputState">Calendar</label>
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span><i class="fa fa-calendar" aria-hidden="true"></i></span>
</span>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#datetimepicker').datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true
});
});
</script>
</body>
</html>Bootstrap Datepicker | bootstrap calendar
Current Date:
HTML
<div class="form-group">
<label for="inputState">Current Date</label>
<div class="input-group date" id="datePicker">
<input type="text" class="form-control" name="date" value="">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
OR
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>JavaScript
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$( '#datePicker' ).datepicker( 'setDate', today );Bootstrap DateTimePicker. You can customize this code further as per your requirement.