More clarification about CSS for DatePicker

[lukos]

Obviously styling the CSS for the datepicker is quite a complicated process but there isn't really any documentation to say how this should be achieved.

For example, I can't see a datepicker.css bundled with the distributables and although I have copied datepicker.css from one of the examples, it contains some rules called "demo" and due to its position absolute, it appears in the top-left of the screen. If I don't include the CSS at all, I get a transparent calendar but it does appear in the correct place.

Please can you make the styling instructions more clear and give me some pointers on how to make it work correctly? It could also be made clear whether the styles you are using on the demos have been chosen for high contrast and therefore if we did want/need to change them, is there any good way to make sure the contrast is still high?

Thanks

[accdc]

Thanks, since I am totally blind I'm not going to be able to help with this one personally. My co-editor @LaurenceRLewis said he'd be happy to help out though, but it may be next week when he has time to do so. I appreciate your patience.

[LaurenceRLewis]

No problem, I'll look into this and update the resources.

[LaurenceRLewis]

Hi @lukos

If I don't include the CSS at all, I get a transparent calendar but it does appear in the correct place.

The reason the calendar is positioned absolutely is because the styles are generated dynamically by the script. This can be overwritten in the div.calendar { styles }, but for position, z-index, display and opacity CSS properties, you'll need to apply the !important declaration.

I believe the #datepicker-demo styles are no longer required and should probably be removed. However, I'll review this as I update the styles over the coming months.

If you need more info on how the CSS works please don't hesitate to respond to this issue, and I'll be happy to help.

All the best Laurence Lewis

[LaurenceRLewis]

It could also be made clear whether the styles you are using on the demos have been chosen for high contrast and therefore if we did want/need to change them, is there any good way to make sure the contrast is still high?

I don't think high contrast mode was considered at the time of creating the date picker styles. It was assumed that developers would use their own colour breakdown based on brand colours etc.

The following is a good article on testing high contrast.

The BBC TESTING STEPS, High contrast mode on Windows

[lukos]

This worked fine. I set the top for div.calendar to 5ems to move it below the centre of my input, removed the demo classes and made sure that the parent div was positioned relative and it looks good now. Thanks