Datepickers

The tricky thing about calendar form inputs is that browsers render them in different ways. Safari on Windows for instance, I recently found out it does not render calendars as a calendar; rather it shows two buttons on the extreme right side of the textbox that when either is clicked increments or decrements the date being displayed. What's more, it displays in YYYY-MM-DD format, which is a bit difficult if your client wants you to have MM-DD-YYYY format instead.

jQuery to the rescue, I guess. I got the widget to work well, it even displays a default date thanks to help from this blog post, but I wanted to make sure the theme did not conflict with any other styles I might need to put into the site I'm working on; the jQuery UI theme should only affect select elements in my form. This should be a piece of cake since a Download Builder page is available that allows one to specify CSS scope. Except datepickers in jQuery have a quirk when used with the CSS scope; that cost me two and a half hours of trying to get it to work. 

If I may digress, what the h#ll. I mean, you create such powerful code and you can't be bothered to elaborate what's happening more clearly on your documentation? It's these kinds of bottlenecks that ruin the development experience for me. Luckily, I found this entry on stackoverflow that was a light at the end of the tunnel. It clearly stated the reason for the theme not showing up when using CSS scope, and gave a workaround. 

Here it is, for future reference:

Note: Another gotcha was how to embed JSFiddle code on blogger. Got the skinny here and here. If it weren't for these resources I would have been out of a job already...