We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Change locale in customized editorTemplate

Hello!

I have a localized Scheduler to the Finnish language (locale="fi"). The Globalization/localization works fine in the main Scheduler, but when I open my custom editor template, the datetimepickers are still with the en-US values with AM/PM times and dates as MM/DD/YYYY. I have tried to set the localization to the datetimepicker but have not managed to get it working.

The input in my template (inside <ng-template #editorTemplate>) looks like this:
<input id="startTime" class="e-field" type="text" name="startTime" />

and in onPopupOpen() I have:
let startElement: HTMLInputElement = args.element.querySelector('#startTime') as HTMLInputElement;
      if (!startElement.classList.contains('e-datetimepicker')) {
        new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}

Also, the times that I choose in the calendar are 3 hours wrong: if I choose from the calendar a time 10AM-10.30AM, the values sent to the server are 7-7.30AM. Is this because the locale is wrong in the editor template? I have tried to set the timeZone: timezone="Europe/Helsinki", but it has no effect.

I hope you can help me.


6 Replies

AK Anna Koponen May 2, 2019 12:26 PM UTC

Hello again,

I have received a message that this is a bug in the program.

Do you have any suggestions for a workaround for the problem? I have tried adding parameters to the object in the object initializer (according to what the DateTimePicker has and what properties it inherits), but  I have not managed to get it working.

Also I have tried to load the localization separately for the datetimepicker:
L10n.load({
  fi: {
    datetimepicker: {
      placeholder: "Valitse",
      today: "tänään"
    }
  }
});

Something else I should try?


KK Karthigeyan Krishnamurthi Syncfusion Team May 3, 2019 06:31 AM UTC

Hi Anna, 
 
Greetings from Syncfusion. 
 
We could reproduce the reported issue “Date parsing not working in fi locale” and logged the below bug report. The fix will be included in our Volume 1, 2019 SP release which is expected to be rolled out by the mid of May, 2019. 
 
Your code example will change only the text to respective culture and workaround is not available for this issue. 
 
Regards, 
Karthi 



AK Anna Koponen May 8, 2019 01:21 PM UTC

Hello,

thank you for the information.

Might this error also be the cause to the calendar dropdown not working in the top left corner of the Scheduler? (see attached image)
The error in the console: ERROR TypeError: "date is null"

Will it also be fixed in this next release?

Anna

Attachment: CalendarError_20ff7bb8.zip


KK Karthigeyan Krishnamurthi Syncfusion Team May 9, 2019 03:20 AM UTC

Hi Anna,  
 
Thanks for the update. 
 
Yes, we believe it is related to the previous bug. We will check the case with the fix. 
 
Regards, 
Karthi 



AK Anna Koponen June 7, 2019 06:13 AM UTC

Hello again,

I tried again opening the datetimepicker and the calendar shows up in English (I hade previously hidden the calendar button so it could not be opened). Is there some parameters I need to send when I initialize the datetimepicker to make it show up in Finnish locale?

My code now:

let startElement: HTMLInputElement = args.element.querySelector('#startTime') as HTMLInputElement;

if (!startElement.classList.contains('e-datetimepicker')) {
        new DateTimePicker({
          value: new Date(startElement.value) || new Date(), timeFormat: 'HH:mm', format: 'd.M.yyy HH:mm', allowEdit: false, showClearButton: false }, startElement);
}

which patch should this be fixed in? I have now
"@syncfusion/ej2-angular-schedule": "^17.1.42",



KK Karthigeyan Krishnamurthi Syncfusion Team June 10, 2019 10:37 AM UTC

Hi Anna, 
 
Thanks for the update. 
 
Please use the below code example in the latest version 17.1.50 to achieve your requirement. 
 
let startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 
      if (!startElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ locale: 'fi', value: new Date(startElement.value) || new Date()}, startElement); 
      } 
      let endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement; 
      if (!endElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ locale: 'fi', value: new Date(endElement.value) || new Date() }, endElement); 
      } 
 
Regards, 
Karthi 
 


Loader.
Live Chat Icon For mobile
Up arrow icon