Change locale in customized editorTemplate

[Anna Koponen]

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]

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]

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. 

https://www.syncfusion.com/feedback/6085/date-parsing-not-working-in-finnish-culture 

 

Your code example will change only the text to respective culture and workaround is not available for this issue. 

 

Regards, 

Karthi 

[Anna Koponen]

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]

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]

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]

Hi Anna, 

 

Thanks for the update. 

 

Please use the below code example in the latest version 17.1.50 to achieve your requirement. 

https://stackblitz.com/edit/angular-8lnckr-dnvyta?file=app.component.ts 

 

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