Skip to main content

DevExtreme and Angular with Internationalisation

· 2 min read

As an Australian developer, I'm always fighting with applications that default to US date formats. I was recently working on an Angular 8 application which was using the DevExpress DevExtreme components. The problem was that the date controls kept formatting my dates as MM/DD/YYYY which isn't helpful

I had a look at the DevExpress documentation and struggled to configure it to use my Australian date formats. It took longer than I expected to figure out the trick, so I thought I'd document it here for anyone else who gets stuck.

Installing DevExtreme for Angular​

The first step is to add the devextreme-angular package. The easiest way to do this is by using the devextreme-cli according to this page. If you already have it installed you can skip this step.

npx -p devextreme-cli devextreme add devextreme-angular

Installing DevExtreme Intl Support​

The next step is to install the devextreme-intl npm package. I wasted a lot of time trying to get the globalize one to work and ultimately gave up. Intl just worked.

npm install devextreme-intl

Finally, you need to import these modules in your angular app module (app.module.ts). As you can see in the following example, I've hard-coded my locale to en-AU. This isn't ideal, so you might want to consider using a GEO-IP lookup or something smarter.

import {locale} from 'devextreme/localization';
import 'devextreme-intl';

// Set the locale.
locale('en-AU');

// ...
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ]
// ...

Once you've done that, run ng serve and you should be off and racing.