Date Range Filter in Data Table

[itssaurav2004]

Is there any way to apply a filter which is range of date?

Suppose i want to display only those rows which has a manufacturing date between Jan 1, 2010 to Jan 15, 2010.

[persapiens]

I have the same issue too

[cagatay.civici]

No but you can implement your own filtering by placing input yourself on column header.

[cagatay.civici]

Filtering enhancements are pending, stay tuned.

[cbmyers]

Optimus,

do you have an example i can see of this:

No but you can implement your own filtering by placing input yourself on column header.

Thanks,

Chris

[rweaver]

Any update on date range filtering for DataTable ?

I've been able to put in a "filterBy" and both the textbox and dropdown approach let me key on a specific date, although both seem like a bit of a kludgy way to select a date.

What I'd really like to do is have the filter give a nice date selector, and/or a date range selector (similar to what you typically have on airline search sites for example).

[kingdan]

Optimus,

do you have an example i can see of this:

No but you can implement your own filtering by placing input yourself on column header.

Thanks,

Chris

SOLUTION:

Code: Select all

.calendarFilter .ui-inputfield
            {
                width:70px; !important;
                margin: 0 0.2em; !important;
            }

<f:facet name="header">
    Date
    <div style="display: block;  width: 90%; margin: auto;">
          <p:calendar id="firstDate" styleClass="calendarFilter" value="#{bean.minDate}">
                  <p:ajax event="dateSelect" listener="#{bean.filterDataTable()}" update="dataTableId" />
          </p:calendar>
           -
          <p:calendar id="lastDate" styleClass="calendarFilter" value="#{bean.maxDate}">
                  <p:ajax event="dateSelect" listener="#{bean.filterDataTable()}" update="dataTableId" />
          </p:calendar>
    </div>
</f:facet>

Notes:
1) It's important to wrap those calendars into a div with style=block for displaying the components bellow the header text.
2) Necessary apply style classes in order to display the components harmoniously.
3) I suggest specifying the column's width. (personally i like 200px in this case)
3) Div's width is set to 90% for making available the most possible space for the sorting click at the header cell. (when using sortBy)

[kingdan]

No but you can implement your own filtering by placing input yourself on column header.

I read the manual but i couldn't figure out how to implement the filter method on javascript.

I didn't understand this:
"Filter located at header is a global one applying on all fields, this is implemented by calling client
side api method called filter(), important part is to specify the id of the input text as globalFilter
which is a reserved identifier for datatable."

[smithh032772]

SOLUTION:

Code: Select all

.calendarFilter .ui-inputfield
            {
                width:70px; !important;
                margin: 0 0.2em; !important;
            }

<f:facet name="header">
    Date
    <div style="display: block;  width: 90%; margin: auto;">
          <p:calendar id="firstDate" styleClass="calendarFilter" value="#{bean.minDate}">
                  <p:ajax event="dateSelect" listener="#{bean.filterDataTable()}" update="dataTableId" />
          </p:calendar>
           -
          <p:calendar id="lastDate" styleClass="calendarFilter" value="#{bean.maxDate}">
                  <p:ajax event="dateSelect" listener="#{bean.filterDataTable()}" update="dataTableId" />
          </p:calendar>
    </div>
</f:facet>

Notes:
1) It's important to wrap those calendars into a div with style=block for displaying the components bellow the header text.
2) Necessary apply style classes in order to display the components harmoniously.
3) I suggest specifying the column's width. (personally i like 200px in this case)
3) Div's width is set to 90% for making available the most possible space for the sorting click at the header cell. (when using sortBy)

I have been doing something very similar to this and this works as designed for me, and i had no need to ask Optimus.Prime for dataTable to do something like this, especially, since I use LazyDataModel a lot through JSF/Primefaces web app that I'm developing; per my experience, p:dataTable filterBy and sortBy does not work well with LazyDataModel, so i had to develop my own solution, and it works for me.

[tehackio]

Hi, can you share your solution?
I'm working with lazydatamodel. The filter works well with strings, but I wanna put date interval, autocomplete, checks.

SOLUTION:

Code: Select all

.calendarFilter .ui-inputfield
            {
                width:70px; !important;
                margin: 0 0.2em; !important;
            }

<f:facet name="header">
    Date
    <div style="display: block;  width: 90%; margin: auto;">
          <p:calendar id="firstDate" styleClass="calendarFilter" value="#{bean.minDate}">
                  <p:ajax event="dateSelect" listener="#{bean.filterDataTable()}" update="dataTableId" />
          </p:calendar>
           -
          <p:calendar id="lastDate" styleClass="calendarFilter" value="#{bean.maxDate}">
                  <p:ajax event="dateSelect" listener="#{bean.filterDataTable()}" update="dataTableId" />
          </p:calendar>
    </div>
</f:facet>

Notes:
1) It's important to wrap those calendars into a div with style=block for displaying the components bellow the header text.
2) Necessary apply style classes in order to display the components harmoniously.
3) I suggest specifying the column's width. (personally i like 200px in this case)
3) Div's width is set to 90% for making available the most possible space for the sorting click at the header cell. (when using sortBy)

I have been doing something very similar to this and this works as designed for me, and i had no need to ask Optimus.Prime for dataTable to do something like this, especially, since I use LazyDataModel a lot through JSF/Primefaces web app that I'm developing; per my experience, p:dataTable filterBy and sortBy does not work well with LazyDataModel, so i had to develop my own solution, and it works for me.