Formatting date time for display

I have a date time object with this format “2019-07-31T08:30:00+08:00” and I need to display this in my cards as DD MMM YYYY HH:mm.

When I checked the documents I found
<ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="event.StartDate"></ion-datetime>

but looks like this is not a way to display but its for input/widget.

Any idea how to display the date?

if I use {{datefield | date:‘medium’}} as per angular 2 pipes, I am getting an error

Invalid argument ‘2019-09-11T08:30:00+08:00’ for pipe ‘DatePipe’

3 Likes

To display dates in various formats I’ve used momentjs (http://momentjs.com/) plus directives and filters in an angular1 application in the past. For angular2 there are also pipes for momentjs: https://github.com/urish/angular2-moment .

Here’s an example for your usecase: http://plnkr.co/edit/cMNpcs?p=preview

1 Like

I tried to install but it is giving me the error below,

C:\myapps\ionic2-tests\mmsapp>npm install --save angular2-moment
mmsapp@ C:\myapps\ionic2-tests\mmsapp
+-- UNMET PEER DEPENDENCY @angular/core@2.0.0-rc.1
`-- angular2-moment@1.0.0-beta.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
npm WARN angular2-moment@1.0.0-beta.1 requires a peer of @angular/core@^2.0.0-rc.5 but none was installed.
npm WARN mmsapp@ No repository field.
npm WARN mmsapp@ No license field.

This is my ionic version
C:\myapps\ionic2-tests\mmsapp>ionic -v
2.0.0-beta.25

I’m sorry I can’t help you with that, but logging gives you some clue what is happening:

Seems to be a known issue on windows according to https://github.com/nodejs/node/issues/7858, might work if on previous version of nodejs < 6

I had to check which version of angular2-moment supports angular rc1, so I installed version 0.8.0 rather than 1.0.

Thanks a lot.

Try

{{movie.start | date: ‘H:mm’ }} ----. 09:00
{{movie.start | date: ‘dd/MM/yyyy H:mm’ }} ------- 28/05/2015 09:00

25 Likes

Thanks spera, it worked for me.

Can also refer here: https://docs.angularjs.org/api/ng/filter/date
can also display day name, what week it is, etc.

Not if you’re using Ionic 2, you can’t. That’s Angular 1.

Documentation for Angular2 version of this pipe filter can be found here: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Basically the same as far as I can tell, just with different placeholders used in the filter template for each date component.

1 Like

Thanks so mush spera, it worked for me.

Thank you spera, it worked for me too!

For Android it’s working Properly but for ios @spera it’s not working. Please give me any solution.

Thanks, it work for me…you saved my lot of hours…

Perfect, cn you also give a reference where can i check more options of the formats?

1 Like

thank you very much!

@shamsuljewel https://angular.io/api/common/DatePipe
I know it’s one year’s ago question but i am answering here just in case anyone are here looking for it.

Actually I have the problem of timezone, my time are all 8 hours ahead.