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

Datepicker and Arabic-Hindi Numbers

2 Answers 435 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Monther
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 {
  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

Sort by
0
Accepted
Kiril
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.
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.

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

That's actually more than perfect :) 

Thank you for your help Kiril

Monther

Tags
General Discussions
Asked by
Monther
Top achievements
Rank 1
Answers by
Kiril
Telerik team
Monther
Top achievements
Rank 1
Share this question
or