Angular Date Pipe Not Working Correctly in Textbox

Question

My Date Pipe is not working in Angular. I only want to show as this format MM/dd/yyyy'. How can it be fixed?

Typescript:

this.testDate = new Date(this.singleUser.createDate);
console.log(this.testDate); 

this.userForm = new FormGroup({
  userName: new FormControl(this.singleUser.userName),
  email: new FormControl(this.singleUser.email),
  createDate: new FormControl(this.singleUser.createDate)
});

Console Log: Wed Jul 22 2020 17:18:24 GMT-0700 (Pacific Daylight Time)

HTML:

<mat-form-field class="row" appearance="outline" floatLabel="always">
    <mat-label>Created Date</mat-label>
    <input matInput [readonly]="true" formControlName="createDate" [value] = "testDate | date: 'MM/dd/yyyy'" >
</mat-form-field>

Date is not showing as MM/dd/yyyy and has additional datetime hours seconds, etc

See also this post: https://stackoverflow.com/questions/49522542/how-to-use-pipes-in-angular-5-reactive-form-input — DeborahK, Dec 22 '20 at 19:26

score 2 · Answer 1 · edited Dec 22 '20 at 19:54

2

I read Ashot Aleqsanyan's answer which I think is right on the money, I didn't notice before that you set the value both in the formControl and the input itself, which does seem quite wrong.

you can try with his solution or also try to inject the date pipe directly into your component and use it like this:

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

@Component({
   providers: [DatePipe]   // you need to provide datepipe in providers list for your component
})
class YourComponent implements OnInit {

  constructor(private datePipe: DatePipe) {}

  ngOnInit(){
       // you don't want the testDate field
       // this.testDate = new Date(this.singleUser.createDate);

       const createDate = this.datePipe.transform(this.singleUser.createDate, 'yyyy-MM-dd');
       console.log(createDate); 

       this.userForm = new FormGroup({
         userName: new FormControl(this.singleUser.userName),
         email: new FormControl(this.singleUser.email),
         createDate: new FormControl(createDate)
});
  }
}

(I assumed that you do your initialization in the OnInit, anyway you can move the code around the component as you please of course)

I think this should work nicely :)

edited Dec 22 '20 at 19:54

Ashot Aleqsanyan

4,252
1
15
27

answered Dec 22 '20 at 19:20

Dario Piotrowicz

951
1
6
14

can you provide working code for solution? thanks – earlwaltonluv3462 Dec 22 '20 at 19:20
actually I have been playing around with it and I was wrong as the initial setting actually works fine, I have tried with a standard input and that is ok, sorry for my incorrect answer, I am amending it right now – Dario Piotrowicz Dec 22 '20 at 19:43
Again I stand on the idea that injecting the pipe in this case would make for a nicer/cleaner code, so I just expended on what Ashot said and provided a new solution using what I was previously saying, again sorry for the previous wrong answer :P – Dario Piotrowicz Dec 22 '20 at 19:49
Ashot thanks for your input :) , yeah you can provide the pipe in the component and you were right by adding it there, I forgot because I usually provide services in the app's modules instead of the component themselves. In the pipe's case I guess it does not make much difference (but I would love to know if you know of a reason for which it is better to provide the pipe here instead of doing so in the app module :) ) – Dario Piotrowicz Dec 22 '20 at 19:59
Just I remember the error which I got when I use the Datapipe in the component :)). Usually, I don't provide the pipes into the module providers list. I am providing only for the current component, where I need it. If you are asking about the different instances, yes I know about that – Ashot Aleqsanyan Dec 22 '20 at 20:05
Yeah I was just asking your opinion since as you mentioned those implement different type of injection (/instances). I was just wondering if providing the pipe in the component is more clean for some reason, like for scoping it more or for performances or similar stuff, but I guess it can't make too much of a difference either way :) – Dario Piotrowicz Dec 22 '20 at 20:11
@DarioPiotrowicz about the performance, yeah I think so. But I think it should depend on the project architecture strategies, where you should inject it. – Ashot Aleqsanyan Dec 22 '20 at 20:14
yeah, awesome discussion, thanks for your input :) – Dario Piotrowicz Dec 22 '20 at 22:02
no problem, I'm just frustrated that missed the mark with my first answer lol :P – Dario Piotrowicz Dec 23 '20 at 11:46

Ashot Aleqsanyan · Accepted Answer · 2020-12-22T19:31:32.577

Look, you can't use value and formControlName at the same time. Also it shows your form control value instead of value by value attribute.

You need do add some workaround for that. Like this

<mat-form-field class="row" appearance="outline" floatLabel="always">
    <mat-label>Created Date</mat-label>
    <input matInput [readonly]="true" (change)="funcFromTs($event.target.value)" [value] = "testDate | date: 'MM/dd/yyyy'" >
</mat-form-field>

Ts

funcFromTs(value: string) {
   this.userForm.get('createDate').patchValue(value);
}

Angular Date Pipe Not Working Correctly in Textbox

2 Answers2

Linked