The Material date and time picker for Bootstrap
The material datetime picker is designed for Bootstrap which requires you to add 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.
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:
<input type="text" id="only-date-demo" class="form-control floating-label" placeholder="Select Date">
And finally, in the script section, initiate the plug-in with required options, for example:
<script type="text/javascript">
$(document).ready(function()
{
$('#only-date-demo').bootstrapMaterialDatePicker
({
time: false,
clearButton: true
});
$.material.init()
});
</script>
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:
See online demo and code
Following options are used in the <script> section:
$('#time-demo').bootstrapMaterialDatePicker
({
date: false,
shortTime: false,
format: 'HH:mm'
});
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.
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.
See online demo and code
The following jQuery code is used for that:
$('#set-minimum-date-demo').bootstrapMaterialDatePicker({ format : 'DD/MM/YYYY HH:mm', minDate : new Date() });
Credit: T00rk