I'm trying to add a local date picker i was successful in localizing
everything in the picker except changing the numbers my code is:
import { DatePicker } from '@progress/kendo-react-dateinputs';import { IntlProvider, LocalizationProvider, load, loadMessages,} from '@progress/kendo-react-intl';import currencyData from 'cldr-core/supplemental/currencyData.json';import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';import numberingSystems from 'cldr-core/supplemental/numberingSystems.json';import weekData from 'cldr-core/supplemental/weekData.json';import caGregorian from 'cldr-dates-full/main/ar-SA/ca-gregorian.json';import dateFields from 'cldr-dates-full/main/ar-SA/dateFields.json';import timeZoneNames from 'cldr-dates-full/main/ar-SA/timeZoneNames.json';import numbers from 'cldr-numbers-full/main/ar-SA/numbers.json';import React, { Component } from 'react';import arMessages from '../config/kendo/ar-SA.json';import { AppDateInput } from './AppDateInput';import { AppPopup } from './AppPopup';loadMessages(arMessages, 'ar-SA');load( likelySubtags, currencyData, weekData, numbers, caGregorian, dateFields, timeZoneNames, numberingSystems);class AppDatePicker extends Component {render() { return ( <LocalizationProvider language='ar-SA'> <IntlProvider locale='ar-SA'> <DatePicker popup={AppPopup} dateInput={AppDateInput} defaultValue={this.props.defaultValue} onChange={this.props.onChange} /> </IntlProvider> </LocalizationProvider> ); }}see attached pic for result
know i can't change the numbers from 0123456789 to ٠١٢٣٤٥٦٧٨٩
any idea how to do that ?
thanks
Monther
2 Answers, 1 is accepted
Hello Monther,
We would love to have support for Arabic-Hindi Numerals in the KendoReact Calendar components, but this feature is currently not available.
However, customizing the content of the Calendar cell is possible through the `cell` property of the Calendar, which can be further implemented in the DatePicker through the `calendar` property.
I did my best to recreate the desired behavior in the following stackblitz example, where we replace every digit in the calendar cell.
https://stackblitz.com/edit/react-wvmbfe?file=src/custom-calendar.jsx
Please let me know if the provided example is helpful to you, or if I got something wrong in recreating your use-case.
I would be happy to help if you have any further questions
Regards,
Kiril
Progress Telerik
Тhe web is about to get a bit better!
The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.
Rank 1
That's actually more than perfect :)
Thank you for your help Kiril
Monther