Duck-Punching the jQuery UI Datepicker into a Date/Time Picker
There are a TON of awful date pickers out there. For a who’s who of the worst, check out Date Time Picker Competive 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:
- http://blog.w3visions.com/2009/04/date-time-picker-with-jquery-ui-datepicker/ – Integrates with Datepicker, but the UI is completely disjoined.
- http://engineeredweb.com/blog/10/4/jquery-date-and-time-pickers – The first one listed here is the one I had been using. It integrated nicely with Datetpicker, 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:
As you can see, I also added the ability to specify custom buttons for the button panel.
← Beautiful PNG Wait Indicator with Raphaël and jQuery Reading Entity Framework Code First Objects from a Stored Procedure →