0

I am using material date picker for my date picker. I am trying to enter the date manually

With my current scenario where I was able to enter number 1 The date is taking as 01-JAN-2021

If I Enter the number 2 The date is considering as 01-FEB-2021 when I analyzed the code In value property I am using getData method so when I am changing the date the rest of the value it is taking from getData method

Here is my HTML code

<mat-form-field>
    <input [disabled]="!enableEdit" (dateChange)="setChange(item2.dataName,'fpInDate')"
        matInput [matDatepicker]="i" placeholder="Choose a date"
        [value]="getData(item2.fpInDate)" name="{{i}}--{{n}}"
        [(ngModel)]="item2.fpInDate">
    <button mat-button *ngIf="item2.fpInDate" matSuffix mat-icon-button aria-label="Clear"
        (click)="item2.fpInDate=''">
        <mat-icon>close</mat-icon>
    </button>
    <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
    <mat-datepicker #i></mat-datepicker>
</mat-form-field>

Get Data Method:

getData(dates: any) {
   return new Date(dates);
}

SetChange method:

setChange(dataName, dateType) {
   this.dataChanged = true;
   this.designData.push({ 
       DataName: dataName, 
       dateType: dateType, 
       countryCode: this.dialogData.pageValue.countryCode
   });
}

I am totally stuck here please guide me what I am doing wrong here.

If I remove ngmodel from the code I was able to see the date and edit the date but the problem is it is not updating in the Table.

team I am stucked here not able to get the answer please guide me

Mr.M
  • 1,472
  • 3
  • 29
  • 76

1 Answers1

0

Exemple I use with success if it can help ? I'm surprise you use [value] and [(ngModel)] at the same time !

<mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                <mat-label>{{'GuLabel.dateLivraisonEstime' | translate}}</mat-label>
                                <input matInput 
                                [disabled]="!document.editable"
                                [matDatepicker]="pickerLivraison"
                                (input)="expedition.dateLivraison= $event.target.value;documentForm.markAsDirty()"
                                [value]="expedition.dateLivraison"
                                (dateChange)="expedition.dateLivraison = $event.value;documentForm.markAsDirty()"
                                >
                                <mat-datepicker-toggle matSuffix [for]="pickerLivraison"></mat-datepicker-toggle>
                                <mat-datepicker #pickerLivraison></mat-datepicker>
                               
</mat-form-field>
nseaprotector
  • 61
  • 5