The mobile-friendly, responsive, and lightweight jQuery date & time picker

Since you have been using jquery data picker in your web based project but in this tutorial i am going to introduce one more mobile-friendly, responsive, and lightweight jQuery date & time picker by pickadate.js, It is quite cool with fancy design and easy to integrate on any web and mobile base theme. You must try this jquery plugin once.



There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. Why is it awesome? because their rich api documentation which help you customize this tool as much as possible according to your need.

First of all include all required CSS files on page.

<link rel="stylesheet" href="css/default.css" id="theme_base">
<link rel="stylesheet" href="css/default.date.css" id="theme_date">
<link rel="stylesheet" href="css/default.time.css" id="theme_time">

After that include all required js files on page, Don’t forget to include jquery core files before all picker.js files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/picker.js"></script>
<script src="js/picker.date.js"></script>
<script src="js/picker.time.js"></script>

Now all done call jquery date and time function where you want to show date and time input box.
Here is the demo code for adding basic data and time picker input box on page.

For Date Picker

HTML

Date Picker Demo
<fieldset>
  <input type="text" class="datepic" style="width:50%; height:40px;" placeholder="Select Date" >
</fieldset>

Jquery

<script>
$(function(){
  $('.datepic').pickadate();
});
</script>

Click Here to see all datepicker function for more customization on date format and options.

For Time Picker

HTML

Date Picker Demo
<fieldset>
  <input type="text" class="timepic" style="width:50%; height:40px;" placeholder="Select Date" >
</fieldset>

Jquery

<script>
$(function(){
  $('.timepic').pickadate();
});
</script>

Click Here to see all timepicker function for more customization on time format and options.

See online demo and download sample code.

If you like this post please don’t forget to subscribe my public notebook for more useful stuff