Andy Edinborough

Duck Punching jQuery UI Datepicker into a DateTimePicker

There are a TON of awful date pickers out there.  For a who’s who of the worst, check out Date Time Picker Competitive Analysis.

jQuery UI’s Datepicker control is by far the best looking and most intuitive picker.  In light of maintaining a uniform UI, I wanted a date time picker that played on that control.  I found two:

  1. – Integrates with Datepicker, but the UI is completely disjoined.
  2. – The first one listed here is the one I had been using.  It integrated nicely with Datepicker, but the author’s website is down now, and I found it was quite bulky and that it limited how you could use Datepicker—no inlining, no animation, etc.

So I created a duck-punched DateTimepicker that simply manipulates the Datepicker DOM element and functions to add the missing functionality:image

As you can see, I also added the ability to specify custom buttons for the button panel.

View the demo at jsFiddle