将 Duetds Datepicker 与 Wicket 一起使用？答案

【问题标题】：Use Duetds Datepicker with Wicket?将 Duetds Datepicker 与 Wicket 一起使用？
【发布时间】：2021-01-21 09:14:42
【问题描述】：

Duetds Datepicker (https://github.com/duetds/date-picker) 是一个我想使用的可访问的 Datepicker，但用法如下：

<duet-date-picker identifier="date"></duet-date-picker>

这与需要输入 HTML-Tags 的 Wicket 表单组件不兼容。

您知道将此 Datepicker 与 Wicket 或其他可与 Wicket 一起使用的可访问 Datepicker 的方法吗？（Jquery UI Datepicker 不如在 Tab 上关闭）

【问题讨论】：

FormComponentPanel 不需要输入标签，您可以像在普通面板中一样提供自己的标记。所以我的想法是在面板中添加duet-date-picker 并给它一个name 属性。

标签： datepicker wicket

【解决方案1】：

您可以轻松地将这个 JS 小部件与 Wicket 一起使用！

在您的 Java 代码中：

WebComponent datePicker = new WebComponent("datePicker");
parent.add(datePicker);
datePicker.add(new AjaxEventBehavior("duetChange") {
   @Override public void onEvent(AjaxRequestTarget target) {
      long timestamp = getRequest().getParametersValue("selectedDate").toLong();
      // use timestamp here
   }

   @Override public void updateAjaxRequestAttributes(AjaxRequestAttributes attrs) {
      super.updateAjaxRequestAttributes(attrs);

      attrs.getDynamicExtraParameters().add("return {\"name\": \"selectedDate\", \"value\": attrs.e.detail.valueAsDate.getTime()}");
   }
});

HTML 应该是这样的：

 <duet-date-picker wicket:id="datePicker" identifier="date"></duet-date-picker>

【讨论】：

是的，但这与仅提交带有输入的表单不同
对于表单提交，您可以通过监听表单的submit JavaScript 事件来做同样的事情。您应该创建一个自定义 FormComponent 来存储/提供日期值，而不是使用 WebComponent。