Date format from a custom locale

[n/a]

I'm working on an Angular 19 application. Based on the codebase with kendo 19.1.2,
i'm trying to Implement a user-configurable date format that can be changed at runtime (e.g., 'dd/MM/yyyy', 'yyyy-MM-dd', 'dd MMM yy').
The date format should be configurable per user.
All dates displayed throughout the application should use this custom format
Date parsing (when users input dates manually) should respect this format
Kendo DatePickers should continue using their internal 'c' or 'g' format for the picker UI, but display/parse the selected date using the user's custom format
I attempted to override the clrdIntlService but it didn't work correctly. The datepickers didn't respect the custom format.
Questions:

What's the correct approach to implement this? Should I:
 * Create a custom IntlService for Kendo?
 * Override date formatting globally?
How can I make Kendo DatePickers use the custom format for display/parsing while keeping their internal format?

Can you provide a complete working example with:
- Service/provider configuration
- Integration with Kendo DatePicker
- How to apply it across the entire application

Thank you in advance!

[Martin Bechev]

Hi Nunzio,

The most straightforward way to centralize the date format is by using a custom service to set and retrieve the desired format.

@Injectable({
  providedIn: 'root'
})
export class DateFormatService {
  private currentFormatSubject = new BehaviorSubject<string>('MMM yyyy');
  public currentFormat$: Observable<string> = this.currentFormatSubject.asObservable();

  setFormat(format: string): void {
    this.currentFormatSubject.next(format);
  }

  getFormat(): string {
    return this.currentFormatSubject.value;
  }
}

The IntlService isn’t designed to support dynamic changes to date formats. It can adjust formats for a specific locale, but only during initialization.

I’ve attached a runnable Angular project that demonstrates the suggested approach using the custom service.

Additionally, for any Grid columns that display dates, you must set the format property on each column. Otherwise, the entire Date object will be shown in the cell.

Regards,
Martin Bechev
Progress Telerik