How to set the date in angular reactive forms using patchValue

Question

I'm trying to set the value of the datepicker control with time. Not able to accomplish

Tried converting to desired format

app.component.html:

<input id="requestdate" type="date" class="form-control" formControlName="requestdate" 

app.component.ts:

ngOnInit() {

this.loginForm = this.formBuilder.group({ 
                    requestdate : ['']
                  })

let date = new Date()
date = date.toLocaleDateString().substring(0,10)

this.loginForm.get('requestdate').patchValue(date)


}

Not able to see the transformed date

Salomon

Are you using any libraries for the input? – Major

No, not using any libraries. Default html input of type date – Salomon

Answer 1

You seem to have used the wrong syntax while reassigning the date variable. Since it was initialized as a Date, it won't accept a string in the format that you're supplying it in. You'll have to use the YYYY-MM-DD format.

Try this:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loginForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      requestdate: ['']
    })
    this.loginForm.get('requestdate').patchValue(this.formatDate(new Date()));
  }

  private formatDate(date) {
    const d = new Date(date);
    let month = '' + (d.getMonth() + 1);
    let day = '' + d.getDate();
    const year = d.getFullYear();
    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    return [year, month, day].join('-');
  }
}

Don't forget to wrap the input field around a form tag with formGroup attribute set to loginForm:

<form [formGroup]="loginForm">
  <input
    id="requestdate" 
    type="date" 
    class="form-control" 
    formControlName="requestdate" />
</form>

---

Here's a Working Sample StackBlitz for your ref.

Autophyte

Answer 2

For the date transformation to yyyy-MM-dd you could also use the .toJSON() method:

private formatDate(date) {
    let newDate = new Date(date);
    return newDate.toJSON().split('T')[0];
}

Latty

Answer 3

It will work but not perfectly, there is always 1 day less. FOr 

    private formatDate(date) {
        let newDate = new Date(date);
        return newDate.toJSON().split('T')[0];
    }

But it works perfectly with   

    private formatDate(date) {
        const d = new Date(date);
        let month = '' + (d.getMonth() + 1);
        let day = '' + d.getDate();
        const year = d.getFullYear();
        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;
        return [ye
ar, month, day].join('-');
      }

Rocray

You may want to edit the formatting on your response, all of it is contained within a code block and that throws off the formatting. Your instructions (non-code) should just be plain text outside of a code block – Leviathan