A simple lightweight date-picker, with no external dependencies.
Latest commit a677dc1 Apr 22, 2013 @fizker fizker Issue #2: Datepicker not formatting on re-load.
- Enforced the correct format when rendering the date-picker.



A simple lightweight date-picker, with no external dependencies.

Go to fizker.github.com/date-picker to see it in effect, and for more extensive documentation.


  • 0.1: Can render and navigate.

  • 0.2: Can emit events.

  • 0.3: Popup and binding to input element.

  • 0.4: More options and customizability.

  • 0.5: Better cross-browser support.

  • 0.6: Full support for iOS devices.

  • 0.7: Ender support.

  • 0.8: CSS templates and examples.

  • 1.0: All done and ready for prod-use.


There are currently three ways to install this:

  1. If you want a somewhat stable build, use npm install date-picker.
  2. If you want the bleeding edge, pull from github, cd into the checked-out dir, and run npm install.
  3. If you just want to load it and test it quickly, a minified version is bundled with the GitHub Pages describing this project. It can be fetched from http://fizker.github.com/date-picker/lib/dp.min.js

Running the tests

To run the tests, you need to do installation step 1 or 2. If 1 is chosen, there is an additional step. devDependencies are not normally installed through npm, so you need to install them manually:

cd node_modules/date-picker
npm install

Then both steps align, and simply running npm test will execute the tests in node.

To run the tests in a browser, you need at least v. 0.5 (in npm) or commit ade06aa357 (git). The install script after those versions build an html-file and places it in test/browser.html (based on the package folder).

Simply load this up in a browser. A web-server is not required to run it locally.

Example code

To get it up after installing, simple link to the dp.min.js and dp.min.css. To overwrite the look, either inspect the living DOM or build upon the CSS file.

After inclusion, it can simply be created with the following snippet:

var options = null // options are optional
  , dp = new DatePicker(options)
  // any of the following two give the same result
  , element = $('.input')[0]
  , element = '.input'


The contents of the buttons and labels can be altered via options when creating the date-picker. For a full list of the supported options, either check the source code or look to the docs.

Browser compatibility

As of this writing, all tests are green in the following browsers (or newer):

  • Safari 5.1.7 (win)
  • Safari for iOS 4.3
  • Android browser for Android 2.3.7 (HTC Desire)
  • Chrome 20 (mac)
  • Firefox 12 (mac)
  • Opera 11.64 (mac)
  • Internet Explorer 9

The tests are known to fail in IE8, but that is due to chai crashing on inclusion in those browsers. A superficial manual test suggests that the code is working. There is a plan to work on the tests and get them up and running in at least IE8.

There is no plan to ever support IE7 or below. Any code that adds too much junk to support 7+ year old browsers have a good chance of being rejected. At some point, the world simply have to move on! But if the fix is small and lean, feel free to submit a pull request!

There are no expected outages in older versions of the other compatible browsers. But still, too big changes to support legacy browsers are not really interesting.

Special thanks

  • jQuery: For an otherwise great tool, and because I lifted some code from there (calculating the offset of an element).