The datepicker loads, but timepicker sliders do not load

We recently came across an issue in our Order Delivery Date Pro for Woocommerce plugin on a client’s site where the timepicker sliders were not working. However, the console was not showing any errors which could give us any pointers about the issue.

After going through some scenarios of testing we found that the plugin was conflicting with one of the another plugin installed on client’s site. The plugin was Woocommerce Poor Guys Swiss Knife by Uli Hake.

We use Trent Richardson’s jQuery Timepicker Addon library in our plugin to show the timepicker. The Swiss Knife plugin was also including the same file on checkout page. That was the root cause of timepicker from our plugin not being shown.
The file being included twice was jquery-ui-timepicker-addon.js from that library.

The solution we found to the above issue is we removed the jquery-ui-timepicker-addon.js file from the conflicting plugin using wp_dequeue_script() function of wordpress. It is used to remove the enqueued script only if the script is already enqueued earlier.

So next time if you come across an issue where the timepicker sliders do not show even if the datepicker shows fine, then please follow the below steps:

1. Deactivate all other plugins on your website and keep WooCommerce & Order delivery date plugin enabled. Please check if the timepicker sliders show after that.
2. If it does show, then please activate the other plugins one by one and identify activating which plugin is causing the timepicker sliders to not show.
3. Use wp_dequeue_script() to remove any existing copy of the same script that you are trying to load.
4. Using wp_dequeue_script() function did not fixed the issue completely. We have changed the first parameter i.e the name used to handle the script of wp_enqueue_script() function from “jquery-ui-timepicker-addon” to “jquery-ui-orddd-timepicker-addon” from our plugin.