1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. DateRangePicker Globalization

DateRangePicker Globalization

I've already seen your documentation (https://ej2.syncfusion.com/aspnetmvc/documentation/daterangepicker/globalization.html) and Globalization/Internationalization threads already created on this sub.forum, but we're not using npm on our project, can you provide a solution that doesn't involve npm usage?

Thanks in advance.

5 Replies
DL Deepa Loganathan Syncfusion Team September 10, 2018 11:41 AM UTC

Hi Matias,  
 
Thanks for contacting Syncfusion Support.  
 
If you are not to using npm to download the culture files in your application then you can download the culture related JSON files directly from the below link and refer to them in your application.  
  
  
Also, we have imported a minimum number of culture files (“ar”, “zh”,” en”,”de”) in the build installed location, which can be used to localize the component to any of the above-mentioned cultures.     
  
Culture File Location: InstalledLocation/ASP.NET MVC - EJ2/<version>/Scripts/cldr-data/   
  
Regards,  
 
Deepa L.  


MP Matias Puzanowski September 10, 2018 01:57 PM UTC

Thanks for your reply.

applying certain changes to the solution you provided, it's now working, but it's weird that the only string that doesn't get localized is 'customRange'. I'm using this:

ej.base.L10n.load({
'es': {
'daterangepicker': {
applyText: 'Aplicar',
cancelText: 'Cancelar',
customRange: 'Rango personalizado',
days: 'dias',
endLabel: 'Fecha fin',
placeholder: 'Seleccione rango...',
selectedDays: 'Dias seleccionados',
startLabel: 'Fecha inicial',
resize: 'Redimensionar'
}
}
});



I post below the changes I did just in case it's useful for someone else:

Culture File Location: InstalledLocation/ASP.NET MVC - EJ2/<version>/Scripts/cldr-data/   --> I installed Syncfusion via NuGet and this folder doesn't exists, but anyways I downloaded desired 'ca-gregorian.json', 'numbers.json', 'timeZoneNames.json' to '../Scripts/cldr-data/es/'. 

In Chrome, now it's working, but I get this warning from your ej.base.Ajax call:



So I replaced this code:
 var val, ajax;
            ajax = new ej.base.Ajax(location.origin + location.pathname + '/../node_modules/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            ajax.onSuccess = function (value) {
                val = value;
            };
            ajax.send();
            loader(JSON.parse(val));
With this (using jQuery):

      function loadCultureFiles(name) {
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            var path = '../Scripts/cldr-data/' + name + '/' + files[prop];

            $.getJSON(path).done(function(response) {
                loader(response);
            });
        };
        for (var prop = 0; prop < files.length; prop++) {
            loadCulture(prop);
        }
    }
And now it works like a charm, I would only need to translate that 'Custom Range' string.

DL Deepa Loganathan Syncfusion Team September 11, 2018 12:40 PM UTC

Hi Matias, 

Sorry for the inconvenience. 

We were able to reproduce the reported issue “localization for CustomRange is not working” at our end. 

We have fixed this issue internally and the fix for this issue will be included in our Volume 3 2018 beta release which is expected to be rolled out by this week. Until then, kindly make use of the workaround solution to overcome this issue as shown in the below code snippet. 

<script> 
    document.addEventListener('DOMContentLoaded', function () { 
        daterangepickerObj = document.getElementById('daterangepicker').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
        ej.base.L10n.load({ 
            'es': { 
                'daterangepicker': { 
                    applyText: 'Aplicar', 
                    cancelText: 'Cancelar', 
                    customRange: 'Rango personalizado', 
                    days: 'dias', 
                    endLabel: 'Fecha fin', 
                    placeholder: 'Seleccione rango...', 
                    selectedDays: 'Dias seleccionados', 
                    startLabel: 'Fecha inicial', 
                    resize: 'Redimensionar' 
                } 
            } 
        }); 
        loadCultureFiles('es'); 
        daterangepickerObj.locale = 'es'; 
        daterangepickerObj.presetsItem = []; 
        daterangepickerObj.refresh();// refreshing the component 
         
    }); 
</script> 

For your convenience, we have attached the sample with the workaround solution in the below link.  


Once our Volume 3 Beta release has been rolled out and CDN links have been refreshed, please make use of the updated script from the below CDN link to resolve this issue at your end without workaround. 


Please let us know if you need any further assistance. 

Regards, 

Prem Kumar M 



MP Matias Puzanowski September 11, 2018 08:34 PM UTC

Thanks a lot, now it's working perfectly with the workaround you provided, including 'Custom Range' option. I'm glad to know that it will be permanently fixed in a future release.

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team September 13, 2018 09:07 AM UTC

Hi Matias, 

Sorry for the delayed response. 

We are glad that the reported issue was resolved with the workaround. As, we mentioned in our previous update the fix for this issue has been included in our Volume 3 2018 beta release. Please, make use of the below CDN link which contains the updated scripts to resolve the reported issue. 

CDN: https://cdn.syncfusion.com/ej2/dist/ej2.min.js 

Regards, 

Shameer Ali Baig S. 


Loader.
Up arrow icon