WordPress Theme conflicts with jQuery Datepicker

This past week I received a couple of issues from customers who had purchased the Order Delivery Date plugin V 2.0. The issues were:

Customer 1:

I also noticed on the front end checkout page the textfield popup calendar and time are not functioning. i.e. its just static textfield that does not allow any entry

Customer 2:

While the delivery date field shows in the checkout it is not functional – clicking field has no affect.

Both the issues were similar. In both cases, the delivery date field was working perfectly fine for the default themes, but not for the themes they had installed on their Woocommerce installations.

Both the above issues were due to:

Incorrect CSS usage in case of the Abundance theme by Kreisi

At the time of writing this post, I am still not sure if this should be termed as Incorrect CSS usage or not. In this case, the calendar does display, however, it gets hidden by other elements that are appearing on top of it (z-index). To fix this, I changed my datepicker code slightly:

jQuery.extend(jQuery.datepicker, { afterShow: function(event) {
	jQuery.datepicker._getInst(event.target).dpDiv.css('z-index', 10);
}});
jQuery('.element').datepicker({
..
...
}).focus(function (event) {
	jQuery.datepicker.afterShow(event);
});

Reference: http://bugs.jqueryui.com/ticket/5479

I had to extend the z-index value till 10 so the calendar would appear on top of the other elements (Product & Shipping details). In other cases, you might have to increase or decrease the value of z-index as required in your theme.

In the Abundance theme, the #wrap_all class has a z-index of 10 & .container_wrap has a z-index of 2 (in style.css). This essentially puts all contents on checkout page above any other elements that don’t have z-index value lower than 10.

Old versions of jQuery being used by 1 theme in case of the Bellissima theme

This one is a case of inclusion of old version of jQuery UI library by the theme author. The library loaded in the theme is Version 1.7.1. jQuery datepicker does not work with the 1.7.1 version. The solution in this case was to use wp_deregister_script() & include the latest version of the jQuery UI library.

wp_deregister_script( 'jqueryui');
wp_enqueue_script( 'jqueryui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js', '', '', false );

The theme conflicts with jQuery datepicker have been widely discussed for many themes:

• http://www.kriesi.at/support/topic/jquery-datepicker#post-47289
• http://www.kriesi.at/support/topic/jquery-conflict-with-theme
• http://wordpress.org/support/topic/plugin-events-manager-problem-with-datepicker?replies=35

The Order Delivery Date plugin uses the jQuery Datepicker. If you only see a static text field on the checkout page that does not display the calendar, then there is no reason to worry. Your theme author probably did not do something right or the theme is probably hiding the datepicker. You can always switch to the default theme & check that the Delivery Date Calendar works correctly.