How do I get DatePicker to use the browser's locale?

[Scott Moxham]

How can I get the DatePicker (and DateRangePicker) to use the default date format of the browser, instead of overriding it?

My browser is set as en-gb and everything uses the date format dd/mm/yyyy except for the Syncfusion controls, which all use the US format (mm/dd/yyyy). I don't want to set the locale of the control to en-gb as if an American logs onto our system they will have mismatched formats.

Everywhere else in our product we use .toLocaleDateString() so everything else just displays in the user's date format. Is there a way to get Syncfusion controls to just do the same?

This feels like quite basic functionality and I'm confused as to why they don't do this by default.

[Priyanka Karthikeyan]

Hi Scott Moxham,

 

Thank you for reaching out to us!

 

By default, the en-US culture is applied to the DatePicker and DateRangePicker components. If you would like to use a different culture based on the browser's language, you can achieve this by updating the locale property and loading the corresponding CLDR data.

To assist you further, we’ve prepared a sample demonstrating how to load the en-GB culture for the DatePicker component:

 

 

 

​<template>
<div id="app">
  <div class="wrapper">
    <ejs-datepicker id="datepicker" locale="en-GB"></ejs-datepicker>
  </div>
</div>
</template>

<script>
import { loadCldr, L10n } from "@syncfusion/ej2-base";
import { DatePickerComponent } from "@syncfusion/ej2-vue-calendars";

// Ensure `require` is accessible in your environment
declare var require: any;

export default {
components: {
  "ejs-datepicker": DatePickerComponent,
},
mounted() {
  // Load CLDR data required for localization
  loadCldr(
    require("../cldr-data/numbers.json"),
    require("../cldr-data/ca-gregorian.json"),
    require("../cldr-data/numberingSystems.json"),
    require("../cldr-data/timeZoneNames.json")
  );

  // Load localization strings
  L10n.load({
    "en-GB": {
      datepicker: {
        today: "Today",
      },
    },
  });
},
};
</script>
 

Sample: https://stackblitz.com/edit/7hxzvxtu-ht9ezbbb?file=src%2FApp.vue

 

For more information about localization, please refer the below UG documentation

https://ej2.syncfusion.com/vue/documentation/datepicker/globalization

 

 

Regards,

Priyanka K

[Scott Moxham]

Hi,

Do I have to specify the locale on EVERY control that I include in my app or is there a global setting?

The loadCldr in your example appears to be invalid; The localization link that you included has working code - the data is all in locale specific folders within cldr-data.

So if I'm understanding this correctly, to get a site that adapts to the user's locale, I need to:

• Import the locale data doing something like this:

const locale = navigator.language;

const localeFolder = locale === 'en-US' ? 'en-US-POSIX' : locale;

const [numberingSystems, gregorian, numbers, timeZoneNames, weekData] = await Promise.all([

    import('../../node_modules/cldr-data/supplemental/numberingSystems.json'),

    import(`../../node_modules/cldr-data/main/${localeFolder}/ca-gregorian.json`),

    import(`../../node_modules/cldr-data/main/${localeFolder}/numbers.json`),

    import(`../../node_modules/cldr-data/main/${localeFolder}/timeZoneNames.json`),

    import('../../node_modules/cldr-data/supplemental/weekdata.json') // To load the culture based first day of week

]);

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, weekData);

• Use `navigator.language` to find the browser's current locale and load the appropriate localization data for that language (assuming that it's one of the 317 available) using `loadCldr()`.
• Specify locale property for EVERY Syncfusion control in my application based on `navigator.language`.

This does seem a bit overcomplicated given the browser can provide localized date formats / day names / number formatting through standard APIs - Surely I've misunderstood something?

Note: I'm using vue without any server side rendering, so I don't think `require` is available - it looks to be mainly a NodeJS thing and not a standard.

[Priyanka Karthikeyan]

Hi Scott Moxham,

 

Thank you for providing the update and sharing your code snippet. To set the culture globally across your application, you can utilize the setCulture method from the ej.base namespace. This method ensures that the desired culture is applied consistently to all UI text elements in your application.

 

For example, to set the culture globally, you can follow the approach outlined in the code snippet below. Additionally, the loadCldr method is used to load the necessary CLDR (Unicode Common Locale Data Repository) files to support localization for the selected culture:

 

 

​<template>
<div id="app">
  <div class="wrapper" style="margin-top: 100px">
    <ejs-datepicker id="datepicker"></ejs-datepicker>
  </div>
</div>
</template>

 

<script>
import Vue from "vue";
import { loadCldr, L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { DatePickerComponent } from "@syncfusion/ej2-vue-calendars";

 

L10n.load({
// You can add your specific localization here if needed
});

 

const locale = navigator.language;
const localeFolder = locale === 'en-US' ? 'en-US-POSIX' : locale;

 

import en_GB_ca from '../node_modules/cldr-data/main/ar/ca-gregorian.json';
import en_GB_timeZoneNames from '../node_modules/cldr-data/main/ar/timeZoneNames.json';
import en_GB_numbers from '../node_modules/cldr-data/main/ar/numbers.json';
import en_GB_currencies from '../node_modules/cldr-data/main/ar/currencies.json';
import numberingSystems from "../node_modules/cldr-data/supplemental/numberingSystems.json";
import currencyData from "../node_modules/cldr-data/supplemental/currencyData.json";

 

loadCldr(
en_GB_ca, 
en_GB_timeZoneNames, 
en_GB_numbers, 
en_GB_currencies, 
numberingSystems, 
currencyData
);
setCulture(localeFolder);

 

export default {
components: {
  "ejs-datepicker": DatePickerComponent,
},
data: function () {
  return {};
}
};
</script>

 

Key Highlights:

1. CLDR Data: Ensure you load all required CLDR files for the desired culture (in this case, arabic - ar). The files include data for calendar, timezone names, numbers, and currencies.
2. Global Culture Setting: The setCulture method is used to define the culture globally, ensuring consistent localization for all Syncfusion components in the application.
3. Localization Settings: If additional translations or UI text customizations are needed, you can use the L10n.load method to provide specific localization data.

 

Regards,

Priyanka K

Attachment: quickstart_77f386a4.zip