GWT 2.7和GWT Material Design 1.5.3 DatePicker

Question

Using MaterialButton, I'm trying to show calendar pane on a screen. I have code like this:

    @UiField
    MaterialDatePicker editDateCtrl;
    @UiField
    MaterialButton addDateCtrl;

    @UiHandler("addDateCtrl")
    void onClick(ClickEvent ev) {
//      GQuery.console.log(GQuery.$(ev.getSource()).siblings(".input-field"));
//      GQuery.$(ev.getSource()).siblings(".input-field").first().find("input").click();
//      GQuery.$(this.editDateCtrl.getElement());
//      GQuery.$("#gwt-debug-actionBtn").click();
        editDateCtrl.fireEvent(new FocusEvent() {});
    }

I was trying to use focus event, click event and nothing is working. Getting an element using plain JavaScript (jQuery) and calling obj.click() / obj.focus() also gives no results. API of this control does not even contain method show() or something like that (not in version I'm currently using).

Answer 1

I had to use GQuery/JSNI. MaterialDatePicker contains an input element, which has attribute aria-owns valued by id of calendar popup I wanted to show. In order to make popup appear, you need add some styles to it.

Here's code:

String pickerId = GQuery.$(editDateCtrl).find("input").attr("aria-owns");
GQuery.$("#" + pickerId).addClass("picker--focused picker--opened");
GQuery.$("#" + pickerId).attr("aria-hidden", false);