Hi, Is there a way to apply this to the Vaadin DatePicker component? Some

Directory InputMask
1

Hi,

Is there a way to apply this to the Vaadin DatePicker component?
Some users prefer to use the keyboard to enter a date, an input mask would help to improve the UX.

Thanks
Kristof.

2

For preventing invalid input, you can use the [Pattern and prevent invalid input]
(https://vaadin.com/components/vaadin-text-field/html-examples/text-field-validators-demos#pattern) features of vaadin-text-field.

datePicker.$.input.pattern = '[0-9/]
*';
datePicker.$.input.preventInvalidInput = true

You can also listen to events, like keyup

datePicker.addEventListener('keyup', function(event) { ... })

The same can be done by extending DatePickerElement

class MaskedDatePickerElement extends DatePickerElement  {
	static get is () {
		return 'masked-date-picker'
	}

	connectedCallback() {
		super.connectedCallback();
		this.$.input.pattern = '[0-9/]
';
		this.$.input.preventInvalidInput = true;		
	}
}
window.customElements.define(MaskedDatePickerElement.is, MaskedDatePickerElement);