Datepicker and Arabic-Hindi Numbers

[Monther]

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

[Kiril]

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

[Monther]

That's actually more than perfect :) 

Thank you for your help Kiril

Monther