DateTimePicker Using Twitter Bootstrap

In this tutorial, I'm going to show how to use the datetime picker using bootstrap framework. Datetime picker, allows user to select Day, Month and Year as well as the time picking for Hour and Minute. This time lets start building this project. But before this, make sure you have already downloaded the bootstrap-datepicker. Next, let’s create an html file. And will save it as “index.html” inside datepicker folder in our localserver. Then add the following code: This is for the heading area wher we specify here the stylesheet to be used for this application.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  6.     <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
  7. </head>
Then for the body, add the following code:
  1. <body>
  2. <div class="container">
  3.     <form action="" class="form-horizontal"  role="form">
  4.         <fieldset>
  5.             <legend>Bootstrap-DateTimePicker</legend>
  6.         <!—this area for Date and time--->
  7.  
  8.         </fieldset>
  9.     </form>
  10. </div><!---End Container-->
This time let’s add HTML tags for Data and Time. And here the following code:
  1. <div class="form-group">
  2.     <label class="col-md-2 control-label" for="dtp_input1">Date And Time</label>
  3.  
  4.     <div class="input-group date form_datetime col-md-5" data-date="1989-09-16T05:25:07Z"
  5.     data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  6.       <input class="form-control" readonly size="16" type="text" value=""> <span class=
  7.       "input-group-addon glyphicon glyphicon-remove"></span> <span class=
  8.       "input-group-addon glyphicon glyphicon-th"></span>
  9.     </div><input id="dtp_input1" type="hidden" value=""><br>
  10.   </div>
In the data-date, we just simply specified the format to a field. Then we set the input tags as read only and to erase the content inside it, we use “glyphicon glyphicon-remove" class. Output: Then in our case, we use “dd MM yyyy - HH:ii p format. And the default string format : 'mm/dd/yyyy ‘, and you use some of Date format and combination: * p : meridian in lower case ('am' or 'pm') - according to locale file * P : meridian in upper case ('AM' or 'PM') - according to locale file * s : seconds without leading zeros * ss : seconds, 2 digits with leading zeros * i : minutes without leading zeros * ii : minutes, 2 digits with leading zeros * h : hour without leading zeros - 24-hour format * hh : hour, 2 digits with leading zeros - 24-hour format * H : hour without leading zeros - 12-hour format * HH : hour, 2 digits with leading zeros - 12-hour format * d : day of the month without leading zeros * dd : day of the month, 2 digits with leading zeros * m : numeric representation of month without leading zeros * mm : numeric representation of the month, 2 digits with leading zeros * M : short textual representation of a month, three letters * MM : full textual representation of a month, such as January or March * yy : two digit representation of a year * yyyy : full numeric representation of a year, 4 digits And add the following code for Date only.
  1. <div class="form-group">
  2.     <label class="col-md-2 control-label" for="dtp_input2">Date Only</label>
  3.  
  4.     <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy"
  5.     data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
  6.       <input class="form-control" readonly size="16" type="text" value=""> <span class=
  7.       "input-group-addon glyphicon glyphicon-remove"></span> <span class=
  8.       "input-group-addon glyphicon glyphicon-calendar"></span>
  9.     </div><input id="dtp_input2" type="hidden" value=""><br>
  10.   </div>
Output: Then, for Time only.
  1. <div class="form-group">
  2.     <label class="col-md-2 control-label" for="dtp_input3">Time Only</label>
  3.  
  4.     <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii"
  5.     data-link-field="dtp_input3" data-link-format="hh:ii">
  6.       <input class="form-control" readonly size="16" type="text" value=""> <span class=
  7.       "input-group-addon glyphicon glyphicon-remove"></span> <span class=
  8.       "input-group-addon glyphicon glyphicon-time"></span>
  9.     </div><input id="dtp_input3" type="hidden" value=""><br>
  10.   </div>
Output: And under the , add the following code: In this code, using bootstrap-datetimepicker.js we call the datetimepicker via javascript.
  1. <script type="text/javascript" src="jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
  2. <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  3. <script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
  4. <script type="text/javascript" src="js/locales/bootstrap-datetimepicker.uk.js" charset="UTF-8"></script>
  5.  
  6. <script type="text/javascript">
  7. //in this line of code, to display the datetimepicker,  we used ‘form_datetime’ as an argument to be
  8. //passed in javascript. This is for Date and Time.
  9.     $('.form_datetime').datetimepicker({
  10.         language:  'en',
  11.         weekStart: 1,
  12.         todayBtn:  1,
  13.                 autoclose: 1,
  14.                 todayHighlight: 1,
  15.                 startView: 2,
  16.                 forceParse: 0,
  17.         showMeridian: 1
  18.     });
  19. //this is for Date only
  20.         $('.form_date').datetimepicker({
  21.         language:  'en',
  22.         weekStart: 1,
  23.         todayBtn:  1,
  24.                 autoclose: 1,
  25.                 todayHighlight: 1,
  26.                 startView: 2,
  27.                 minView: 2,
  28.                 forceParse: 0
  29.     });
  30. //this is for Time Only
  31.         $('.form_time').datetimepicker({
  32.         language:  'en',
  33.         weekStart: 1,
  34.         todayBtn:  1,
  35.                 autoclose: 1,
  36.                 todayHighlight: 1,
  37.                 startView: 1,
  38.                 minView: 0,
  39.                 maxView: 1,
  40.                 forceParse: 0
  41.     });
  42. </script>
  43.  
  44. </body>
  45. </html>
Here’s the folder structure used in this tutorial: /datepicker |--bootstrap | |-css | | |-bootstrap.css | | |-bootstrap.min.css | | |-bootstrap-theme.css | | |-bootstrap-theme.min.css | |-fonts | | |-glyphicons-halflings-regular.eot | | |-glyphicons-halflings-regular | | |-glyphicons-halflings-regular | | |-glyphicons-halflings-regular | |-js | | |-bootstrap.js | | |-bootstrap.min.js |--css | |-bootstrap-datetimepicker.css | |-bootstrap-datetimepicker.min.css |--jquery | |-jquery-1.8.3.min.js |--js | |-locales | |-bootstrap-datetimepicker.js | |-bootstrap-datetimepicker.min.js And here’s all the code used in this tutorial:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  6.     <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
  7. </head>
  8.  
  9. <body>
  10. <div class="container">
  11.     <form action="" class="form-horizontal"  role="form">
  12.         <fieldset>
  13.             <legend>Bootstrap-DateTimePicker</legend>
  14.             <div class="form-group">
  15.                 <label for="dtp_input1" class="col-md-2 control-label">Date And Time</label>
  16.                 <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  17.                     <input class="form-control" size="16" type="text" value="" readonly>
  18.                     <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
  19.                                         <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  20.                 </div>
  21.                                 <input type="hidden" id="dtp_input1" value="" /><br/>
  22.             </div>
  23.                         <div class="form-group">
  24.                 <label for="dtp_input2" class="col-md-2 control-label">Date Only</label>
  25.                 <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
  26.                     <input class="form-control" size="16" type="text" value="" readonly>
  27.                     <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
  28.                                         <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
  29.                 </div>
  30.                                 <input type="hidden" id="dtp_input2" value="" /><br/>
  31.             </div>
  32.                         <div class="form-group">
  33.                 <label for="dtp_input3" class="col-md-2 control-label">Time Only</label>
  34.                 <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
  35.                     <input class="form-control" size="16" type="text" value="" readonly>
  36.                     <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
  37.                                         <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
  38.                 </div>
  39.                                 <input type="hidden" id="dtp_input3" value="" /><br/>
  40.             </div>
  41.         </fieldset>
  42.     </form>
  43. </div><!---End Container-->
  44.  
  45. <script type="text/javascript" src="jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
  46. <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  47. <script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
  48. <script type="text/javascript" src="js/locales/bootstrap-datetimepicker.uk.js" charset="UTF-8"></script>
  49.  
  50. <script type="text/javascript">
  51. //in this line of code, to display the datetimepicker,  we used ‘form_datetime’ as an argument to be
  52. //passed in javascript. This is for Date and Time.
  53.     $('.form_datetime').datetimepicker({
  54.         language:  'en',
  55.         weekStart: 1,
  56.         todayBtn:  1,
  57.                 autoclose: 1,
  58.                 todayHighlight: 1,
  59.                 startView: 2,
  60.                 forceParse: 0,
  61.         showMeridian: 1
  62.     });
  63. //this is for Date only
  64.         $('.form_date').datetimepicker({
  65.         language:  'en',
  66.         weekStart: 1,
  67.         todayBtn:  1,
  68.                 autoclose: 1,
  69.                 todayHighlight: 1,
  70.                 startView: 2,
  71.                 minView: 2,
  72.                 forceParse: 0
  73.     });
  74. //this is for Time Only
  75.         $('.form_time').datetimepicker({
  76.         language:  'en',
  77.         weekStart: 1,
  78.         todayBtn:  1,
  79.                 autoclose: 1,
  80.                 todayHighlight: 1,
  81.                 startView: 1,
  82.                 minView: 0,
  83.                 maxView: 1,
  84.                 forceParse: 0
  85.     });
  86. </script>
  87.  
  88. </body>
  89. </html>

Add new comment