WebDatePicker date range CSS adjustments

I was looking in Feedback and found this case:
64812 - WebDatePicker greys out valid dates
It may be closed as designed because the Bootstrap Datepicker code that is used for this shows the same gray for previous/next month days and disabled days.

What is the problem? see this calendar and can you identify which days can’t be selected?
image

We need to hover over the days to see if the cursor and background changes to know if we can select the days from previous/next month days. Not easy to identify, but how about we change the color for disabled days? I think this is easier for the user:
image

To make the above change we just need to add this code to HTML Header <style> </style> code:

.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
     color: #d69696;
}

Some people may prefer to not show previous/next month days at all, we can do that with some CSS too and get this:
image
that way the user will need to move to April or June to select one of the few days available for those months:
image
we can do that with this code:

.datepicker table tr td.new, .datepicker table tr td.old {
    height: 0;
    line-height: 0;
    visibility: hidden;
}

We can combine the two if we want. We can combine colors to make it clear that we can select anything in black and the red are not available, like this:
image
not using the gray color anymore.

Hope this helps.

6 Likes

Great tip. Thank you!

1 Like

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