A repository of over 1000 quality jQuery plugins

jQuery Pickadate JS

Pickadate JS is a jQuery Date & Time plugin.

Created by Amsul

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

Not what you're looking for? Click here to view more Date & Time jQuery plugins


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

Build status: master master     pickadate dev dependencies status

To get started, check out the:

Homepage - Date picker - Time picker - API

To get it:

Download the latest stable build


git clone git://github.com/amsul/pickadate.js.git


bower install pickadate

NOTE: Looking for Project Maintainers

I am looking for project maintainers to keep pickadate up to date and bug-free. As it stands, there are quite a few issues are that ready to be resolved and merged, but I would like help from someone in championing it forward.

If it sounds like you are up to the challenge, shoot met an email at reach@amsul.ca with a link to your Github account :pray:.

Library files

The lib folder includes the library files with a compressed folder containing the minified counter-parts. These files are minified using Grunt.


There are three picker files:

  • picker.js The core file (required before any other picker)
  • picker.date.js The date picker
  • picker.time.js The time picker

To support old browsers, namely IE8, also include the legacy.js file.


All themes are generated using LESS and compiled from the lib/themes-source folder into the lib/themes folder.

There are two themes:

  • default.css The default modal-style theme
  • classic.css The classic dropdown-style theme

Based on the theme, pick the relevant picker styles:

  • default.date.css and default.time.css when using the default theme
  • classic.date.css and classic.time.css when using the classic theme

** For languages with text flowing from right-to-left, also include the rtl.css stylesheet.


The translations live in the lib/translations folder. There are currently 43 language translations included.

Building with Grunt

Grunt ~0.4.5 is used to build the project files. To get started, clone the project and then run:

  • npm install to get the required node modules.
  • grunt test --verbose to confirm you have all the dependencies.

Type out grunt --help to see a list of all the tasks available. The generally used tasks are:

  • grunt develop compiles the LESS files and watches for any source changes.
  • grunt package compiles and then minifies the source files.
  • grunt test tests the entire package.

Styling with LESS

The picker themes are built using LESS with Grunt. To customize the CSS output, read the _variables.less file in the lib/themes-source folder. You can specify:

  • colors for the theme,
  • sizes for the picker,
  • media-query breakpoints,
  • and a whole bunch of other stuff.

Make sure to run the grunt develop task before making any changes to compile it into CSS.


Before opening a new issue, please search the existing Issues for anything similar – there might already be an answer to your problem. You might also wanna check out the Contributing guide.


Before contributing any code to the project, please take a look at the Contributing guide.

If there’s anything you’d like to discuss, we like to hang out on Gitter.

![Gitter](https://badges.gitter.im/Join Chat.svg)


If you find this library useful and would like to see further development, consider supporting it.

© 2014 Amsul

Licensed under MIT

You might also like these other Date & Time jQuery Plugins

  • timedropper

    timedropper is a jQuery UI timepicker. Manage time input fields in a standard form. Focus on the input to open […]

  • jClocksGMT.js

    jClocksGMT is a jQuery analog and digital clock(s) plugin based on GMT offsets. Perfect for world clocks. Now supporting automatic [&hell...

  • bootstrap-year-calendar

    A fully customizable year calendar widget, for jQuery and bootstrap.