Setting a default date format between 2 langauges

[Jonny]

Hi,

We have an application that has to be read in both Arabic and English which has a toggle that changes the localization between the two languages.

When the language is set to Arabic the date format changes from Gregorian to Hijri but we need the date format to always be Gregorian even when in Arabic.

Is there a way to intercept this in the localization and/or set a Gregorian format on the date tag that won't be overridden when the language changes?
Example of the date input field being used:

<input type="text" kendoTextBox class="form-control" value="{{currentContact?.dateOfBirth | date :'shortDate' }}" readonly="readonly">

[Svet]

Hi Jonny,

What I can suggest is to create several custom formats for each locale used by the application. That will allow you to use the corresponding custom format for the current locale.

Another option is to override the default behavior of the formatDate function of the CldrIntlService in a way similar to the demonstrated approach in the following article:

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/services/#toc-customizing-the-default-service

Here is an updated example demonstrating that suggestion:

https://stackblitz.com/edit/angular-qctc3g-hnap3r?file=app%2Fintl.service.ts

the essential part is the custom MyIntlService that extends the CldrIntlService where the formats for the "en-US", "es-ES", and "ar-IN" locales are set to be the same, while the default formats for the other locales used in the example bg-BG and de-DE aren't changed:

import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { CldrIntlService } from '@progress/kendo-angular-intl';

@Injectable()
export class MyIntlService extends CldrIntlService {
    constructor(@Inject(LOCALE_ID) localeId: string) {
        super(localeId);
    }

    public formatDate(value, format): string {
        if(this.localeId === 'es-ES' || this.localeId === 'ar-IN' || this.localeId === 'en-US'){
          return super.formatDate(value, 'dd/MM/y');
        }

        return super.formatDate(value, format);
    }
}

The example demonstrates the same behavior of the formatDate() and kendoDate pipe:

{{intl.formatDate(date,{date: 'date'})}}

{{date | kendoDate:'d':localeId}}

I hope the suggestions help. Please let me know in case I can provide any additional details or further assistance about this case. Thank you.

Regards,
Svetlin
Progress Telerik