Date Picker doesn't display error messages

[cecilia-sanare]

Seeing how vaadin-combo-box and the paper components generally allow for an error-message I would expect the date-picker to be the same.

<vaadin-date-picker required error-message="Some error message"></vaadin-date-picker>

[jouni]

@tomivirkki, what would it mean to add this? It would probably need some documentation from our side as well, right?

[cecilia-sanare]

@jouni I ended up playing around with it and adding the error-message itself is relatively easy.

Just a matter of adding a new property and adding:

<template is="dom-if" if="[[errorMessage]]">
  <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error>
</template>

Overall the change is fairly simple, however a secondary issue is that the date-picker becomes invalid fairly easily.

Example

Live Demo

• Click on the input field
• The date picker should pop up and the input will become invalid

Steps to Reproduce

1. Add vaadin-date-picker
2. Add auto-validate and required to the element

[tomivirkki]

@nick-woodward and @jouni The errorMessage property might be a reasonable addition to the vaadin-date-picker API, especially since it should work nicely inside iron-form.

Note that you can already add any custom content inside the date picker by using vaadin-date-picker-light like in the following example:
https://jsfiddle.net/xhfbu5ny/

[cecilia-sanare]

@tomivirkki Awesome, I was unaware the light version was so flexible.

Not overly surprising, but it looks like the light version has the same issue as the regular version regarding validation.

However, it looks like the validation issue is somewhat documented in the code as a TODO comment