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. Then for the body, add the following code: This time let’s add HTML tags for Data and Time. And here the following code: 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. Output: Then, for Time only. Output: And under the , add the following code: In this code, using bootstrap-datetimepicker.js we call the datetimepicker via javascript. 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: