NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ
for more details.
The Timepicker jQuery addon
is a great modification to the standard jQuery UI Datepicker
, however the 1.6.1
release from its GitHub page
has a glaring problem when rendering the time zone input select
It appears that the input select
is not styled. Below is what it looks like (left) and what it should look like (right)...
When you look at the HTML
behind this and compare the minutes select
to the time zone select
, there are obvious differences:
At first it looks like there is no easy fix, but fortunately the time zone select
is inside a dd
element that does have class definitions - <dd class="ui_tpicker_timezone">
. Great! This means we can do something about styling!
I'm using the default theme for the rest of the jQuery UI
widgets so all I did was combine the CSS
styles that the minutes select
uses and added the following CSS
rule to my custom stylesheet...
When the above is added, the time zone select
is rendered correctly.
I also tried dynamically adding the missing style classes to the select
, this works at first, but as soon as you pick a value it reverts to the old unstyled look, so I abandoned that idea.
Hope you found this post useful...
...so please read on! I love writing articles that provide beneficial information,
tips and examples to my readers. All information on my blog is provided free of
charge and I encourage you to share it as you wish. There is a small favour I ask in return however -
engage in comments below, provide feedback, and if you see mistakes let me know.
If you want to show additional support and help me pay for web hosting and
domain name registration,
donations, no matter how small, are always welcome!
Use of any information contained in this blog post/article is subject to this disclaimer
Other posts you may like...