選擇相同日期的GWT后，日期選擇器不會關閉

Question

我正在使用以下方法從Java腳本調用Java以關閉日期選擇器彈出窗口。

    private native void attachInternal() /*-{+      
    $wnd.jQuery("div.datePickerDay.datePickerDayIsValue").on( "Click", function() {
       this.@com.booxi.admin.client.common.ui.text.DateFormatter::uiDatePickerPopup.hide();

      console.log("OK");
    });
}-*/;

在附帶的方法中再次調用此方法。

問題是日期選擇器在選擇了已經選擇的相同日期后不會關閉，但是在值更改時它會關閉。即使在選擇與之前相同的日期后，我也想關閉它。 附加方法如下

    public void attach() {
    attachInternal();

    datePickerValueChangeRegistration = uiDatePicker.addValueChangeHandler(new ValueChangeHandler<Date>() {
        @Override
        public void onValueChange(ValueChangeEvent<Date> event) {
            uiDatePickerPopup.hide();
            uiTextDate.setErrorVisible(false);
            uiTextDate.setTextNoFormat(Moment.moment(event.getValue()).format("L"));
        }
    });

    textDateClickRegistration = uiTextDate.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            //if (uiTextDate.isReadOnly())
            //  return;
            if (!uiTextDate.isEnabled())
                return;
            showPopup();

        }
    });

Answer 1

您的JSNI錯誤：您正在獲取對hide()方法的方法引用，但實際上並未調用它。 另外，回調中的this可能是HTML元素，而不是此方法所屬的類（最后， click可能必須全部為小寫–盡管我不了解jQuery，所以我可能是錯的）。

因此，它應顯示為：

private native void attachInternal() /*-{
  var that = this;
  $wnd.jQuery("div.datePickerDay.datePickerDayIsValue").on( "click", function() {
    that.@com.booxi.admin.client.common.ui.text.DateFormatter::uiDatePickerPopup.hide()();
    console.log("OK");
  });
}-*/;

Answer 2

有點晚了，但是如果有人遇到同樣的問題也許會有所幫助。

我犯了同樣的錯誤。 問題是，僅當選擇了其他值時，才會觸發change事件。 如果用戶再次選擇相同的值，則沒有值更改，事件不會觸發，不會執行您的代碼，並且不會隱藏彈出窗口。

您必須使用單擊事件而不是值更改事件。 然后，即使單擊舊值，也可以每次單擊執行代碼。 但是，如果僅將change事件替換為click事件，則當用戶單擊日期選擇器的標題時（例如，當他單擊箭頭以選擇其他月份時），也會執行該代碼。 這會破壞日期選擇器的功能。

因此，在單擊事件中，您必須檢查單擊是否確實在日期單元格中，而不是在標題中。 可以使用Element.as(event.getNativeEvent().getEventTarget())並檢查元素的內容，最簡單的方法是檢查內部文本是否為1到31之間的日期數字。

所以代碼是這樣的

uiDatePickerPopup.addDomHandler(new ClickHandler() {

  @Override
  public void onClick(ClickEvent event) {
    Element target = Element.as(event.getNativeEvent().getEventTarget());
    String targetContent = target.getInnerText();
    try {
      int d = Integer.parseInt(targetContent);
      if (d >= 1 && d <= 31) {
        uiDatePickerPopup.hide();

        ...
        enter the rest of your code here
        ...

      }
    } catch (Exception e) {
      /* ignore, click was not on a date cell */
    }
  }

}, ClickEvent.getType());

（據我所知，沒有更好的解決方案。其他可能的事件沒有用，並且您不能將click事件僅限於日期單元格，因為getView()方法protected並且底層CalendarView是final並且不能擴展為提供必要內容檢查的子類。）