Internationalization

Clarity uses the locale identifiers supported by Angular for getting the date format, first day of the week, month and day names. These values are used to generate the input field placeholder and the calendar.

Placeholder

Using the date format retrieved from Angular, the placeholder is generated in one of the following formats:

  1. big-endian (YYYY/MM/DD)
  2. little-endian (DD/MM/YYYY)
  3. middle-endian (MM/DD/YYYY)
We recommend against overriding the automatically generated placeholder. Adding an incorrect placeholder will create confusion while entering the date in the input.

The following demo shows two date pickers. The first date picker uses the en-US locale idenitifier whereas the second one uses fr. Both the date pickers have different first day of the week and the calendar is generated based on the first day of the week.

By default, Angular uses the en-US locale but you can set your application's locale to a different value using the --locale parameter while building your Angular CLI application.

Changing the locale requires its data to be registered first. Afterwards you can simply provide the locale in any Module or Component by the LOCALE_ID token.

For more information on setting the locale parameter and loading the locale data, please read the Angular internationalization documentation.

The date picker uses the locale set for the application to ensure consistency of date inputs and outputs across the application. It is not recommended to override the locale identifier to use different locales for different date picker instances in the same application.