1. Home
  2. Forum
  3. Vue
  4. Global Localisation has no effects

Global Localisation has no effects

Hi,

I tried to localise the date range picker in `TheSearchBar.vue` but it had no effects. I was wondering if you could point out anything wrong with Vue.js 3.

Besides, is there any way to apply it globally like in `App.vue`?

Regards,

Arvin


Attachment: Kobe_6eed045a.zip

9 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team December 20, 2021 06:47 PM UTC

Hi Arvin Staff, 
  
Greetings from Syncfusion support. 
  
In the shared sample you have assigned the culture for the Syncfusion component with help of setCulture() method but the required culture files were not loaded in the application. So, we suggest you to load the required culture files from the CLDR-data as mentioned in the below code example. 
  
loadCldr( 
    require('cldr-data/main/zh/numbers.json'), 
    require('cldr-data/main/zh/ca-gregorian.json'), 
    require('cldr-data/main/zh/timeZoneNames.json') 
); 
 
  
Also, the CLDR-data package does not have culture file in the name of “zh-CN”. Due to this, the applied localized text not set to the component. So, we suggest you to define the culture inside the L10n method as “zh” instead of “zh-CN” as mentioned in the below code example. 
  
L10n.load({ 
      "zh": { 
        daterangepicker: { 
          applyText: "确认", 
        }, 
      }, 
    }); 
setCulture("zh"); 
 
  
  
Still issue persists, please share the faced issue in the console which help us to check and provide prompt solution at our end. 
  
Regards, 
Berly B.C 


AS Arvin Staff replied to Berly Christopher December 21, 2021 10:38 PM UTC

Hi,

Thanks for your reply! However, I'm afraid that it still does not solve my problem according to the results from my end. I have applied all changes mentioned above for my Vue 3 Electron app.

Btw, can this way apply in the app script rather than in the script of a component to make it being applied globally?

Best regards,

Arvin


BC Berly Christopher Syncfusion Team December 22, 2021 09:30 AM UTC

Hi Arvin Staff, 
  
We can load the localized content globally in the App.vue file and it will be applied to the DateRangePicker component. So, we have prepared the sample and attached it below. 
  
  
Screenshot:  
  
 
  
Still issue persists, share any video demonstration that will help us to check and proceed further proceed further from our end.  
  
Regards, 
Berly B.C 


AS Arvin Staff replied to Berly Christopher December 22, 2021 10:18 AM UTC

Hi,

I still cannot make it work after modifying my app following the sample. In this way, I guess that the primary reason may be because the app is not a pure Vue.js 3 app but an Electron app using Vue.js 3. Maybe?

Btw, if I comment out `setCulture` in the component vue file and use the `locale` property of the DateRangePicker, it cannot show the dropdown part when I click the icon and prompt the following output in the browser console. I guess this may also be a reason?

Uncaught TypeError: Cannot convert undefined or null to object (calendar.js:313) at Function.keys (<anonymous>) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.getCultureValues (chunk-vendors.js:110063) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.createContentHeader (chunk-vendors.js:110099) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js.CalendarBase.createContent (chunk-vendors.js:110047) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/daterangepicker/daterangepicker.js.DateRangePicker.renderCalendar (chunk-vendors.js:117118) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/daterangepicker/daterangepicker.js.DateRangePicker.createCalendar (chunk-vendors.js:117235) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/daterangepicker/daterangepicker.js.DateRangePicker.createControl (chunk-vendors.js:117440) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/daterangepicker/daterangepicker.js.DateRangePicker.renderControl (chunk-vendors.js:115627) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/daterangepicker/daterangepicker.js.DateRangePicker.createPopup (chunk-vendors.js:115623) at Proxy.push../node_modules/@syncfusion/ej2-vue-calendars/node_modules/@syncfusion/ej2-calendars/src/daterangepicker/daterangepicker.js.DateRangePicker.show (chunk-vendors.js:118649)

Kind regards,

Arvin


Attachment: Kobe_8e2e36c2.zip

BC Berly Christopher Syncfusion Team December 23, 2021 12:25 PM UTC

Hi Arvin Staff, 
  
The reported issue caused due to CLDR-data files are not loaded in the application. So, we suggest you to ensure that the CLDR-data files are loaded properly in the application. 
  
Regards, 
Berly B.C 


AS Arvin Staff replied to Berly Christopher December 23, 2021 08:45 PM UTC

Hi Berly,

After further investigation, I can confirm AutoComplete can work as expected but DateRangePicker cannot. AutoComplete can be localised without `loadCldr`. The primary reason that DateRangePicker won't work is that I integrate Electron. It seems that `loadCldr` cannot work properly for Electron + Vue.js 3 because everything becomes what is expected when I uninstall packages relevant to Electron. It really makes me feel confused and I was wondering if you could help by taking a look at the sample attached.

Regards,

Arvin



Attachment: Kobe_e8dda2bb.zip


BC Berly Christopher Syncfusion Team December 27, 2021 03:55 PM UTC

Hi Arvin Staff, 
  
We would like to inform you that AutoComplete and DropDown components does not have globalization support and it have only localization support. The Calendar components such as Calendar, DatePicker, DateTimePicker  TimePicker and DateRangePicker components having globalization support since date values, header names will be rendered based on the CLDR-data of the corresponding culture. So, we need to load the culture files mandatory in the application before setting the culture in the application.  
  
  
Note: We could not run the shared sample in our end. So, please share any procedure to run the sample without any issues with us.  
  
 
  
Regards, 
Berly B.C 


AS Arvin Staff replied to Berly Christopher December 27, 2021 08:28 PM UTC

Hi Berly,

Thanks so much for your reply!

- Procedures to run the sample

As for the sample, you could navigate to the debug section of VS Code and launch in the predefined mode called "electron: debug" or "electron: dev" on Windows/macOS after installing all dependencies. As an alternative, you could also use the command `npm run electron:serve` under the root directory. Please note that the app is a demo for evaluating the feasibility of developing a Windows/macOS desktop app using Vue 3 and Electron. Hence, the app is not expected to be launched and work well via the browser. Instead, a desktop app should be error-free and launched with the dev mode which means you could invoke the browser developer tools using the keys Ctrl+Shift/option+I.

- Discussion

I understand the necessity of loading CLDR. My assumption is that the function loadCldr() cannot work well when the app is implemented using Vue 3 and Electron together (but it could work well when using purely Vue 3). The reasons leading to this assumption is that global localisation can work well when I uninstall all dependencies related to Electron and make some necessary changes to vue-router.

I would really appreciate it if you could provide further suggestions regarding this issue using Vue 3 and Electron with your amazing components.

Best regards,

Arvin


Attachment: Kobe_9d82124c.zip


BC Berly Christopher Syncfusion Team December 28, 2021 03:26 PM UTC

Hi Arvin, 
  
Thanks for sharing information to us. While running the shared sample, the DateRangePicker component get localized and globalized correctly based on the code given even though electron packages were installed in the application. Please find the screenshot below. 
  
Screenshot: 
  
 
 
So, please share the faced issue with video demonstration with us that will help us to check and provide further details from our end. Also, we suggest you to ensure that all prerequisites are installed correctly in the application. 
  
  
Regards, 
Berly B.C 


Marked as answer
Loader.
Up arrow icon