0

I think this question has bean asked many time before. I have implemented DatePipe in my angular project, formating is correct only it shows the current Date and this is not what i want and is not the date that i receive from my rest services. I get from the REST service (createdOn) a date that is in the past. This is my code:

TS

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

export class PostComponent implements OnInit {
post: Postpayload;
newDateFormat: string;
constructor(private router: ActivatedRoute,
          private postService: PostService, public datepipe: DatePipe) {
            this.post = {
              createdOn: new Date()
            };
            this.newDateFormat = this.datepipe.transform(this.post.createdOn, 'dd-MM-yyyy');
         }
 }

PostPayload

export class Postpayload {
id: number;
content: string;
title: string;
username: string;
createdOn: Date;

}

ngOnInit(): void {
this.router.params.subscribe( params => {
  this.permaLink = params.id;
});
  this.postService.getPost(this.permaLink).subscribe( (  data:Postpayload) 
  => {
  this.post = data;
   }, (err: any) => {
    console.log(err);
    console.log('failure response');
   });
  }

HTML

<p>{{ newDateFormat }}</p>

This results me a current date or todays date, my question is how do i format the date of this.post.createdOn that i receive from my rest Api service call. When i am not using DatePipe then it shows correct date but i dont want this default full style date format.

PostService

getPost(permaLink: number): Observable<Postpayload> {
return this.http.get<Postpayload>(this.url + 'get/' + permaLink);
}
user9302067
  • 1
  • 5

3 Answers3

1

I realize you're doing the date pipe in the class, but are you able to move it to your dom?

<p>{{ newDateFormat | date:"dd-MM-yyyy" }}</p>
Mathew Berg
  • 28,625
  • 11
  • 69
  • 90
  • no diffrentses even if use pipe inside html i wil still the current date , todays date. that becouse of calling the new Date. So the question is actualy how can i properly instantiat fiel createdOn from PostPayload in calling method, without new Date(). – user9302067 Apr 03 '21 at 12:43
0

You are not using the date from your service, but you are instantiating new Date instance. What you are doing here is exactly what is expected from new Date() - to set the current date. Actually to get your data from Service, you should show us how your postService is implemented. So the call could be something like this, assuming getPost from service is returning Observable:

         postService.getPost().subscribe( (postPayload) => {
                this.post = {
                   createdOn: postPayload.createdOn
                };
                this.newDateFormat =this.datepipe.transform(this.post.createdOn, 'dd-MM-yyyy');
          }
smithnblack
  • 505
  • 7
  • 17
  • PostService 'getPost(permaLink: number): Observable { return this.http.get(this.url + 'get/' + permaLink); }' once again i dont have problems with retreving my correct from the post service for the date. if i dont use DatePipe it shows me the correct date. – user9302067 Apr 03 '21 at 11:54
  • but as I said, you are not consuming your post service and `getPost` at all. Not in the code that you showed in your post. – smithnblack Apr 03 '21 at 15:37
  • i am consuming getPost, i have edit my post and added the concuming part of the code now you have full code. but this code is not necessary to show because it obvious. Like i sayt it works without DatePipe. – user9302067 Apr 03 '21 at 21:56
0

So i have solved my problem , for those who are still interested.

I decided to use DatePipe straight in HTML.

{{ post.createdOn | date:'mediumDate'}}

in component.ts i don't instantiate createdOn at all with new Date(). I also changed createdOn in Postpayload to type any.

On the backend of my web application i have improved json by adding @JsonFormat(pattern="MM-dd-yyyy") on field createdOn, if i don't use JsonFormat the DatePipe will not be able to format correctly.

user9302067
  • 1
  • 5