p-columnFilter doesn't have a dateFormat @input - is this a bug ? Or what's the workaround to change date format?

[gilvicentevieira]

I'm using the p-columnFilter type="date" to filter date in my table, and i'm not being able to change the date format of the selected date on the calendar (the default format is mm/dd/yy and i want to change to dd/mm/yy)

I know that p-columnFilter uses the p-calendar component that has a dateFormat input that works to change the date format, but the p-columnFilter doesn't pass down the dateFormat input to the p-calendar.

Can anybody help ? Thanks

[UI-Team]

I have the same problem. Additionally I have the problem that the calendar dropdown is hidden by the table. To fix this I have to put the [applyTo] property to the <p-calendar> but there is no possibility to do this. Am I right? Is there a workaround?

[gilvicentevieira]

I have the same problem. Additionally I have the problem that the calendar dropdown is hidden by the table. To fix this I have to put the [applyTo] property to the <p-calendar> but there is no possibility to do this. Am I right? Is there a workaround?

About the calendar dropdown in my case it is working from the start, it was transparent by default but i've changed the css to make the background appear

Code: Select all

  
  	<th>
          <div class="p-d-flex p-jc-between p-ai-center">
            <p-columnFilter type="date" field="smdata" display="menu">
            </p-columnFilter>
          </div>
        </th>

About the locale/missing dateFormat issue i'll probably create an issue on primeng Github soon

[UI-Team]

Thanks for the answer. In my case I want to work with seperate filter row (display="row"). When I change it to "menu" everything except of the date format works.

Code: Select all

<th>
  <p-columnFilter type="date" field="deliveryDate"></p-columnFilter>
</th>

[PhilHuhn]

Hey, I'm not PrimeNG. I used the stackblitz as follows:
https://stackblitz.com/edit/primeng-tab ... onent.html

I changed the column to display as follows (sortable):

Code: Select all

<td>
    {{customer.date | date: 'yyyy-MM-dd'}}
</td>

The filter worked but, the display of the calendar control was not consistent with the column data. The appropriate place would be to set locale date format:
https://www.primefaces.org/primeng/showcase/#/i18n
but, I have not figured out how to do that (bummer). See Global locale configuration for calendar component #9387: https://github.com/primefaces/primeng/pull/9387
Phil