This is a migrated thread and some comments may be shown as answers.

Datepicker and Arabic-Hindi Numbers

2 Answers 398 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Monther asked on 25 Apr 2021, 05:36 PM

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 {
} 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');
class AppDatePicker extends Component {
render() {
    return (
    <LocalizationProvider language='ar-SA'>
        <IntlProvider locale='ar-SA'>

see attached pic for result

know i can't  change the numbers from 0123456789 to ٠١٢٣٤٥٦٧٨٩
any idea how to do that ?



2 Answers, 1 is accepted

Sort by
Telerik team
answered on 26 Apr 2021, 06:02 AM

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.

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

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:

Top achievements
Rank 1
answered on 26 Apr 2021, 04:09 PM

That's actually more than perfect :) 

Thank you for your help Kiril


General Discussions
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Top achievements
Rank 1
Share this question