Version:

Install ​

shell
npm i @vaadin/date-time-picker

Import ​

javascript
import '@vaadin/date-time-picker';

Variants ​

Default ​

html
<vaadin-time-picker label="Zeitpunkt"></vaadin-time-picker>
javascript
document.querySelector('vaadin-time-picker').value = '12:30';

Read Only ​

html
<vaadin-time-picker label="Nur lesen" readonly></vaadin-time-picker>
javascript
document.querySelector('vaadin-time-picker').value = '12:30';

Disabled ​

html
<vaadin-time-picker label="Inaktiv" disabled></vaadin-time-picker>
javascript
document.querySelector('vaadin-time-picker').value = '12:30';

Invalid ​

html
<vaadin-time-picker label="Ungültig" invalid></vaadin-time-picker>
javascript
document.querySelector('vaadin-time-picker').value = '12:30';
document.querySelector('vaadin-time-picker').errorMessage = 'Bitte ein gültiges Datum eingeben.';