Vaadin:在datefield的字段焦点上打开日历

Vaadin小部件非常简单，非常棒！但它们的配置也很差。

---

我需要我的DateField小部件打开焦点事件的日历。我在官方网站上找不到这个功能。我找到了一些第三方小部件，但它是为Vaadin 7.7编译的，我使用的是最新的Vaadin（8.0.6）。它还具有Joda time 2.1依赖性，这在我的项目中是非常不受欢迎的。那么，有没有简单的方法来调整stock vaadin DateField小部件以在field focus上打开其日历，或者我需要为此编写自己的组件？感谢您的帮助

正如我在评论中所说的，据我所知，目前框架没有提供以编程方式打开日历弹出窗口的隐式方式。对于其他一些组件，如网格编辑器或组合项列表，也是如此

我能想到的一个快速解决方法是添加一个为所有日期字段注册焦点侦听器的按钮，并在日期字段被聚焦时单击该按钮。请在下面找到一个样品

另外，如果您只需要将其应用于某些日期字段，则可以添加ID并将其传递给JS，在JS中执行类似于

document.getElementById（'myDateFieldId'）

的操作，而不是

document.getElementsByCassName（“v-datefield”）

1）带有组件的布局

公共类MyDateFieldComponent扩展了水平布局{
公共MyDateFieldComponent（）{
//基本设置
DateField fromDateField=新的日期字段（“From”，LocalDate.of（2011年2月6日））；
DateField toDateField=新的日期字段（“To”，LocalDate.of（2018年2月6日））；
设置间隔（真）；
添加组件（fromDateField、toDateField）；
//添加扩展名
addExtension（新的CalendarFocusPopenExtension（））；
}
}

2）扩展-java/服务器端

import com.vaadin.annotations.JavaScript；
导入com.vaadin.server.AbstractJavaScriptExtension；
@JavaScript（“日历焦点弹出窗口打开程序扩展名.js”）
公共类CalendarFocusPopupPenerExtension扩展了AbstractJavaScriptExtension{
公共日历focuspopupenerExtension（）{
//调用关联JS中定义的绑定函数
调用函数（“绑定”）；
}
}

3）扩展-js/客户端

window.com\u示例\u日历\u日历focuspopupenerExtension=函数（）{
this.bind=函数（）{
如果（document.readyState==“完成”）{
//如果在文档已加载时执行，只需绑定即可
console.log（“文档已加载，绑定”）；
bindToAllDateFields（）；
}否则{
//否则，在完成加载时绑定
log（“加载文档节点，稍后绑定”）；
window.onload=函数（）{
log（“文档最终加载，绑定”）；
bindToAllDateFields（）；
}
}
};
函数bindToAllDateFields（）{
//获取要为其分配焦点处理程序的所有日期字段
var dateFields=document.getElementsByClassName（“v-datefield”）；
对于（var i=0；i

4）结果

---

以后更新 第二种方法可能是为字段分配一些ID，然后定期检查以查看何时所有ID都可见，一旦可见，就绑定焦点侦听器

1）带有组件的布局

公共类MyDateFieldComponent扩展了水平布局{
公共MyDateFieldComponent（）{
//基本设置
DateField fromDateField=新的日期字段（“From”，LocalDate.of（2011年2月6日））；
fromDateField.setId（“fromDateField”）；//使用id绑定
fromDateField.setVisible（false）；//最初隐藏它
DateField toDateField=新的日期字段（“To”，LocalDate.of（2018年2月6日））；
toDateField.setId（“toDateField”）；//使用id绑定
toDateField.setVisible（false）；//最初将其隐藏
//模拟延迟，直到字段可用
按钮显示字段按钮=新按钮（“显示字段”，e->{
fromDateField.setVisible（true）；
toDateField.setVisible（true）；
});
设置间隔（真）；
添加组件（showFieldsButton、fromDateField、toDateField）；
//添加扩展名
addExtension（新的CalendarFocusPopuPenExtension（fromDateField.getId（），toDateField.getId（））；
}
}

2）扩展-java/服务器端

@JavaScript（“日历焦点弹出打开程序扩展名.js”）
公共类CalendarFocusPopupPenerExtension扩展了AbstractJavaScriptExtension{
公共CalendarFocusPopupPennerExtension（字符串…idsToBindTo）{
//将参数作为字符串数组发送
JsonArray arguments=Json.createArray（）；
对于（int i=0；i

3）扩展-js/客户端

window.com\u示例\u日历\u日历focuspopupenerExtension=函数（）{
无功定时器；
this.bind=函数（idsToBindTo）{
//每秒钟检查一次字段是否可用。可以根据需要调整间隔
定时器=设置间隔（函数（）{