Bootstrap Datepicker
What is a Bootstrap Datepicker?
It is used to display a calendar with the date, month, and time from a dropdown menu.
We will use an example to see how the date pickers are used in bootstrap. The time can be displayed in various formats, and the most frequently used formats are “MM:DD:YYYY”, “DD:MM:YYYY”, “YYYY:MM:DD”, etc.
The default format is, "MM:DD:YYYY”.
Here,
MM:
- Refers to the months.
- Can take the values from 01 to 12, i.e. January, February, March, April, May, June, July, August, September, October, November and December.
DD:
- Refers to the date.
- Lies between 01 to 31.
YYYY:
- Refers to the years.
- For example, 2020, 2002, 2001, 2045 etc.
Usage of date-pickers
- Selecting interview slots
- Marking meeting schedules
- In Time tables
- Exam Slot bookings
- Choosing movie/show timings etc.
Example 1:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap DatePicker Example</title>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
background-color: black;
}
.container{
margin: auto;
padding: auto;
}
#content{
align-items: center;
align-self: center;
align-content: center;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class = "col-sm-12 col-lg-12 " id = "content" >
<h2>Bootstrap Datepicker Example</h2>
<br>
<p>Following is an example to demonstrate the Bootstrap Datepicker Example:</p><br>
<input type = "date" name = "date">
</div>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Output:
We can see the calendar from the dropdown and choose a date accordingly, as shown below,
Example 2:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Bootstrap Datepicker Example</title>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{
font-family: Arial, Helvetica, sans-serif; color: black
}
.bootstrap-iso form button, .bootstrap-iso form button:hover{
color: white !important;
}
.asteriskField{
color: red;
}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: thistle;
color: rgb(39, 29, 29);
}
.form-group{
padding: 20px;
margin: 20px;
}
</style>
<body>
<div class="bootstrap-iso">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<form class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Set the calender here:
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-warning " name="submit" type="submit">
Set the Calender
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
</html>
Output:
Click on the input field to access the calendar. As shown below, you can change the date from the dropdown.
Methods that can be used with date-picker
.datepicker
It is used to initialize a datepicker.
remove
It takes no arguments and is used to remove the datepicker. It removes all the attached events, internally attached objects, and added HTML elements.
show
It takes no arguments and is used to show the datepicker.
hide
It takes no arguments and is used to hide the datepicker.
update
It takes no arguments and is used to update the datepicker with the new input value given by the user.
setStartDate
It takes a string for an argument, for example:
startDate (string)
It is used to set a new lower date limit on the datepicker and omit startDate.
It can provide an otherwise false value to unset the limit.
setEndDate
It takes a string for an argument, for example:
endDate (String)
It is used to set a new upper date limit on the datepicker and is used to omit endDate.
It can provide an otherwise false value to unset the limit.
setDaysOfWeekDisabled
It takes a string or an array for an argument, for example:
daysOfWeekDisabled (String|Array)
It is used to set the days of the week that should be disabled and is used to omit daysOfWeekDisabled.
It can provide an otherwise false value to unset the disabled days.