vaadin 的 datetimepicker 组件在用户仅填写日期或时间任一字段时会返回 null，导致无法分别获取有效日期或时间。本文提供基于 javascript 事件监听的可靠 workaround，实现日期单独输入时自动补全默认时间（如 00:00）。
Vaadin 官方 DateTimePicker 组件当前不支持“部分输入保留非空字段值”的行为：当用户只选择日期而未设置时间，或只设置时间而未选择日期时，getValue() 总是返回 null。这是由底层 Web Component 的设计限制所致（参见 vaadin/web-components #668），且截至 Vaadin 24+ 版本仍未原生支持自定义缺失字段的默认值。
✅ 推荐解决方案：通过 JavaScript 动态补全时间字段
最稳定、兼容性最佳的方式是利用 Element.executeJs() 在客户端监听日期选择器（vaadin-date-time-picker-date-picker）的 change 事件，并在触发时强制将时间选择器（vaadin-date-time-picker-time-picker）设为默认值（例如 '00:00'）：
DateTimePicker dateTimePicker = new DateTimePicker("Select date & time");
// 当日期被修改时，自动将时间设为 00:00（午夜）
dateTimePicker.getElement().executeJs(
"const datePicker = this.getElementsByTagName('vaadin-date-time-picker-date-picker')[0];" +
"const timePicker = this.getElementsByTagName('vaadin-date-time-picker-time-picker')[0];" +
"datePicker.addEventListener('change', () => {" +
" if (!timePicker.value) timePicker.value = '00:00';" +
"});"
);
// 后续可安全获取非 null 的 LocalDateTime 值
dateTimePicker.addValueChangeListener(event -> {
LocalDateTime value = event.getValue();
if (value != null) {
Notification.show("Selected: " + value.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm")));
}
});
add(dateTimePicker);⚠️ 注意事项：此方案依赖 Shadow DOM 中子组件的标签名，适用于 Vaadin 23+（Web Component 架构）。若升级至未来版本，请验证 vaadin-date-time-picker-* 元素结构是否变更；若需默认时间为 12:00 AM（即 00:00）以外的值（如 14:00），只需修改 '00:00' 字符串即可；不建议在服务端尝试解析 getValue() 的 null 状态来推断哪一字段为空——因组件本身不暴露内部字段状态，该逻辑不可靠；如需支持“仅选时间 + 默认今日日期”，可对 time-picker 的 change 事件做对称处理（补充 datePicker.value = today）。
✅ 替代思路（服务端兜底，不推荐）
若 JavaScript 方案受限（如严格 CSP 策略），可在服务端约定：当 getValue() 为 null 时，检查请求参数中原始的 date 和 time 字段（需自定义表单提交），但这需放弃 DateTimePicker 的封装便利性，失去响应式绑定优势。
综上，客户端 JS 补全是当前最简洁、低侵入、高可用的实践方案。它既规避了组件限制，又无需引入额外依赖或重构 UI 流程，适合绝大多数生产场景。
