Hit enter after type your search item

Setting up a Bootstrap Material date and time picker plug-in

The Material date and time picker for Bootstrap

The material datetime picker is designed for Bootstrap that requires you adding the jQuery library, momentsjs file, and Google’s material icon font besides Bootstrap’s CSS and JS files.

So, if your project is based on Bootstrap framework and you have already included the Bootstrap dependent files, jQuery file and you need integrating a date and time picker, you should try this material datetimepicker plug-in.

I have written about a few other date time pickers (and here) in this series of tutorials. One of the differences (visibility wise) is that the material datetimepicker has a nice looking clock for selecting the time. The performance wise, I will leave this up to you to better judge.

A demo of displaying material date picker

In the example, as you click the input field, the material date picker will display with the current date highlighted. You may navigate through Year and Month, select a date and press OK to make the selection.

Bootstrap material date time

See online demo and code

In order to set up this plug-in, include these dependencies in the <head> section where you intend to use it:

  • bootstrap.min.css (V3)
  • material.min.css
  • bootstrap-material-datetimepicker.css
  • jquery-1.12.3.min.js
  • bootstrap.min.js
  • material.min.js
  • moment-with-locales.min.js
  • bootstrap-material-datetimepicker.js

You may find the CDN or local paths in the code section of this example.

In the markup section, create an input field with Bootstrap classes and assign it an ID that will be used in the jQuery code:


 

And finally, in the script section, initiate the plug-in with required options, for example:


 

A demo of only time picker clock

In this demo, only a clock is displayed to pick the time. You may use different options in the jQuery part, e.g. for displaying AM and PM use:

shortTime: true

For displaying time in 24 hours format, set it to false:

shortTime: false

As this demo is for displaying the time only, the date option is set false. See the demo with 24 hours clock:

Bootstrap material time picker

See online demo and code

Following options are used in the <script> section:


 

A demo of picking both date and time

In this demo, both date and time can be picked and displayed in the input field after selection. First, a calendar will be displayed to select the date which is followed by a clock for selecting the time.

Bootstrap material date time picker

See online demo and code

The format of the date and time can be set quite easily, as you can see in the jQuery code:

format: ‘dddd DD MMMM YYYY – HH:mm’

Set the format as per locale or requirement of the website.

Setting the minimum / start date example

In above examples, the current, past or future date can be selected. You may set the minimum date, for example from current date onwards by using this plug-in.

Bootstrap material date time picker-start

See online demo and code

The following jQuery code is used for that:


 

Credit: T00rk

This div height required for enabling the sticky sidebar