Ваадин: открытый календарь в фокусе поля для поля даты

Как я уже говорил в своем комментарии, насколько мне известно, в настоящее время фреймворк не предлагает неявного способа программного открытия всплывающего окна календаря. То же самое и с некоторыми другими компонентами, такими как редактор сетки или список комбинированных элементов.

Я могу придумать одно быстрое решение - добавить расширение javascript., который регистрирует слушателей фокуса для всех полей даты и нажимает кнопку, когда поле даты сфокусировано. Пожалуйста, найдите ниже образец.

P.S. Если вам нужно применить это только к некоторым полям даты, вы можете добавить идентификаторы и передать их в JS, где вы сделаете что-то вроде document.getElementById('myDateFieldId') вместо document.getElementsByClassName("v-datefield").

1) Макет с компонентами

public class MyDateFieldComponent extends HorizontalLayout {
    public MyDateFieldComponent() {
        // basic setup
        DateField fromDateField = new DateField("From", LocalDate.of(2011, Month.FEBRUARY, 6));
        DateField toDateField = new DateField("To", LocalDate.of(2018, Month.FEBRUARY, 6));
        setSpacing(true);
        addComponents(fromDateField, toDateField);

        // add the extension
        addExtension(new CalendarFocusPopupOpenerExtension());
    }
}

2) Расширение - Java / серверная сторона

import com.vaadin.annotations.JavaScript;
import com.vaadin.server.AbstractJavaScriptExtension;

@JavaScript("calendar-focus-popup-opener-extension.js")
public class CalendarFocusPopupOpenerExtension extends AbstractJavaScriptExtension {
    public CalendarFocusPopupOpenerExtension() {
        // call the bind function defined in the associated JS
        callFunction("bind");
    }
}

3) Расширение - js / на стороне клиента

window.com_example_calendar_CalendarFocusPopupOpenerExtension = function () {
    this.bind = function () {
        if (document.readyState === "complete") {
            // if executed when document already loaded, just bind
            console.log("Doc already loaded, binding");
            bindToAllDateFields();
        } else {
            // otherwise, bind when finished loading
            console.log("Doc nod loaded, binding later");
            window.onload = function () {
                console.log("Doc finally loaded, binding");
                bindToAllDateFields();
            }
        }
    };

    function bindToAllDateFields() {
        // get all the date fields to assign focus handlers to
        var dateFields = document.getElementsByClassName("v-datefield");
        for (var i = 0; i < dateFields.length; i++) {
            addFocusListeners(dateFields[i]);
        }
    }

    function addFocusListeners(dateField) {
        // when focusing the date field, click the button
        dateField.onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };

        // or when focusing the date field input, click the button
        dateField.getElementsByTagName("input")[0].onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };
    }
};

4) Результат

ПОЗДНЕЕ ОБНОВЛЕНИЕ

Второй подход может заключаться в назначении некоторых идентификаторов вашим полям, а затем периодической проверки, чтобы видеть, когда все они видны, и, как только они становятся, привязать слушателей фокуса.

1) Макет с компонентами

public class MyDateFieldComponent extends HorizontalLayout {
    public MyDateFieldComponent() {
        // basic setup
        DateField fromDateField = new DateField("From", LocalDate.of(2011, Month.FEBRUARY, 6));
        fromDateField.setId("fromDateField"); // use id to bind
        fromDateField.setVisible(false); // initially hide it

        DateField toDateField = new DateField("To", LocalDate.of(2018, Month.FEBRUARY, 6));
        toDateField.setId("toDateField"); // use id to bind
        toDateField.setVisible(false); // initially hide it

        // simulate a delay until the fields are available
        Button showFieldsButton = new Button("Show fields", e -> {
            fromDateField.setVisible(true);
            toDateField.setVisible(true);
        });

        setSpacing(true);
        addComponents(showFieldsButton, fromDateField, toDateField);

        // add the extension
        addExtension(new CalendarFocusPopupOpenerExtension(fromDateField.getId(), toDateField.getId()));
    }
}

2) Расширение - Java / серверная сторона

@JavaScript("calendar-focus-popup-opener-extension.js")
public class CalendarFocusPopupOpenerExtension extends AbstractJavaScriptExtension {
    public CalendarFocusPopupOpenerExtension(String... idsToBindTo) {
        // send the arguments as an array of strings
        JsonArray arguments = Json.createArray();
        for (int i = 0; i < idsToBindTo.length; i++) {
            arguments.set(i, idsToBindTo[i]);
        }

        // call the bind defined in the associated JS
        callFunction("bind", arguments);
    }
}

3) Расширение - js / на стороне клиента

window.com_example_calendar_CalendarFocusPopupOpenerExtension = function () {
    var timer;

    this.bind = function (idsToBindTo) {
        // check every second to see if the fields are available. interval can be tweaked as required
        timer = setInterval(function () {
            bindWhenFieldsAreAvailable(idsToBindTo);
        }, 1000);
    };

    function bindWhenFieldsAreAvailable(idsToBindTo) {
        console.log("Looking for the following date field ids: [" + idsToBindTo + "]");
        var dateFields = [];
        for (var i = 0; i < idsToBindTo.length; i++) {
            var dateFieldId = idsToBindTo[i];
            var dateField = document.getElementById(dateFieldId);
            if (!dateField) {
                // field not present, wait
                console.log("Date field with id [" + dateFieldId + "] not found, sleeping");
                return;
            } else {
                // field present, add it to the list
                console.log("Date field with id [" + dateFieldId + "] found, adding to binding list");
                dateFields.push(dateField);
            }
        }

        // all fields present and accounted for, bind the listeners!
        clearInterval(timer);
        console.log("All fields available, binding focus listeners");
        bindTo(dateFields);
    }

    function bindTo(dateFields) {
        // assign focus handlers to all date fields
        for (var i = 0; i < dateFields.length; i++) {
            addFocusListeners(dateFields[i]);
        }
    }

    function addFocusListeners(dateField) {
        // when focusing the date field, click the button
        dateField.onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };

        // or when focusing the date field input, click the button
        dateField.getElementsByTagName("input")[0].onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };
    }
};

4) Результат