GWT 2.7 和 GWT Material Design 1.5.3 DatePicker答案

【问题标题】：GWT 2.7 and GWT Material Design 1.5.3 DatePickerGWT 2.7 和 GWT Material Design 1.5.3 DatePicker
【发布时间】：2017-12-24 12:06:35
【问题描述】：

使用 MaterialButton，我试图在屏幕上显示日历窗格。我有这样的代码：

    @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() {});
    }

我试图使用焦点事件、单击事件但没有任何效果。使用纯 JavaScript (jQuery) 获取元素并调用 obj.click()/obj.focus() 也没有结果。此控件的 API 甚至不包含方法 show() 或类似的东西（不在我当前使用的版本中）。

【问题讨论】：

请将您的解决方案移至自己的答案，谢谢。

标签： gwt gwt-material-design

【解决方案1】：

我不得不使用 GQuery/JSNI。 MaterialDatePicker 包含一个输入元素，它的属性 aria-owns 由我想显示的日历弹出窗口的 id 值。为了使弹出窗口出现，您需要为其添加一些样式。

代码如下：

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

【讨论】：