CSS Datepicker problem

Support
#1

Hello there,
just a quick question. I’ve tried now for a long time, but I cant get this right:

At this site there is a form: https://www.soelvahof.com/anfrage/

Once you open the datepicker/calendar, I set past dates to be not selectable. Available dates are highlited grey when you hover them with your mouse.

The hover-color is #ececec at the moment. I like to change this color to #ee5f5d.

When I do so in the developer console in Chrome, it workt the way it should, but once I add this code

.datepicker table tr td.day:hover {
background: #ee5f5d; }

into my CSS-customizations section, also the past, non selectable dates in my calendar are getting highlihted red when hovering on them. I don’t know why.

I hope you can help me!

Thank you :slight_smile:

#2

Hello @Xoa,

Thanks for writing in!

To resolve your issue, please use this css code instead:


.datepicker.dropdown-menu table tr td.day:hover {
   background: #ee5f5d !important; 
}

Please let us know if this works out for you.

#3

Hey there,

thanks for your reply. Unfortunately it gives me the same result as mentioned before.
Also the unselectable days in december are marked red on hover.

#4

Hi Xoa,

Please update your custom CSS to this:

.datepicker table tr td:not(.disabled).day:hover,
.datepicker table tr td:not(.disabled).day.focused {
	background-color: #ee5f5d !important;
}

Add it to Theme Options > CSS

More about CSS pseudo class :not() here.

Hope it helps,
Cheers!

#5

Works like a charme! Thanks a lot for this. :blush:

EDIT: Oh, one more thing I forgot…

To do the same for the arrows on the left and right site of the month? This was the code I was trying without luck;

.datepicker thead tr:first-child th:hover {
background: #ee5f5d!important;
color: #ffffff;    }
#6

Hello @Xoa,

Your custom css is incorrect. Please use this:

.datepicker .datepicker-days thead th.datepicker-switch{
    color: red !important;
}

.datepicker .datepicker-days thead th.prev:hover,
.datepicker .datepicker-days thead th.next:hover {
  background-color: green !important;
  color: #ffffff;    
}

We would loved to know if this has work for you. Thank you.

#7

Awesome, you guys are amazing. :hugs:

#8

Cheers! Glad it’s okay now :wink:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.