Translate the time period (AM, PM) in ion-datetime

Hey everyone,

Is it possible to translate the time period (AM, PM) from ion-datetime? I have successfully translated the other text (cancelText, dayNames etc), but there is no reference for the time period in the documentation. See here: input properties.

Any ideas?

You can not.

You can use Moment.js but only for “Parse, validate, manipulate, and display dates in JavaScript” you can not pass it in the ion-datetime.

The datetime picker provides the simplicity of selecting an exact format, and persists the datetime values as a string using the standardized ISO 8601 datetime format. However, it’s important to note that ion-datetime does not attempt to solve all situtations when validating and manipulating datetime values.

and in the ISO 8601 datetime format (am/pm NOT allowed)

Hi, @leon

Try this:

Template file:

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="hh:mm A" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

<button ion-button (click)="click(myDate)">Click</button>

Component file:

myDate:any;

click(date){
  	console.log('click..',date);
  	let hoursMinutes = date.split(':');
  	let time = this.formatAMPM(hoursMinutes);
  	console.log('time',time);
}

formatAMPM(date) {
	  var hours = date[0];
	  var minutes = date[1];
	  var ampm = hours >= 12 ? 'pm' : 'am';
	  hours = hours % 12;
	  hours = hours ? hours : 12;
	  minutes = minutes < 10 ? '0'+minutes : minutes;
	  var strTime = hours + ':' + minutes + ' ' + ampm;
	  return strTime;
}

Thank you

This does not change the display text of the component nor the text in the spinner.

hi @leon4
try use this library


if you want to change the display format you should use native date picker

and bind show date picker when use click to component than change the form with timeago and display the result on component

I used your code in my application but it doesn’t display AM/PM why so? Please see screenshot: https://imgur.com/a/UgnYV8V

I am using ionic version 3, angular version 5, ionic CLI version 4

Date handling is one of those things that seems really simple, so everybody tends to just roll their own. It isn’t simple at all, and there’s not much point in bothering with figuring out which edge cases some rando on the internet forgot to test. Just use date-fns.