CODEWITHSUNDEEP
angulartypescriptangular-materialmat-datepicker
user10114552
user10114552

Reputation:

How can I display the saved date in the input field with GET in mat-datepicker?

I have developed a mat-datepicker. I can select a date and save it in the back-end. How do I display the saved date in the input field?

My code:

// HTML
 <mat-form-field appearance="fill">
   <mat-label>Datum</mat-label>
      <label>
        <input matInput [matDatepicker]="picker" formControlName="financial_year_start" required>
       </label>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
          <mat-error *ngIf="settingsContentForm.get('financial_year_start').hasError('required')">Input is required!</mat-error>
 </mat-form-field>

// TS
dateForm: FormGroup;
 ngOnInit() {
 this.dateForm = this.formBuilder.group({
      financial_year_start: [null, Validators.required],
    });
}


// My JSON
{
    "success": true,
    "mandant": {
        "mandantId": 1,
        "firm": "Test Ltd.",
        "financial_year_start": "Juli 1, 2018" // I want to display this value in the input, but in the format DD-MM-YYYY
    }
}


// My service for GET Date
public getCurrentMandantData(): Observable<any> {
    const url = `/current-mandant`;
    return this.http.get<any>(`${environment.baseUrl}` + url);
  }

Upvotes: 1

Views: 793

Answers (1)

Agung Sudrajat
Agung Sudrajat

Reputation: 328

There are several steps to do this:

  1. in component.ts file You should have a variable that hold date value:

    myDate = new Date();

it initialized date with current date. We can change the value later. 2. If you play with observable, then want to assign the value to the date, add toDate() method:

this.myDate = this.dateFromObservable.toDate();

  1. Attach it to template file (html) with [startAt] binding:

    <mat-datepicker [startAt]="myDate">

Upvotes: 0

Related Questions