Datetime picker hour localization problem

[kenan dogan]

I use datetimepicker. https://ej2.syncfusion.com/angular/demos/#/material/datetimepicker/default

I click hour, format is AM and PM but I don't was this.

I want use Turkish format.

What should I do? And I want use everything component.

[Narayanasamy Panneer Selvam]

Hi kenan, 

 

Greetings from Syncfusion support. 

 

We have validated your query. We ca achieve your requirement by using locale or format property.  

Please find the code example is given below. 

  

[app.component.html] 

<h4>DateTimePicker with Turkish culture</h4> 

<ejs-datetimepicker [value]='date' locale='tr'></ejs-datetimepicker> 

  

<h4>DateTimePicker with Turkish DateFormat without using culture</h4> 

<ejs-datetimepicker [value]='date' [format]="format"></ejs-datetimepicker> 

  

[app.component.ts] 

import { Component } from '@angular/core'; 

import { loadCldr, L10n } from "@syncfusion/ej2-base"; 

  

declare var require: any; 

  

loadCldr( 

  require("cldr-data/main/tr/numbers.json"), 

  require("cldr-data/main/tr/ca-gregorian.json"), 

  require("cldr-data/supplemental/numberingSystems.json"), 

  require("cldr-data/main/tr/timeZoneNames.json") 

); 

  

@Component({ 

  selector: 'app-root', 

  templateUrl: './app.component.html', 

  styleUrls: ['./app.component.css'] 

}) 

export class AppComponent { 

  public date: Date = new Date("12/11/2017 1:00 AM"); 

  public format: string ="dd.MM.yyyy hh:mm"; 

  ngOnInit(): void { 

    /*loads the localization text*/ 

    L10n.load({ 

      'tr': { 

        'datetimepicker': { 

          placeholder: "Wählen Sie ein Datum und eine Uhrzeit aus", 

          today:"heute" 

        } 

      } 

    }); 

  } 

} 

For your convenience we have prepared a sample, Please find it from below link.

Sample Link: https://www.syncfusion.com/downloads/support/forum/147294/ze/syncfusion-angular-datetimepicker-172999332 

Demo link for format: https://ej2.syncfusion.com/angular/demos/#/material/datetimepicker/date-time-format 

UG Link for Globalization: https://ej2.syncfusion.com/angular/documentation/datetimepicker/globalization/ 

 

Please let us know if you need any further assistance on this. 

 

Regards,  

Narayanasamy P.  

[kenan dogan]

I have a problem.

ERROR TypeError: Cannot convert undefined or null to object

    at Function.keys ()

    at FormBase.getCultureValues (ej2-calendars.es2015.js:259)

    at FormBase.createContentHeader (ej2-calendars.es2015.js:291)

    at FormBase.createContent (ej2-calendars.es2015.js:243)

    at FormBase.createContent (ej2-calendars.es2015.js:1973)

    at FormBase.render (ej2-calendars.es2015.js:139)

    at FormBase.render (ej2-calendars.es2015.js:1882)

    at FormBase.disabledDates (ej2-calendars.es2015.js:4084)

    at FormBase.updateInput (ej2-calendars.es2015.js:2932)

    at FormBase.onPropertyChanged (ej2-calendars.es2015.js:11915)

setCulture is not working

/**

* @license

* Copyright Akveo. All Rights Reserved.

* Licensed under the MIT License. See License.txt in the project root for license information.

*/

import { Component, OnInit } from '@angular/core';

import { AnalyticsService } from './@core/utils/analytics.service';

import { I18nService } from './@core/data/i18n.service';

import { environment } from '../environments/environment';

import { L10n, loadCldr ,setCulture } from '@syncfusion/ej2-base';

declare var require: any;

loadCldr(

require("cldr-data/main/tr/numbers.json"),

require("cldr-data/main/tr/ca-gregorian.json"),

require("cldr-data/supplemental/numberingSystems.json"),

require("cldr-data/main/tr/timeZoneNames.json")

);

@Component({

selector: 'ngx-app',

template: '',

})

export class AppComponent implements OnInit {

constructor(private analytics: AnalyticsService, private i18nService: I18nService) {

}

ngOnInit(): void {

this.analytics.trackPageViews();

this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);

setCulture('tr');

}

}

[Ashokkumar Balasubramanian]

Hi kenan, 

 

The reported issue is reproduced only on CLDR-data files are not loaded in your application. So, please make sure that cldr-data files are properly installed in your application. Also, setCulture is working fine at our end. Please check the below attached sample. 

 

https://www.syncfusion.com/downloads/support/forum/147294/ze/syncfusion-angular-datetimepicker_setculture1706111968 

  

Please find the UG link for setCulture: 

 

https://ej2.syncfusion.com/angular/documentation/common/internationalization/?no-cache=1#changing-global-culture-and-currency-code 

 

Still facing an issue, please revert us with issue reproducing sample that will help us to check and provide the exact solution at our end.  

 

Regards, 

Ashokkumar B. 

[kenan dogan]

I use setCulture("tr"). I call defaultCulture property's value is change. DefaultCulture value is "tr". But does not show page on HTML. Backend value is change but UI are not changed.

I use in Child Component. So Should I do something extra? 

AppComponentPage.ts - Base

/**

* @license

* Copyright Akveo. All Rights Reserved.

* Licensed under the MIT License. See License.txt in the project root for license information.

*/

import { Component, OnInit } from '@angular/core';

import { AnalyticsService } from './@core/utils/analytics.service';

import { I18nService } from './@core/data/i18n.service';

import { environment } from '../environments/environment';

import { loadCldr, setCulture } from "@syncfusion/ej2-base";

declare var require: any;

loadCldr(

require("cldr-data/main/tr/numbers.json"),

require("cldr-data/main/tr/ca-gregorian.json"),

require("cldr-data/supplemental/numberingSystems.json"),

require("cldr-data/main/tr/timeZoneNames.json")

);

@Component({

selector: 'ngx-app',

template: '',

})

export class AppComponent implements OnInit {

constructor(private analytics: AnalyticsService,private i18nService: I18nService) {

}

ngOnInit(): void {

this.analytics.trackPageViews();

this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);

setCulture('tr');

}

}

ComponentPage.ts - Child

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

import { Query } from '@syncfusion/ej2-data';

import { EmitType, defaultCulture } from '@syncfusion/ej2-base';

import { Where } from '../../../models';

import { FilteringEventArgs } from '@syncfusion/ej2-dropdowns';

@Component({

selector: 'ngx-bank-acount-balance-query',

templateUrl: './bank-acount-balance-query.component.html',

styleUrls: ['./bank-acount-balance-query.component.scss']

})

export class BankAcountBalanceQueryComponent implements OnInit {

constructor() {

console.log(defaultCulture) // tr

}

}

bank-acount-balance-query.component.html- Child

<form>

<div class="form">

<div class="row">

<div class="form-group col-md-6">

<label translate="common.start-date">label>

<ejs-datetimepicker>ejs-datetimepicker>

div>

div>

div>

form>

Thank you for your help.

[Berly Christopher]

Hi kenan,

 

We have checked the reported scenario and would like to inform you that DefaultCulture will be updated on ngOnInit() method.

 

[ComponentPage.ts]
 

export class BankAcountBalanceQueryComponent implements OnInit

{

ngOnInit() {

    console.log(defaultCulture);

}

}

 

We have made a sample with child component and attached it below. If the issue persists, try to reproduce the issue in the attached sample or share the issue reproducing sample that will help us to check further at our end. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/147294/ze/Datetimepicker147343374 

 

Please find the video link for the above-attached sample. 

Video link: https://www.syncfusion.com/downloads/support/forum/147294/ze/DateTimePicker_setCulture-2035889201 

 

Regards,

Berly B.C

[kenan dogan]

Hi,

Please, Watch this, Link = My Google Video

[Ashokkumar Balasubramanian]

Hi Kenan 

 

While checking the provided video demonstration, we suspect that the reported issue may be caused due to CLDR-data not properly installed in your application. So, we suggest you check CLDR-data is properly installed in your application’s node_modules folder. If no, please run the below command to install the culture-specific packages.  

 

 npm install cldr-data --save 

 

Please find the below UG documentation link. 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/datetimepicker/globalization/?no-cache=1  

 

If it is properly installed in your application, please render our DateTimePicker component in the Home page (app.component.html) of your application and let us know a culture (“tr“) is properly loaded for DateTimePicker component. So that we can predict the issue raised in Home component or in the child component since the reported issue is not reproduced at our end while rendering the DateTimePicker component in Home and Chile page.  

 

We have prepared the sample as you demonstrated in the provided video and attached it below. Please check the below sample and try to reproduce the issue in it or provide the issue reproducing sample that will help us to check and provide the prompt solution at our end.  

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/147294/ze/syncfusion-datetimepicker-setculture-668461745 

  

Video Link: https://www.syncfusion.com/downloads/support/forum/147294/ze/setculture-1106558392  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[kenan dogan]

I try but cldr data not binding. Error Message 'Cannot convert undefined or null to object at Function.keys ()'. 

I install Cldr-data.

npm install cldr-data --save

But not binding.

I instaled load-cldr than error message: Cannot convert undefined or null to object

value is 10/3/2019 un3efine3

[Ashokkumar Balasubramanian]

Hi Kenan, 

 

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  

  

https://www.syncfusion.com/Account/Logon?ReturnUrl=/support/directtrac 

 

Regards, 

Ashokkumar B. 

[R C]

Hello, any update on this issue ?

I’m having the exact same problem.

[Sureshkumar P]

Hi Romain, 

 

Thanks for the update. 

 

We have tried to reproduce the reported issue based on the provided code example. Unfortunately, the reported issue is not occurred at our end.  

 

Also, we suspect that the reported issue was reproduced due to duplicate package installation in your application. So, please remove the duplicate package by referring the below documentation. 

 

Duplicate package removable comments: https://ej2.syncfusion.com/documentation/common/how-to/update-npm-package/  

 

Regards, 

Sureshkumar P. 

[R C]

Thanks for your answer. I did what you suggested but it didn’t solve the issue.

I created a sample project and I still reproduce the issue on this minimal project. Here’s what I did :

1) Created the angular project

ng new projectTest

npm install

2) installed syncfusion as described in your documentation :

npm install @syncfusion/ej2-angular-grids --save

3) installed the datepicker component:

npm install @syncfusion/ej2-angular-calendars --save

4) Installed the cldr-data package :

npm install cldr-data --save

And then I added all the code necessary for localization : setLocale, L10n.load(), etc.

I joined the sources from the project so you see if maybe there’s something I’m doing wrong ?

Attachment: testsyncfusion_41e3b3a6.zip

EDIT : actually I found what’s wrong eventually : I loaded the cldr files for the wrong language.... Now everything is working fine. Sorry and thanks for your help !

[Sureshkumar P]

Hi Romain, 

 

Thanks for your update. Please get back to us if you need further assistance on this 

 

Regards, 

Sureshkumar P