Declined
Last Updated: 21 Jul 2020 10:24 by ADMIN
FIIG Securities
Created on: 06 Dec 2019 03:20
Category: KendoReact
Type: Bug Report
2
Bug in React Grid Component

There seems to be bug in the React Grid around date formatting inconsistencies:


Current behavior
When entering a date format of {0:dd/MM/yyyy} for a ColumnData prop, when in edit mode a calendar picker shows the date format as US date of MM/dd/yyyy.Expected behavior
The date should show as dd/MM/yyyy per the requested date format.Minimal reproduction of the problem with instructions
Create a Kendo grid with one column with following ColumnData:
const settlementDate: ColumnData = {
field: 'settlementDate',
title: 'Setlement Date',
format: '{0:dd/MM/yyyy}',
filterable: true,
filter: 'date',
editor: 'date'
};
Note that the date is displayed as MM/dd/yyyy
Change the format to "dd/MM/yyyy"
Note that when in view mode the date is displayed as "dd/MM/yyyy".
What is the motivation or use case for changing the behavior?
Currently I have to create a custom date cell for every instance of using a date field in my grid which is less than ideal.Environment
Package versions:
@progress/kendo-data-query@1.5.2
@progress/kendo-dateinputs-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606
@progress/kendo-drawing@1.6.0
@progress/kendo-dropdowns-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606 deduped
@progress/kendo-react-data-tools@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-dateinputs@3.9.0
@progress/kendo-date-math@1.2.0
@progress/kendo-react-buttons@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-dropdowns@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-grid@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-inputs@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-intl@3.9.0
@telerik/kendo-intl@1.5.2
@progress/kendo-react-pdf@3.9.0
@progress/kendo-file-saver@1.0.7
@progress/kendo-theme-default@4.7.0
@progress/kendo-theme-material@3.5.0
@progress/kendo-ui@2019.3.1113Browser:Chrome (desktop) version 78.0.3904.108
System:
Platform: Windows

Other information:
It appears that there is an incompatibility as to what a text display field requires as opposed to what a date picker requires. For text display it requires a format of '{0:dd/MM/yyyy}' whereas the datepicker requires a format of "dd/MM/yyyy".

3 comments
ADMIN
Stefan
Posted on: 21 Jul 2020 10:24

Hello, Dhara,

https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/formats/This will require the need for a custom filter cell where the developer will have access to all of the props of the DatePicker used for filtering:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells

Then the desired format has to be set to the custom filter:

 

Regards,
Stefan
Progress Telerik

Dhara
Posted on: 21 Jul 2020 09:00
Any other way to change the date format in the datepicker filter ?
ADMIN
Stefan
Posted on: 06 Dec 2019 08:05

Hello,

The reason why we do not automatically apply the format of the column to the edit cell is that the column format works with more complex formats and they cannot be set directly to the DatePicker in 100% of the cases. Check this format for example which is possible in the cell, but not in the DatePicker:

https://stackblitz.com/edit/react-qcclzm?file=app/main.jsx

Another option then a custom cell is to use the IntlProvider which will format the dates based on the provided culture across all components:

https://www.telerik.com/kendo-react-ui/components/grid/globalization/

https://www.telerik.com/kendo-react-ui/components/intl/i18n/

I hope this provides information on why this is happening.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items