CODEWITHSUNDEEP
angularangular7bootstrap-datepicker
Shivaay
Shivaay

Reputation: 429

How to set the date in angular reactive forms using patchValue

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

Upvotes: 9

Views: 19581

Answers (3)

Zolar2000
Zolar2000

Reputation: 1

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('-');
      }

Upvotes: 0

Wendox
Wendox

Reputation: 1

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];
}

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 16

Related Questions