当 showTime 设置为 true 时，PrimeFaces 7.0 DatePicker 抛出 JS TypeError答案

【问题标题】：PrimeFaces 7.0 DatePicker throws JS TypeError when showTime is set to true当 showTime 设置为 true 时，PrimeFaces 7.0 DatePicker 抛出 JS TypeError
【发布时间】：2019-12-13 07:44:16
【问题描述】：

我正在像这样在我的 .xhtml 文件中使用 PrimeFaces datePicker 组件

<p:datePicker id="src_time"
    value="#{flightDetailController.flight.UTCsource}"
    pattern="dd.MM.yyyy" inline="true" />

这个 flightDetailController 有一个 Flight 对象的 getter 和 setter

public void setFlight(Flight flight) {
    this.flight = flight;
    doReloadFlight();
}

public void doReloadFlight() {
    this.flight = flightService.loadFlight(flight.getFlightId());
}

public Flight getFlight() 
{
    if (flight == null) {
        flight = new Flight();
    }
    return flight;
}

Flight 对象有一个用于 Java.util.Date 对象的 getter 和 setter

public Date getUTCsource() {
    return UTCsource;
}

public void setUTCsource(Date uTCsource) {
    UTCsource = uTCsource;
}

如果我运行此代码，航班（之前设置的）将正常加载，并且 datePicker 将显示对象的日期。但是，当我将属性 showTime="True" 添加到 datePicker 时，我的控制台中出现以下 JS 异常：

Cannot read property 'split' of undefined TypeError: Cannot read property 'split' of undefined at K.<computed>.<computed>.parseTime

我正在使用 PrimeFaces 7.0，根据文档值应该设置为 java.util.Date 对象，它只是声明通过设置 showTime="True" 来启用 timePicker 功能，所以我不确定我在哪里出错了。

谢谢。

【问题讨论】：

使用PrimeFaces 8.0.RC1时也会出现这种情况吗？在 datePicker 上修复了多个与模式和时间处理相关的问题。
它确实在 8.0.RC1 中工作 - 那么组件在 7.0 中是否基本上不起作用？我可以以某种方式解决这个问题，还是我最好的选择只是坚持使用 8.0 并希望它不会破坏其他任何东西？
在模式中添加“hh:mm”是否有效？就像过去几个月日期选择器上的multiple issues fixed and refatored 一样，我猜这是一个错误。为了解决这个问题，您应该获取PF 7.0 source 并构建一个不包括压缩的 *.css 和 *.js 版本，以便您可以更好地调试 JavaScript 源代码。
另外一个好主意是使用 PF 8.0.RC1 测试您的应用，并在最终版本 8.0.0 发布之前报告您观察到的最终问题。
向模式添加“hh:mm”不起作用。根据文档，该模式仅适用于日期部分，向其中添加时间模式会引入意外的字符异常。我现在可能会使用 8.0.RC1 版本。

标签： jsf primefaces

【解决方案1】：

我的解决方案是创建一个转换器并将日期显示为字符串

@Dependent
@FacesConverter(value = "fechaHoraConverter", managed = true)
public class FechaHoraConverter implements Converter<Date>{

    private SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy hh:mm a");

    @Override
    public Date getAsObject(FacesContext context, UIComponent component, String fecha) {
        try {
            return sdf.parse(fecha);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Date fecha) {
        return sdf.format(fecha);
    }

}


<p:datePicker id="ven" value="#{tr.tarea.vencimiento}" required="true" showTime="true" appendTo="@(body)" showIcon="true" readonlyInput="true" pattern="dd/MM/yyyy" hourFormat="12"
                            converter="fechaHoraConverter"/>

Show pickdate

【讨论】：