date picker color / colour

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

The above rules would make the calendar pop-ups in your form look like that in the screenshot below:

(Click screenshot to view live form)

The first rule changes the orange heading elements and the second the headings for the days of the week. Substitute the colors of your choice for #090 (green), #000 (black) and #FFF (white). Firebug also shows that the colors of highlighted days (those that fall within weekends and those that don't) can also be changed. It appears that the selector to change the highlight color for Saturdays and Sundays is .selected.today.weekend and for the other days it's .selected.today but I would need to run tests to confirm that those are the correct classes to target.

JotForm Support

abajan

Answered on February 05, 2012 at 02:06 PM

After studying the CSS a bit more, I think that the all of the current days are classed as simply today and the light blue background of the weekends can be changed by targeting the weekend class. But, like I said, tests would have to be done to confirm my assumptions.

letwithease

Answered on February 05, 2012 at 04:05 PM

This is Awesome thanks Abajan.

I can't get the .today classes to work - tried a few different things but not a biggy for me now the orange text is sorted

again thanks, you guys offer such good support!

JotForm Support

abajan

Answered on February 05, 2012 at 04:10 PM

Glad to help, letwithease.

I'll see if I can figure out the rules required to change the remaining elements and get back to you if/when I do.

JotForm Support

abajan

Answered on February 05, 2012 at 06:09 PM

Here's what I've been able to find out so far: At the very bottom of the main JotForm forms stylesheet are all of the rules that control every aspect of the appearance of the pop-up calendar. Here they are (slightly edited for clarity) :

The 4th rule styles the background of the today class. You'll notice that its declaration ends with the !important keyword. My guess is that that's at least one of the reasons for your being unable to style the class (assuming it's its background to which you were referring). In order to override the effect of !important, it must also be included in the injected CSS. If the source of any JotForm form containing injected CSS is viewed, you'll see that the injected CSS always follows the default CSS. This brings us to one of the characteristics of Cascading Style Sheets: The Cascade. (See also !important Declarations)

The following rules added to the injected CSS I gave in my previous post should do the trick:

div.calendar .today {background: #090 !important;color: #FFF;}

div.calendar tr.days td.today {color: #FFF;}

(Change #090 and #FFF to suit your tastes.)

letwithease

Answered on February 06, 2012 at 04:33 AM

Wow, again thanks abajan - I have now managed to change everything required. you have been very helpful!!

JotForm Support

abajan

Answered on February 06, 2012 at 04:38 AM

You're quite welcome :)

I actually learned quite a bit in the process myself. I didn't know that so many rules controlled the appearance of the calendar.