Why are the key elements of the anytime jQuery plugin blending in with the background/invisiblized?

Question

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 those key elements?

BTW, this is in jsfiddle, so I don't have any "fancy" CSS working behind the scenes; the only CSS I've added is extremely minimal, to wit:

labelText {
    font-family: verdana;
    white-space: nowrap;
}

anytime strutting its stuff, but hiding the current values' text

UPDATE

Still showing white text on a yellow background in Visual Studio/browserland:

enter image description here

score 1 · Accepted Answer · answered Apr 30 '13 at 01:10

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!

answered Apr 30 '13 at 01:10

Andrew M. Andrews III

1,989
18
23

Okay, I won't worry about it too much until I migrate it over to the "real world" and see what it looks like. – B. Clay Shannon-B. Crow Raven Apr 30 '13 at 03:30
I've got it working in my actual project now, and while not quite as hard to read as it is in jsfiddle, the currently selected vals are still tough to decipher: white text on a yellow background. I'll update my post with the visual evidence. – B. Clay Shannon-B. Crow Raven May 01 '13 at 21:58

B. Clay Shannon-B. Crow Raven · Answer 2 · 2013-08-19T17:46:09.123

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:

enter image description here

...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.

Why are the key elements of the anytime jQuery plugin blending in with the background/invisiblized?

UPDATE

2 Answers2

Linked