CODEWITHSUNDEEP
angular
Abhijit Chakra
Abhijit Chakra

Reputation: 3236

How to get the values from date picker in Angular4?

I am new to Angular. I am using Angular4 material date pickers, below is my code for date picker

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

My question is how to get the value of the date picker when I am choosing a date from date picker in my Component?

Upvotes: 0

Views: 4657

Answers (1)

Ali Turab Abbasi
Ali Turab Abbasi

Reputation: 1133

You could use a reactive form. First set up formBuilder Like this

constructor(  private fb: FormBuilder) {}

Now generate FormControls

public generateFormContorls() {
    this.myForm = this.fb.group({
      due_date: ['']
    });

Now you need to set formControlName=""due_date". like this 

  <md-input-container>
            <input mdInput [mdDatepicker]="dueDate" formControlName="due_date" (click)="dueDate.open()"
              (focus)="dueDate.open()">
            <button mdSuffix [mdDatepickerToggle]="picker"></button>
          </md-input-container>
          <md-datepicker #dueDate></md-datepicker>

Now get the value by simply using this.

console.log(" value:",this.myForm.get("due_date").value);

Upvotes: 2

Related Questions