March 24, 2014 8:00 am

Mobile friendly / Responsive jQuery date & time input picker

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.

Mobile friendly / Responsive jQuery date & time input picker

 

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

3 responses to “Mobile friendly / Responsive jQuery date & time input picker”

  1. sumit says:

    how to pass data one page to another using javascripts.

    • Hassan ALi says:

      By using JavaScript its possible if you are using nodejs as back end server .Otherwise using php you can manage data by session or cookie with the help of ajax request .

Leave a Reply

Your email address will not be published. Required fields are marked *