How to set Bootstrap Timepicker using datetimepicker library ?
Last Updated :
27 Jan, 2022
In this article, we will see how we can implement DateTimePicker using a Bootstrap Daterpicker plugin to select a date and time using jQuery. By default, today’s date is selected. DateTimePicker has various configurable options which can be used to use DateTimePicker as per the requirements. In this tutorial, we will see how we can implement DateTimePicker using a Bootstrap DaterTimePicker plugin to select a date and time.
DateTimePicker has the following views:
- Decade View
- Year View
- Month View
- Day View
- Hour View
- Day view with meridian
- Hour view with meridian
DateTimePicker can be formatted in the following ways:
- yyyy-mm-dd
- yyyy-mm-dd hh:ii
- yyyy-mm-ddThh:ii
- yyyy-mm-dd hh:ii:ss
- yyyy-mm-ddThh:ii:ssZ
DateTimePicker Format: The default format is the string ‘mm/dd/yyyy’.
Format |
Description |
Example (6/7/2021 06:02:09) |
d |
Displays day of the month without leading zeros |
6 |
dd |
Displays day of the month |
Fr |
M |
Displays month without leading zeros |
7 |
MM |
Displays month with leading zeros |
07 |
YY |
Displays year in 2-digit format- |
21 |
YYYY |
Displays year in 4-digit format |
2021 |
a |
Displays meridian in lowercase |
am |
A |
Displays meridian in uppercase |
AM |
s |
Displays seconds without leading zeros |
9 |
ss |
Displays seconds with leading zeros |
09 |
m |
Displays minutes without leading zeros |
2 |
mm |
Displays minutes with leading zeros |
02 |
h |
Displays an hour without leading zeros in a 24-hour format |
18 |
hh |
Displays hour with leading zeros in a 24-hour format |
18 |
Setting up DateTimePicker:
Step 1: Include Bootstrap and jQuery CDN into your <head> before all other stylesheets to load our CSS.
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://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>
Step 2: Include DateTimePicker JS and CSS CDN just after the Bootstrap CSS CDN.
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js”></script>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css” rel=”stylesheet”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js”> </script>
Step 3: Include the code below in <body> to accept time from the user.
<div class="container" style="margin: 50px">
<div style="position: relative">
<input class="form-control" type="text" id="time"/>
</div>
</div>
Note: DateTimePicker component should always be placed within a relatively positioned container.
Step 4: Add the following JavaScript in <script> tag after the <body> tag to specify ‘HH:mm:ss’ format to DateTimePicker.
$('#time').datetimepicker({
format: 'yyyy-mm-dd'
});
Note: Custom format can be specified as per the requirement.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >DateTimepicker</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
< script type = "text/javascript" src =
</ script >
< link
href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
< div class = "container" style = "margin:100px" >
< div style = "position: relative" >
< input class = "form-control"
type = "text" id = "datetime" />
</ div >
</ div >
< script >
// Below code sets format to the
// datetimepicker having id as
// datetime
$('#datetime').datetimepicker({
format: 'hh:mm:ss a'
});
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...