angular datepicker and date format

Question

i have some trouble properly using date with angular5

i fetch data from a mocked api where date is generated like that : 24/07/2018 00:00:00 so there is no problem with resarch or anything manipulating those dates.

sample of the generation in api mock :

 for (int i = 1; i <= NUMBER_OF_POLICIES; i++)
            {
                Policy lPolicy = new Policy { Id = i, Name = string.Concat("Policy number ", i), Date = DateTime.Now.AddDays(i) };

                p.Add(lPolicy);
            }

problem comes when i update dates with angular material DatePicker component.

with the picker, date shows up like tis :

Mon Jul 30 2018 00:00:00 GMT+0200

so when i update the item, date is passed like this :

updated item: {"id":1,"name":"Policy number 1","date":"2018-07-29T22:00:00.000Z"}

any idea how to deal with locales ?

EDIT :

Here is the problem when i do some research :

how you want the date to be displayed ? what's the format you want ? — SlimenTN
– SlimenTN, Commented Jul 24, 2018 at 8:56
helle @SaurabhAgrawal, do you mean filters like {{ today | date }}? if so, it's okay for displaying the date, but not to manipulate it :/ for example, if i update the date to 31/07/2018, it will be corretly displayed in browser, but if i use the "search" bar looking 31/07/2018, i dont get the item. to get it i have to search for 30/07/2018 even if displayed at 31/07/2018 — j0w
– j0w, Commented Jul 24, 2018 at 8:57
you can inject the DatePipe into your component and use it to manipulate date as you want — SlimenTN
– SlimenTN, Commented Jul 24, 2018 at 8:59
i just edited my post so you can actually see the result : policy1 and 2 have been updated with DatePicker — j0w
– j0w, Commented Jul 24, 2018 at 9:06

Saurabh Agrawal · Accepted Answer · 2018-07-24 09:08:12Z

2

You can use DatePipe in the component itself, and format the date using pre-defined-format-options

Try this

import { DatePipe } from '@angular/common';

class Service {    
  constructor(private datePipe: DatePipe) {}    
  changeDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

Or you can format date like this as well

var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');

edited Jul 24, 2018 at 9:08

answered Jul 24, 2018 at 9:02

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

j0w Over a year ago

Mh, i've have an issue trying to inject the DatePipe in constructor. i get the following error :

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[DatePipe]:    StaticInjectorError(Platform: core)[DatePipe]:      NullInjectorError: No provider for DatePipe!

j0w Over a year ago

Nice, it seems to work ! thanks @Saurabh ! but it means that i have to manually pass the local into the pipe, right? like : const formatted = new DatePipe('en-EN').transform(p.date, 'yyyy-MM-dd'); so what about internationalization?

Saurabh Agrawal Over a year ago

@j0w try this doc angular.io/guide/i18n.. Hope it will help you.

j0w Over a year ago

i sure will! :) if you could just tell me if the answer i posted is also a viable solution, and why i should use one over the other, that would help me a lot! thanks for your time! :)

Saurabh Agrawal Over a year ago

Sure i will just give me sometime. I like the way dedicated you are.. Tomorrow I will answer you this one.

|

Vijayakumar Mural · Accepted Answer · 2018-07-24 09:05:11Z

1

use moment for date and time, which gives the necessary formats.

https://momentjs.com/

momentjs have different properties to get the time and date in necessary format.

newDate = this.Today

date = moment(this.newDate)

you can also pass necessary formats like

date = moment(this.newDate).format('DD/MM/YYYY')

answered Jul 24, 2018 at 9:05

Vijayakumar Mural

1141 silver badge6 bronze badges

Comments

j0w · Accepted Answer · 2018-07-24 12:36:26Z

0

 const offset = p.date.getTimezoneOffset();
 const test = p.date.setMinutes(p.date.getMinutes() - offset);

console.log(test) returns :

updated item: {"id":1,"name":"Policy number 1","date":"2018-07-31T00:00:00.000Z"}

it works too but, is that "clean"?

answered Jul 24, 2018 at 12:36

j0w

5554 gold badges14 silver badges32 bronze badges

Collectives™ on Stack Overflow

angular datepicker and date format

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related