Formatting date time for display

Ionic Framework ionic-v3
#1

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
#2

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
#3

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

#4

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

#5

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.

#6

Try

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

25 Likes
#7

Thanks spera, it worked for me.

#8

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

#9

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

#11

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
#12

Thanks so mush spera, it worked for me.

#13

Thank you spera, it worked for me too!

#14

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

#15

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

#16

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

1 Like
#17

thank you very much!

#18

@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.