Primefaces 数据表（日期列）按日历过滤答案

【问题标题】：Primefaces Datatable (date column) Filter by calendarPrimefaces 数据表（日期列）按日历过滤
【发布时间】：2015-02-11 08:37:38
【问题描述】：

我正在使用 PF 5.1。我想在这里按日历设置 primefaces 日历过滤 Primefaces 数据表（日期列）。是否可以？ -请帮助任何人。

【问题讨论】：

标签： primefaces jsf-2.2

【解决方案1】：

我知道这个问题是不久前被问到的，但这是我使用 Primefaces 5.2 的解决方案

<f:facet name="filter">
    <p:calendar  pattern="dd/MM/yyyy">
        <p:ajax event="dateSelect"  oncomplete="PF('seasonDataTable').filter()"/>
    </p:calendar>
</f:facet>

希望对大家有帮助

【讨论】：

最好使用 PrimeFaces 扩展 pe:javascript，因为它不会进行 ajax 调用。使用p:ajax有两个ajax调用，pe:javascript只有一个

【解决方案2】：

我的网站上也有这个要求。但是我有与@stg 不同的实现。在撰写本文时，我正在使用 Primefaces 5.0。这是完成这项工作的工作：

XHTML 网站

<p:dataTable id="dataTable" widgetVar="Table" var="dataItem">
   ...

   <p:column id="date" 
             headerText="Date"
             filterFunction="#{controller.filterByDate}"
             filterBy="#{dataItem.date}">
         <f:facet name="filter">
            <p:calendar id="cal1" pattern="yyyy-MM-dd">
               <p:ajax event="dateSelect" oncomplete="PF('Table').filter()" update="dataTable" />
               <p:ajax event="change" execute="@this" oncomplete="PF('Table').filter()" update="dataTable"/>
            </p:calendar>
         </f:facet>
      <p:outputLabel value="#{dataItem.date}">
         <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
      </p:outputLabel>
   </p:column>

<p:dataTable>

Java 网站

@ManagedBean
@SessionScoped
public class Controller {

    public boolean filterByDate(Object value, Object filter, Locale locale) {

        if( filter == null ) {
            return true;
        }

        if( value == null ) {
            return false;
        }

        return DateUtils.truncatedEquals((Date) filter, (Date) value, Calendar.DATE);
    }
}

网站说明

我正在使用DateUtils.truncateEquals()，因为我的日期列包含时间戳。这是为了确保我在特定日期进行过滤，而不考虑时间戳。如果我的输入只是日期，那么表格视图将为空。
删除过滤器输入时需要<p:ajax event="change" ...> 来重置表视图。我不确定这是否是处理此问题的正确方法，我目前正在使用它，直到找到更好的方法。

【讨论】：

【解决方案3】：

对于较旧的 PrimeFaces 版本，必须像此答案中那样实施解决方案，对于新版本，其他答案包含该解决方案。

基本上可以这样实现：

在过滤器方面使用隐藏的输入字段（如h:inputHidden）来隐藏默认过滤器输入字段
将p:calendar 放入标题方面
将 dateSelect 事件添加到您的日历中。在onstart 中，将隐藏输入的值替换为日历的值。在oncomplete 中使用客户端 API 过滤您的数据表
编写您的自定义过滤器函数，根据需要比较对象值和过滤器值

请注意，p:calendar 仅用于客户端输入日期。如果您还需要过滤器函数中的正确时间，请考虑使用额外的 TimePicker（例如http://www.primefaces.org/showcase-ext/sections/timePicker/basicUsage.jsf）

编辑：实际上，PrimeFaces 日历支持mode="datetime" 中的日期时间。我没有意识到这一点。见https://code.google.com/p/primefaces/issues/detail?id=648

【讨论】：

【解决方案4】：

你应该可以这样做：

<f:facet name="filter">
      <p:calendar mode="inline" />  
</f:facet>

如果你不是懒惰地过滤，那么你必须提供并实现一个 filterFunction

<f:facet name="filter" filterFunction="#{backingBean.filterByCalendar}">
      <p:calendar mode="inline" />  
</f:facet>

【讨论】：