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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change locale in customized editorTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

144224 Apr 25,2019 11:50 AM UTC Jun 10,2019 10:37 AM UTC Angular - EJ 2 6
loading
Tags: Schedule
Anna Koponen
Asked On April 25, 2019 11:50 AM UTC

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.


Anna Koponen
Replied On 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?

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Anna Koponen
Replied On 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

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


Anna Koponen
Replied On 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",


Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon