Vaadin 14 can integrate with web components. You can find a useful presentation here: https://www.youtube.com/watch?v=E31ei5zklb8&t=127s

You can find web components at https://www.npmjs.com/, so I have selected https://www.npmjs.com/package/app-datepicker for displaying an inline calendar for selecting dates

API Reference

https://github.com/motss/app-datepicker/blob/HEAD/api-references.md#appdatepicker

Install to your vaadin app using the following command

npm i app-datepicker --save

Java Integration

You have to define a class in Vaadin and define the Tag and JsModule as defined in app-datepicker documentation. Then you can integrate with supported methods of library by adding relevant methods in class (e.g. disabledDates, on click event)

@Tag("app-datepicker")
@JsModule("app-datepicker")
public class AppDatapicker extends Component {

    public void setDisabledDates(String disabledDates) {
        getElement().setProperty("disabledDates",disabledDates);
    }

    @DomEvent("datepicker-value-updated")
    public static class DateChangeEvent extends ComponentEvent<AppDatapicker> {
        private String value;
        public DateChangeEvent(AppDatapicker source, boolean fromClient, @EventData("event.detail.value") String value) {
            super(source, fromClient);
            this.value=value;
        }

        public String getValue() {
            return value;
        }
    }

    public Registration addValueChangeListener(ComponentEventListener<DateChangeEvent> listener) {
        return addListener(DateChangeEvent.class, listener);
    }

By admin