Hit enter after type your search item

Bootstrap datetimepicker: managing with date and time in Bootstrap

The datetimepicker plug-in

In the datepicker tutorial for managing with dates in Bootstrap-based projects, I showed how you can use the bootstrap-datepicker plug-in with text fields. I also showed demos for customizing the look and feel by using the custom CSS for the calendars by overriding the default classes.

However, that plug-in is used to manage with dates only. In certain scenarios, you may need allowing the visitors to not only select dates but time as well. Fortunately, many awesome developers are working on it to add useful features for Bootstrap framework.

In this tutorial, I will show you the examples of setting up the datetime picker by using the Bootstrap 3 Datepicker plug-in. After that, you can also see the simple steps of setting up the plug-in to use for your projects. So let me start with examples first.

A demo of simply displaying date and time in textbox

In this example, the date and time can be selected as you click the icon ahead of a text box. By default, the calendar appears first for selecting the date. At the bottom, you can see a clock for selecting the time.

Bootstrap datetime picker

See online demo and code

The following markup is used for creating the textbox with icon:


 

In the script section, the id of the div is called with datetimepicker():


 

You can see the complete code in the demo page.

An example of date time picker without icon

In above example, the datetime picker component opens as you click on the icon ahead of the text field. You may also open it as a user clicks inside the textbox.

See this example, where only a textbox is given (no icon ahead):

Bootstrap datetime picker without icon

See online demo and code

The following is the markup used:


 

An example of using in a Bootstrap form

The following example shows using the datetime picker in a Bootstrap form. The demo sign-up form contains a few other fields along with date/time of birth field (for example purpose only). For that, I used the plug-in as in above examples.

See the code and demo online:

Bootstrap datetime picker form

See online demo and code

In the <head> section, you can see a few libraries required for datetimepicker, whereas, just above the </body> tag, the datetime picker is initiated in the <script> section.

Changing the look and feel of datetimepicker widget

The datetimepicker Bootstrap plug-in also includes a CSS file that specifies the default look and feel of the calendar / time picker. By picking the specific classes and modifying the default properties as per need, you may override the default classes.

For that, after including the CSS file of datetime picker, place the modified code either in the <style> section under the <head> tag or you may place it in your own external CSS file. Just make sure, the modified style must be after including the plug-in’s CSS file that contains all styling.

See the following example, where I simply changed the background color and text color of the plugin by overriding these classes:

bootstrap-datetimepicker-widget table td

bootstrap-datetimepicker-widget table th

See the output after modifying these classes:

Bootstrap datetime picker custom CSS

See online demo and code

This is the code in <style> tag of demo page:


 

I have just shown this for demonstration purpose. For your need to match the datetime picker with the rest of your website, you have to pick other related classes like for the current day, selected day, different header, disabled days etc.

Another style demo with overriding more display properties

In this demo, I have changed a few more properties including separate main background and color as compared to days/time section. The current day is also changed. See the demo which is followed by classes used to modify these properties:

Bootstrap datetimepicker CSS

See online demo and code

The following classes are overridden:

For main calendar and clock:


 

For the days section:


 

Hovering different elements:


 

Today’s class:


 

Steps for setting up datetimepicker Bootstrap plug-in

In order to use this plug-in in your projects, you have to include a few libraries in your web pages. Either use the CDN links or download the required files from GitHub site.

These are the CDN links that I used for demonstration:

The CSS:

 <link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>

<link href=”//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css” rel=”stylesheet”>

 

The JS libraries

 <script type=”text/javascript” src=”//code.jquery.com/jquery-2.1.1.min.js”></script>

<script type=”text/javascript” src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>

<script src=”//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js”></script>

<script src=”//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js”></script>

These also include jQuery, Bootstrap JavaScript libraries. You may also see the link of Bootstrap CSS.

The required files for datetimepicker plug-in are:

  • bootstrap-datetimepicker.js or its minified version.
  • moment-with-locales.js
  • bootstrap-datetimepicker.css
This div height required for enabling the sticky sidebar