JHipster 4.14.1中datetime-local输入双向绑定失效求助

我之前也碰到过几乎一模一样的问题，核心原因是datetime-local输入框的输出格式和后端ZonedDateTime的要求不匹配，导致后端无法正确解析，最终返回null。下面给你几个可行的解决方案，你可以根据项目情况选择：

方案一：让后端自动维护时间字段（最推荐） #

其实创建时间（Created）和修改时间（Modified）这类字段，完全不需要用户在前端输入，应该由服务端统一控制，这样既避免格式问题，也更符合业务逻辑。

你可以在后端的ProductServiceImpl里修改保存方法：

@Override
public Product save(Product product) {
    // 新增时设置创建时间
    if (product.getId() == null) {
        product.setCreated(ZonedDateTime.now(ZoneId.systemDefault()));
    }
    // 无论新增还是更新，都更新修改时间
    product.setModified(ZonedDateTime.now(ZoneId.systemDefault()));
    return productRepository.save(product);
}

然后前端直接把表单里的Created和Modified字段去掉，或者设置为隐藏状态，这样POST请求里就不需要传这两个字段，后端会自动填充值，彻底解决null的问题。

方案二：前端处理格式转换 #

如果一定要让用户输入这两个时间，那得把datetime-local返回的字符串转成后端能识别的带时区格式：

1. 首先在组件里引入DatePipe（记得在模块里声明），然后在提交请求前处理字段：

import { DatePipe } from '@angular/common';

// 组件构造函数注入DatePipe
constructor(private datePipe: DatePipe, private productService: ProductService) {}

// 提交表单的方法
saveProduct() {
    // 把datetime-local的字符串转成带时区的格式
    const processedProduct = {
        ...this.product,
        created: this.datePipe.transform(this.product.created, 'yyyy-MM-ddTHH:mm:ssZZZZZ'),
        modified: this.datePipe.transform(this.product.modified, 'yyyy-MM-ddTHH:mm:ssZZZZZ')
    };
    // 发起POST请求
    this.productService.create(processedProduct).subscribe(...);
}

2. 另外，在初始化表单的时候，要给字段设置正确的初始值格式：

ngOnInit() {
    // 新增时设置当前时间的datetime-local格式
    if (!this.product.id) {
        const now = new Date();
        this.product.created = now.toISOString().slice(0, 16);
        this.product.modified = this.product.created;
    } else {
        // 编辑时，把后端返回的ZonedDateTime转成datetime-local支持的格式
        const createdDate = new Date(this.product.created);
        this.product.created = createdDate.toISOString().slice(0, 16);
        // 修改时间同理
        const modifiedDate = new Date(this.product.modified);
        this.product.modified = modifiedDate.toISOString().slice(0, 16);
    }
}

方案三：后端调整解析规则 #

如果前端不想改代码，可以在后端实体类上添加Jackson注解，让它支持解析datetime-local的格式：

import com.fasterxml.jackson.annotation.JsonFormat;
import java.time.ZonedDateTime;
import java.time.ZoneId;

public class Product {
    // 其他字段...
    
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm", timezone = "Asia/Shanghai")
    private ZonedDateTime created;
    
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm", timezone = "Asia/Shanghai")
    private ZonedDateTime modified;
    
    // getter和setter...
}

这里指定了时区为东八区，你可以根据项目实际部署的时区调整。

内容的提问来源于stack exchange，提问作者1Z10