1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Culture for DatePicker/DateTimePicker without AJAX,TypeScript

Culture for DatePicker/DateTimePicker without AJAX,TypeScript

Hello,

I use Syncfusion in conjunction with JavaScript ES5.
Now I would like to change my Datepicker as well as my DateTimePicker to German. I would like to achieve this without using TypeScript/ES6. It should not be achieved with AJAX or Node.js. 
It should be achieved simply with plain JavaScript (ES5). So in the end it should look like the example with german language:
 
https://ej2.syncfusion.com/javascript/documentation/datepicker/globalization/#globalization

I have tried to achieve this with the following instructions: 

https://ej2.syncfusion.com/javascript/documentation/common/localization/#localization 

,but unfortunately I have not been able to achieve this for the mentioned components.

Regards,
Adrien

7 Replies 1 reply marked as answer
VS Vignesh Srinivasan Syncfusion Team February 16, 2021 10:18 AM UTC

Hello Adrien,  
 
 Greetings from Syncfusion Support. 
 
 We have looked into your Query and came up with a sample to demonstrate your requirements, Kindly check the below code snippet and the attached sample. 
 
Index.Js    
ej.base.enableRipple(true); 
 
var L10n = ej.base.L10n; 
 
 L10n.load({ 
    'de': { 
        'datepicker': { placeholder: 'Wählen Sie ein Datum aus',today:'heute'}, 
        'daterangepicker': { 
         placeholder:'Wählen Sie einen Bereich aus', 
         startLabel: 'Wählen Sie Startdatum', 
         endLabel: 'Wählen Sie Enddatum', 
         applyText: 'Sich bewerben', 
         cancelText: 'Stornieren', 
         selectedDays: 'Ausgewählte Tage', 
         days: 'Tage', 
         stomRange: 'benutzerdefinierten Bereich', 
         startDate: 'Anfangsdatum', 
         endDate: 'Enddatum' 
        } 
    }}); 
 
loadCultureFiles(); 
 
    var datepicker = new ej.calendars.DatePicker({ 
        locale: 'de' 
    }); 
    datepicker.appendTo('#datepicker'); 
 
    var daterangepicker = new ej.calendars.DateRangePicker({ 
        locale: 'de' 
    }); 
    daterangepicker.appendTo('#daterangepicker'); 
 
    function loadCultureFiles() { 
        var files = [ 
            'https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/ca-gregorian.json', 
            'https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/ca-islamic.json', 
            'https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/currencies.json', 
            'https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/numbers.json', 
            'https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/timeZoneNames.json' 
        ]; 
 
        var loader = ej.base.loadCldr; 
        for (var prop = 0; prop < files.length; prop++) { 
            $.getJSON(files[prop], function(data) { 
                loader(data); 
            }); 
        } 
 
 
 
      
Index.Html 
<html> 
    <head> 
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> 
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> 
 
    <link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> 
      <style> 
            body{ 
                touch-action:none; 
            } 
        </style> 
    </head> 
    <body> 
        <div class="stackblitz-container material"> 
            <div class="col-lg-12 control-section"> 
                <div id="wrapper"> 
                    <input id="datepicker" type="text"><br><br> 
                </div> 
            </div> 
            <div class="col-lg-12 control-section"> 
                <div id="wrapper"> 
                    <input id="daterangepicker" type="text"><br><br> 
                </div> 
            </div> 
        </div> 
        <script src="./index.js" type="text/javascript"></script> 
    </body> 
</html> 
 
  
 
  
 
 
Please revert us if you have any queries in the above solution. 
  
Regards, 
 
Vignesh Srinivasan. 


AP Adrien Pech February 16, 2021 12:05 PM UTC

Hello,

thank you for the quick reply. But unfortunately the provided code doesn't work for me. On stackblitz I get the following error already during the initial loading of the components:



Now when I click on the icon to open the calendar (or to select the time) I get this error:



In addition, I would have a few more questions. Is it possible to provide the data also locally like:

"./resources/cldr-data/main/de/ca-gregorian.json",
    "./resources/cldr-data/main/de/ca-islamic.json",
    "./resources/cldr-data/main/de/currencies.json",
    "./resources/cldr-data/main/de/numbers.json",
    "./resources/cldr-data/main/de/timeZoneNames.json"

With the CRG I get all components shortened to their JavaScript (https://crg.syncfusion.com/?_ga=2.224312027.1954954008.1608276721-1053280073.1606824216 ),  so I don't have to load the complete library. Is there also a way to load only the JavaScript part for localization?

You can find the project I set up locally in the attachment.

Regards,
Adrien

Attachment: Syncfusion_Test_406721f9.zip

SP Sureshkumar P Syncfusion Team February 18, 2021 11:01 AM UTC

Hi Adrien, 
 
Thanks for your update, 
 
Based on your shared information with screen shot, an 'issue with CORS' occurs when the localization present in another server request with. In our sample we have provided the localization files with another server. We suggest you change the below code in your sample and enable cors plugin to your browser to resolve the issue from your end. 
 
Please find the code example: 
ej.base.enableRipple(true); 
 
var L10n = ej.base.L10n;  
  
 L10n.load({  
    'de': {  
        'datepicker': { placeholder: 'Wählen Sie ein Datum aus',today:'heute'},  
        'datetimepicker': { placeholder:'Wählen Sie ein Datum und eine Uhrzeit aus',today:'heute'}  
    }}); 
 
loadCultureFiles(); 
 
var datepicker = new ej.calendars.DatePicker({ 
  locale: "de" 
}); 
datepicker.appendTo("#datepicker"); 
 
var datetimepicker = new ej.calendars.DateTimePicker({ 
  locale: "de" 
}); 
datetimepicker.appendTo("#datetimepicker"); 
 
function loadCultureFiles() { 
  var files = [ 
    "https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/ca-gregorian.json", 
    "https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/ca-islamic.json", 
    "https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/currencies.json", 
    "https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/numbers.json", 
    "https://ej2.syncfusion.com/javascript/demos/src/common/cldr-data/main/de/timeZoneNames.json" 
  ]; 
 
  var loader = ej.base.loadCldr; 
  for (var prop = 0; prop < files.length; prop++) { 
    $.getJSON(files[prop], function(data) { 
      loader(data); 
    }); 
  } 
} 
 
 
 
We have modified your attached sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/162537/ze/Syncfusion_Test1627021475  
 
Also, we cannot get the localization json files into our CRG data, so we need to install cldr-data as mentioned in our documentation. 
 
Regards, 
Sureshkumar P 


AP Adrien Pech February 19, 2021 11:12 AM UTC

Hello,

I'm really sorry to ask again, but I just can't get the calendar to work. The translation of the calendar into German works now as I wished.
However, there are some problems... 

Problem 1:

When I deselect the DateTimePicker the following display appears:



Problem 2:

If I set the format as follows:

var datepicker = new ej.calendars.DatePicker({
  locale: "de",
  format: "yyyy/MM/dd"
});

var datetimepicker = new ej.calendars.DateTimePicker({
  locale: "de",
  format: "yyyy/MM/dd hh-mm"
});



some of the intermediate characters like "/" are not taken over and furthermore the time
after 12:00 (12:00 AM) is converted to PM. So the times are not displayed in the format (13:00,14:00...).

Problem 3:

When I try to set the date on initial load:

var datepicker = new ej.calendars.DatePicker({
  locale: "de",
  value: new Date(2020, 11, 17)
});

var datetimepicker = new ej.calendars.DateTimePicker({
  locale: "de",
  value: new Date(2020, 11, 17, 13, 24)
});

I can't interact with the DatePicker and the browser spits out the following error:



Furthermore I have a question if there is already an existing possibility to validate the textbox when entering it manually. This is to avoid incorrect entries regarding non-compliance with the set format and incorrect date entries such as February 30.

Thanks again for your help and time!

Regards,
Adrien

Attachment: SyncfusionDatePicker_5a5c404d.zip

SP Sureshkumar P Syncfusion Team February 24, 2021 12:30 PM UTC

Hello Adrien Pech, 

   Thanks for your update. 

   Based on the information shared we have found the following solutions. 


  Query 1: When I deselect the DateTimePicker the following display appears:  
  
   This is occurred because when the ‘CLDR’ files are loaded using the ‘getJSON’ or ‘requireJS’ methods the component is rendered before the files are loaded, due to this a invalid date format is applied to the component. We can overcome this by the following ways 

Solution 1:     Refreshing the component with a delay using the ‘setTimeOut’ method in the ‘created’ event.  

            var datetimepicker = new ej.calendars.DateTimePicker({ 
                locale: "de", 
                format: "dd'/'mm'/'yyyy HH:MM", 
                created: () => { 
                  setTimeout(function() { 
                    datetimepicker.refresh(); 
                    datetimepicker.value = new Date(2020, 11, 17, 13, 24); 
                  }, 500); 
                } 
              }); 
              datetimepicker.appendTo("#datetimepicker"); 




Solution 2: you can use ‘Ajax’ to load the CLDR data which will solve this issue. 

  
Query 2:  
  
       Part 1: intermediate characters like "/" are not taken over 

       In the German culture the default separators are ‘.’ (dots or periods), here the ‘/’ is localized by the library and are converted to ‘.’ . If you want to use the slash as the separator then you have to quote the eg: "dd'/'MM'/'yyyy". 

            var datepicker = new ej.calendars.DatePicker({ 
                locale: 'de', 
                format: "yyyy'/'MM'/'dd" 
            }); 
            datepicker.appendTo('#datepicker'); 



        Part 2: the times are not displayed in the format (13:00,14:00...) 
  
       In order to display the time in the 24hrs format you have to set the time format as ‘HH’ instead of ‘hh’ which is used for 12hrs format. For eg: "yyyy/MM/dd HH-MM" will display the time in 24hrs format. 

            var datetimepicker = new ej.calendars.DateTimePicker({ 
                locale: "de", 
                format: "yyyy'/'MM'/'dd HH-MM" 
              }); 
              datetimepicker.appendTo("#datetimepicker"); 



Query 3: When I try to set the date on initial load, I can't interact with the DatePicker and the browser spits out the error:  
  
      Again this is occurred because when the ‘CLDR’ files are loaded using the ‘getJSON’ or ‘requireJS’ methods the component is rendered before the files gets loaded. you can use ‘Ajax’ to load the CLDR data which will solve this issue. Or you can set the value in the ‘created’ event with a delay using the ‘setTimeOut’ method. Please refer the samples provided for ‘Query 1’. 

Query 4: if there is already an existing possibility to validate the textbox when entering it manually: 
  
       By enabling the ‘strictMode’ property we can validate the values entered manually. This allows the user to enter only valid date within the specified min/max range in the text box. For detailed information about strict mode please refer the below documentation. 

     

Regards, 
Sureshkumar P 


Marked as answer
AP Adrien Pech February 24, 2021 12:58 PM UTC

Hello,

thank you for this detailed explanation and your time! 
This has solved all my problems!

Regards,
Adrien

PO Prince Oliver Syncfusion Team February 25, 2021 05:11 AM UTC

Hi Adrien, 

Most Welcome. We are glad to assist you. 

Regards, 
Prince  


Loader.
Up arrow icon