Today I am going to give you a tutorial on date and time picker jQuery plugin its a very useful and great plugin, now days all the web designers have to develop responsive web designs can support all devices screen sizes this plugin also help them to make a nice and Mobile friendly / Responsive jQuery date & time input picker for there websites. It will help designers to create nice and user friendly input forms with this datepicker it also give you time selection as well.

Read more about responsive: How to create Responsive Header Menu with CSS

This plugin is developed by Amsul

Features:

1. Support jQuery 1.7 and up.

2. Available with 37 languages translations.

3. Support all browsers and IE8+.

4. Lightweight plugin.

5. Opensource under MIT License.

Usage:

Include JS files.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery||document.write('<script src="tests/jquery.2.0.0.js"><\/script>')</script>
<script src="lib/picker.js"></script>
<script src="lib/picker.date.js"></script>
<script src="lib/picker.time.js"></script>
<script src="demo/scripts/main.js"></script>

If you need only date picker then use below js.

<script src="lib/picker.date.js"></script>

For only date picker.

<script src="lib/picker.time.js"></script>

If you need both functionality then use all js files.

Call date picker for an input box:

<script language="javascript">
    $('.datepicker').pickadate();
</script>

<input class="fieldset__input datepicker" type="text" placeholder="Try me">

This input box will show a popup to select date when you click on it.

<script language="javascript">
    $('.timepicker').pickatime();
</script>

<input class="fieldset__input timepicker" type="text" placeholder="Try me">

Above input will show you time picker option.

That’s it for today’s tutorial we will come again with some other good tutorials, if you need any tutorial please request us we will do our best to give you that tutorial.

Don’t forget to comment your suggestions to improve our tutorials.