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 Add fsevents to NodeJS · Issue #7858 · nodejs/node · GitHub, 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.