Primefaces Datatable (date column) Filter by calendar

Question

I am using PF 5.1. I want to filter Primefaces datatable (date column) by calendar set primefaces calendar here .

Answer 1

I know this question was asked a while ago but here is my solution with 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>

I hope it can help anybody

Answer 2

I have the requirement too on my site. However I have a different implementation from @stg. By the time of this writing, I'm using Primefaces 5.0. Here is the piece of work that does the job:

XHTML site

<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 site

@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);
    }
}

Site note

• I'm using DateUtils.truncateEquals() because my date column contains timestamp. This is to ensure that I'm filtering on the particular date regardless of timestamp. If my input is date only then table view would be empty.
• <p:ajax event="change" ...> is needed to reset table view when the filter input is remove. I wasn't sure whether this is the correct way to handle this, I'm currently using it until I find a better one.

Answer 3

You should be able to do this like this:

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

If you are not filtering layzily, then you have to provide and implement a filterFunction

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

Answer 4

For older PrimeFaces versions the solution has to be implemented like in this answer, for newe versions the other answer contains the solution.

Basically, this can be achieved like this:

• use a hidden input field (like h:inputHidden) in the filter facet to hide the default filter input field
• put a p:calendar in the header facet
• add a dateSelect event onto your calendar. In onstart replace the value of your hidden input by the value of the calendar. In oncomplete use the client side API to filter your datatable
• write your custom filter function to compare the object value and the filter value as required

Note that the p:calendar is meant to be for client input of a date only. If you also need the correct time in your filter function consider using an additional TimePicker (e.g. http://www.primefaces.org/showcase-ext/sections/timePicker/basicUsage.jsf)

Edit: Actually, PrimeFaces calendar supports datetime in mode="datetime". I wasn't aware of this. See https://code.google.com/p/primefaces/issues/detail?id=648