Hi,
We are using IntlProvider with en-AU locale. The locale appears to be the only prop available. We have centralised the specification of dates which allows for consistent display of dates throughout the application except for grid date column filters. The en-AU locale at least results in a filter format of day/month/year e.g. 5/7/2021, however this doesn't match our preferred format of dd/MM/yyyy i.e. 05/07/2021.
Is there any way to specify the default date format through the IntlProvider? If not, is there anything we can do to force the grid date column filter to inherit the format specified on the column?
We would like to avoid having to implement a custom filter from scratch just for the date format, however if this is the only solution, do you have an example of how to reproduce the default filter (i.e. 2 x logical operator dropdown and datepicker with clear and filter buttons) as a custom filter where the DatePicker format can be specified?
Kind regards,
David
1 Answer, 1 is accepted
Hi David,
If the pickers don't have specified format the "d" pattern as default that defaults to "dd/MM/yyyy" in en-AU locale. You can override the format before passing it to the load method, for example:
caGregorian.main['en-AU'].dates.calendars.gregorian.dateFormats.short = 'dd/MM/yyyy';When the pickers are empty, they show localized text based on the localized format. This is based on the displayName for each field. These can be translated into different languages as set for each of the formats. Let say you want to use "dd" instead of the word "Day" in your app. Then you can set the day fields's DispalyName to "dd".
dateFields.main['en-AU'].dates.fields.day.displayName = 'dd';
dateFields.main['en-AU'].dates.fields.month.displayName = 'mm';
dateFields.main['en-AU'].dates.fields.year.displayName = 'yyyy';Here is runnable example that demonstrates both things: https://stackblitz.com/edit/react-tverqf?file=app%2Fmain.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';
import numbers from 'cldr-numbers-full/main/en-AU/numbers.json';
import currencies from 'cldr-numbers-full/main/en-AU/currencies.json';
import caGregorian from 'cldr-dates-full/main/en-AU/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/en-AU/dateFields.json';
import { IntlProvider, load } from '@progress/kendo-react-intl';
import { DatePicker } from '@progress/kendo-react-dateinputs';
import { DateFormatter } from './DateFormatter';
dateFields.main['en-AU'].dates.fields.day.displayName = 'dd';
dateFields.main['en-AU'].dates.fields.month.displayName = 'mm';
dateFields.main['en-AU'].dates.fields.year.displayName = 'yyyy';
caGregorian.main['en-AU'].dates.calendars.gregorian.dateFormats.short =
'dd/MM/yyyy';
load(
likelySubtags,
currencyData,
weekData,
currencies,
numbers,
caGregorian,
dateFields
);
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
}
render() {
const { date } = this.state;
return (
<div className="row">
<IntlProvider locale="en-AU">
<DatePicker />
</IntlProvider>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('my-app'));
Note the strings that are overridden in the app are done so for the example purpose. In production app it will be best if you load the resources with already made modifications.
Regards,
Vasil
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Veteran
Regarding your final comment: "Note the strings that are overridden in the app are done so for the example purpose. In production app it will be best if you load the resources with already made modifications."
Can you please explain why it is best to load resources with modifications already made? If we modify the cldr files then we need to re-apply the changes every time we update cldr packages, whereas your suggestion above would always work.
Kind regards,
David
David,
If there is already have some build process the placed code there will be executed only once for deployment of the app. On the other hand if the code is in the app, it will be sent to every user of the app and executed every time he loads the page.