[date-picker] Allow customizing individual date cells

[karthik-hande]

Description

If for some date, the service may not available then we should show the date with different background-color like red only for that particular date.If available then the date should be in green. so we can give a better information through the date picker.

Expected outcome

changing color for some dates

Actual outcome

not implemented yet.we can only disable date now

Live Demo

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• Android Chrome

[jouni]

Thanks for the feature request! This is a feature that we’ve had in the backlog from the beginning, just haven’t had time to implement it yet (listed as “Allow customizing the date cells” in vaadin/vaadin-date-picker#30).

So the generic feature is to allow the developer to control the “template” of the date cells, similar to the “custom item template” feature in vaadin-combo-box (https://github.com/vaadin/vaadin-combo-box/releases/tag/v1.3.0).

[karthik-hande]

Is there any other method so that I can implement this feature locally till it's implemented?

[jouni]

I can’t think of a workaround at the moment, unfortunately, other than forking and implementing it yourself :(

[jouni]

@tomivirkki, do you have any ideas?

[tomivirkki]

Here’s a super hacky workaround :) Note that /deep/ selector is deprecated and probably will not work for long anymore. Perhaps the polyfill can still handle it even after the browser support ends...dunno..

<style is="custom-style">
  vaadin-date-picker /deep/ [aria-label^="19 June 2017"] {
    background: red;
  }
</style>

[web-padawan]

/deep/ combinator is deprecated and will be a no-op in M60, around August 2017, says the warning which I can observe now... when opening console in chrome://settings, huh!

Polymer 1.x transforms both /deep/ and ::shadow when using Shady DOM, but they are no longer supported since the 2.0 release.

Maybe iterating over DOM nodes from outside would be a solution. I use paper-calendar and do it like this to highlight selected dates range.

[jouni]

I guess the aria-label hack could work when used together with the new ThemableMixin feature in 2.0.

[web-padawan]

This feature was implemented in vcf-date-range-picker using setClassNameForDates() method:

vaadin-component-factory/vcf-date-range-picker@b069988

[rolfsmeds]

When this is implemented, we could also consider tooltip support for providing additional information on what various date cell styles mean, and e.g. why a certain date is disabled.

[jouni]

tooltip support for providing additional information on ... why a certain date is disabled.

In this particular use case, the disabled dates should still be accessible with the keyboard, to make the tooltip accessible. Or that’s what I assume, that it would not be okay for screen reader users to not be able to focus the disabled dates, to learn why they are disabled.

Or can we assume that a screen reader focus/cursor is different from regular keyboard focus, and a date cell which is not focusable via the arrow key navigation in the month calendar could still be accessed with a screen reader cursor?