Angular Date Range Picker not able to implement

Question

I'm trying to create a date range picker in Angular 7 with the help of angular material. But whenever I click on the calendar, the value is not updated on the input field. I'm sharing my code below.

As, you can see from the code below, I have written a click function on the second input field. On clicking it opens up two calendars, one for start date, other for end date. But, whenever, I try to click on any date, it saves only today's date. Can anyone help me to resolve this issue.

input-overview-example.html

<mat-form-field>
    <input matInput [matDatepicker]="strtpicker" [value]="date.value" placeholder="Start Date" >
</mat-form-field>

<mat-form-field class="ml-20">
  <input matInput [matDatepicker]="endpicker" [value]="date.value"  placeholder="Choose a date" (click)="dateRange()">
</mat-form-field>

<div class="d-flex" *ngIf="show">
    <mat-card >
      <p>Start Date</p>
      <mat-calendar ></mat-calendar>
    </mat-card>
   <mat-card>
     <p>End Date</p>
      <mat-calendar></mat-calendar>
    </mat-card>
</div>

input-overview-example.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';



/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
   events: string[] = [];
     addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.events.push(`${type}: ${event.value}`);
  }

  date = new FormControl(new Date());


  show: boolean;

   dateRange() {
    this.show = true;
  }

}

well, you need two formControls or a formGroup with two formControls. to use a formControl alone, use [formControl]="date", NOT [value]="date.value", to use a formGroup see @kris Hollenbeck answer — Eliseo

Kris Hollenbeck Kris Hollenbeck · Accepted Answer · 2019-08-22T22:23:25

I am not sure why you have the calendars separated from the control. But here I've created an example illustrating how you can track the data using a date picker range component and a form group. Essentially combining the examples from Angular Material and Angular Reactive Forms. Essentially the inputs need to be hooked up to a model to keep track of the changes.

datepicker-overview-example.ts

import {Component, ChangeDetectorRef} from '@angular/core';
import {FormControl, FormGroup } from '@angular/forms';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {

  constructor(private changeDetectorRef: ChangeDetectorRef ) {}

  public startDate;
  public endDate;
  public dateForm = new FormGroup({
    start: new FormControl(),
    end: new FormControl(),
  });

  update() {
    this.startDate = this.dateForm.get('start').value;
    this.endDate = this.dateForm.get('end').value;
  }
}

datepicker-overview-example.html

<form [formGroup]="dateForm">
  <mat-form-field>
      <input matInput [matDatepicker]="start" placeholder="Start Date" formControlName="start" (dateChange)=update()>
      <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
      <mat-datepicker #start></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
      <input matInput [matDatepicker]="end" placeholder="End Date" formControlName="end" (dateChange)=update()>
      <mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
      <mat-datepicker #end></mat-datepicker>
  </mat-form-field>
</form>

<h3>Model Output</h3>
<div>
  <p>Start: {{startDate}}</p>
  <p>End: {{endDate}}</p>
</div>

Demo:

https://stackblitz.com/edit/angular-skq67a

Angular Date Range Picker not able to implement

1 Answers