Get data format and calendar by locale

[Unknown]

Hello,

Is there a possibility to get calendar and display date by locale, without using extra files for localization and globalizations?

I am trying to get ejDatePicker calendar and display date by locale. I set ej-datepicker property locale to different locales like 'fr-FR', 'lt-LT' and etc., but result is not changing and I always see same date format and calendar:

[Sureshkumar P]

Hi,  

 

Thanks for contacting Syncfusion Support,  

 

We have checked with your requirement and we would like let you know that we cannot able to load the scripts files alone dynamically in component.ts . But we have prepared the solution with help of script tag dynamic loading and updated the date picker locale with its instance.  

 

Please refer the below code example  

 

@Component({ 

    selector: 'ej-app', 

    templateUrl: './home.component.html', 

}) 

export class HomeComponent { 

    public locale: string; 

    public dateObjest : any; 

    constructor() { 

        this.locale = "fr-FR"; 

        this.loadDynmicallyScript(this.locale); 

    } 

    public loadDynmicallyScript(locale: String) { 

        /* loading culture and culture text file*/ 

 

        var locale_script = document.createElement('script'); 

        locale_script.src = "../node_modules/syncfusion-ej-global-all/l10n/ej.localetexts." + locale + ".min.js"; 

        locale_script.async = false; 

        document.head.appendChild(locale_script); 

        var script = document.createElement('script'); 

        script.async = false; 

        script.src = "../node_modules/syncfusion-ej-global-all/i18n/ej.culture." + locale + ".min.js"; 

        document.head.appendChild(script); 

        script.onload = function () { 

            $(".e-datepicker").data("ejDatePicker").option("locale", locale); 

        } 

    } 

} 

 

Since the files are get load after component initialization we need to update the DatePicker locale with its instance.  

 

Query2:  the “lt-LT” culture : 

 

We have provided the locale text files for 28 cultures (specified in the GitHub location), since complexity in providing locale text for all 376 cultures. 

If you need Lithuanian (‘lt-LT), please create a locale text script file for ‘lt-LT’ with necessary components and include this file in your application to render the desired components with ‘lt-LT’ text. (You can make use of English (en-US) culture as reference for creating locale texts of other culture). 

 please include the required control’s locale text and make use of this file in your application. 

 

We have attached the sample here: http://www.syncfusion.com/downloads/support/forum/136241/ze/CultureWithoutFileLoading-762314262    

 

 

Please check with the solution and let us know if you need any assistance,  

 

Regards,  

Sureshkumar P 

[Unknown]

Hello,

the code is helpful, but still there are some problems.

I tried to use your code example, but when I call my datePicker for the first time, texts and date format are still like defaults. When I call it for the second time, then it show correct texts and date format. What I need to do to work when I call it for the first time?

First time:

Second time:

Also I tried to use like in example:https://help.syncfusion.com/js/datepicker/globalization

I added script to index.html and set locale in DatePicker component like in example, but in that case there were no changes and it seems that locale is not set.

[Sureshkumar P]

Dear Customer,  

   

Yes, we can reproduce your reported issue (“Culture does not work in initial time”). we suspect that you have missed to set the culture property while loading the initial time script rendering. Please refer to the attached code block.   

public loadDynmicallyScript(locale: String) { 

         

       /*removing the duplicate script rendering process*/ 

        if($("#localeScript").length > 0 || $("#cultureScript").length > 0) 

        { 

            $("#localeScript").remove(); 

            $("#cultureScript").remove(); 

        } 

 

        /* loading culture and culture text file*/ 

        var locale_script = document.createElement('script'); 

        locale_script.setAttribute("id","localeScript"); 

        locale_script.src = "../node_modules/syncfusion-ej-global-all/l10n/ej.localetexts." + locale + ".min.js"; 

        locale_script.async = false; 

        document.head.appendChild(locale_script); 

        var script = document.createElement('script'); 

        script.setAttribute("id","cultureScript"); 

        script.async = false; 

        script.src = "../node_modules/syncfusion-ej-global-all/i18n/ej.culture." + locale + ".min.js"; 

        document.head.appendChild(script); 

        script.onload = function () { 

            $(".e-datepicker").data("ejDatePicker").option("locale", locale); 

        } 

    } 

 

In this above code we have given the id property to the rendered scripts that was used to avoid the duplicate script rendering. Please replace your existing loadDynmicallyScript function with this code block. This will resolve your issue. 

 

Regards, 

Sureshkumar P