Inject Custom CSS: Change the color of the Date Picker text

  • Amanda_Barker_abarker
    Asked on June 28, 2024 at 12:37 PM

    Good morning,


    We have the date picker option enabled multiple time in our Jotform. When opening up the calendar view neither the year or month is available to read. Is there an setting where we could change this.

    Jotform Thread 16380451 Screenshot
    Page URL: https://form.jotform.com/241514156226046
  • Royce JotForm Support
    Replied on June 28, 2024 at 12:56 PM

    Hi Amanda,

    Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

  • Royce JotForm Support
    Replied on June 28, 2024 at 1:17 PM

    Hi Amanda,

    When I cloned and tested your form, the same thing happened for me. After investigating it a bit, I found a solution. It's really easy to fix. Let me show you how to do it:

    1. In Form Builder, click on the Paint Roller icon on the upper-right part of the screen

    Inject Custom CSS: Change the color of the Date Picker text Image 1 Screenshot 40

    2. Click on the Styles tab next to the Colors tab.

    Inject Custom CSS: Change the color of the Date Picker text Image 2 Screenshot 51

    3. Scroll down, and paste the code below to Inject Custom CSS field:

    /*To adjust Calendar text color to black*/
    
[summary*="Datepicker Popup"] thead div {
    
  color: black !important;
    
}
    
/*Ends here*/

    Inject Custom CSS: Change the color of the Date Picker text Image 3 Screenshot 62

    That's it. Let us know if you have any other questions.

 
Your Answer