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:
<!DOCTYPE html> < html >
< head >
< title >DateTimepicker</ title >
<!-- Include Bootstrap CDN -->
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
<!-- Include Moment.js CDN -->
< script type = "text/javascript" src =
</ script >
<!-- Include Bootstrap DateTimePicker CDN -->
< link
href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body >
<!-- Include datetime input to display
datetimepicker in container with
relative position -->
< div class = "container" style = "margin:100px" >
< div style = "position: relative" >
<!-- Include input field with id so
that we can use it in JavaScript
to set attributes.-->
< 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 >
|