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

Datetime picker hour localization problem

Thread ID:

Created:

Updated:

Platform:

Replies:

147294 Sep 5,2019 11:45 AM UTC Aug 31,2020 12:37 PM UTC Angular - EJ 2 13
loading
Tags: DateTimePicker
kenan dogan
Asked On September 5, 2019 11:47 AM UTC

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 [Syncfusion]
Replied On September 6, 2019 10:46 AM UTC

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" 
        } 
      } 
    }); 
  } 
} 
Please let us know if you need any further assistance on this. 
 

Regards, 
 
Narayanasamy P.  


kenan dogan
Replied On September 7, 2019 05:34 PM UTC

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 [Syncfusion]
Replied On September 9, 2019 12:41 PM UTC

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. 
 
  
Please find the UG link for setCulture: 
 
 
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
Replied On September 9, 2019 01:31 PM UTC

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 [Syncfusion]
Replied On September 10, 2019 05:03 PM UTC

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. 



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



 
Regards,
Berly B.C


kenan dogan
Replied On September 12, 2019 01:48 PM UTC

Hi,

Please, Watch this, Link = My Google Video



Ashokkumar Balasubramanian [Syncfusion]
Replied On September 12, 2019 05:10 PM UTC

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. 
 
 
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.  
 
  
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


kenan dogan
Replied On October 3, 2019 10:14 AM UTC

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 [Syncfusion]
Replied On October 3, 2019 11:40 AM UTC

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.  
  
 
Regards, 
Ashokkumar B. 


R C
Replied On August 24, 2020 11:00 AM UTC

Hello, any update on this issue ?

I’m having the exact same problem.

Sureshkumar P [Syncfusion]
Replied On August 25, 2020 05:40 PM UTC

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. 
 
 
Regards, 
Sureshkumar P. 


R C
Replied On August 28, 2020 02:55 PM UTC

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 ?








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 [Syncfusion]
Replied On August 31, 2020 12:37 PM UTC

Hi Romain, 
 
 
Regards, 
Sureshkumar P 


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