March 29, 2014

jQuery UI Datepicker for jQuery Mobile

Can you guess which datepicker is this?

jQuery UI Datepicker for Mobile

It is the jQuery UI datepicker tweaked for jQuery Mobile!

I have written a small patch that allows you to use the jQuery UI datepicker with jQuery Mobile 1.4.x. To use the script:

  1. Include jQuery UI datepicker javascript after jQuery Mobile javascript files. You do not need the whole package; just grab the jquery.ui.datepicker.js file from from jQuery UI ZIP downloads.
  2. Include the monkey patch script; it basically replaces jQuery UI CSS classes with jQuery Mobile CSS classes in datepicker HTML.
  3. Add CSS rules to fine tune the appearance of datepicker.
  4. Call $(selector).datepicker() method on pagebeforecreate or pagecreate.