Why Are The Key Elements Of The Anytime Jquery Plugin Blending In With The Background/invisiblized?

The anytime jQuery plugin has its key elements (current month, day, year, hour, etc.) 'blanked out' as shown below. Why, but more importantly, how to put some starch back into thos

Solution 1:

This has to be a problem with the styles in the jQuery UI theme that you are using, or with jsFiddle styles interfering with the styles. Really, you're much better off playing with files on your local computer than dealing with all of the weird interactions that take place when you bring a web-based development tool into the mix!

Solution 2:

Using Colorzilla to "eyedrop" the existing color scheme (the two colors the page uses), I was able to get the Anytime datetimepicker to look good:

...by adding this CSS:

#AnyTime--BeginTime.AnyTime-lbl { color: #405DA9; font-weight:bold}
#AnyTime--BeginTime.AnyTime-cur-btn { background-color:#405DA9; border:1px solid #E25811; color:#E25811 }

I find that Anytime is, as the download page says, "Der Mecedes, ach was, der Rolls-Royce des Datepicker-Plugins"

All I needed to do was download the CSS and js file, reference them in my page, bind them to my inputs like so:

AnyTime.picker("BeginDateTime");
AnyTime.picker("EndDateTime");

...add the CSS shown above, and voila! - a personalized, er... companyized, datetimepicker.

The other options that I tried were HTML5 time input element, but that is not very well supported by the various browsers, at least not yet, so that's not currently very practical; the jQueryUI datepicker (doesn't include a time element); and a "timeentry" plugin that does not support seconds (only minutes and hours). I find that Anytime looks better, and combines both date and time data in one widget. Its usage is (to me) a little unconventional (perhaps due to its non-jQuery heritage), but it works well and, again, looks good, so...I'm more than happy with it.