Version:

Install ​

shell
npm i @vaadin/date-picker

Import ​

javascript
import '@vaadin/date-picker';

Variants ​

Default ​

html
<vaadin-date-picker label="Default" helper-text="Helper"></vaadin-date-picker>
javascript
document.querySelector('vaadin-date-picker').value = '2020-06-12';

Read Only ​

html
<vaadin-date-picker label="Readonly" readonly></vaadin-date-picker>
javascript
document.querySelector('vaadin-date-picker').value = '2020-06-12';

Disabled ​

html
<vaadin-date-picker label="Disabled" disabled></vaadin-date-picker>
javascript
document.querySelector('vaadin-date-picker').value = '2020-06-12';

Invalid ​

html
<vaadin-date-picker label="Invalid" invalid></vaadin-date-picker>
javascript
document.querySelector('vaadin-date-picker').value = '2020-06-12';
document.querySelector('vaadin-date-picker').errorMessage = 'Error message';