Sign Up

Sign In

Forget Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

How to pick date range in angular material 5.0.0 with datepicker?

  • 0

I am using the latest Angular Material 5.0.0-rc0 in my Angular 5 app. I am trying to select a range of dates with the datepicker provided with Angular material, but I couldn’t find any documentation regarding that.

All I could work with it is to select a startDate or set the minDate and maxDate. Here’s the HTML code for that

  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>

and TS code

import {Component} from '@angular/core';

  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
export class DatepickerStartViewExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);

This code helps me select one date in the range of those min and max dates but doesn’t allow to select a range of them. Though using a third-party library may solve this problem, but its gonna have a different UI, which is going to be different from my current app’s UI. Please help me solve this issue.

Click to rate this post!
[Total: 0 Average: 0]
Share This Post
  1. Recommend to check out Saturn Material range Datepicker. Have a look also at their demo page. It is a full Material UX with built-in support for your existing Material theme.

    You can install it with npm install saturn-datepicker. See their Github page for full integration instructions.

    Markup looks like this:

        <input matInput
            placeholder="Choose a date"
        <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
        <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>

    And here is what it ends up looking like on the page:

    Screenshot of the Material date range picker

    • 0
Leave an answer

Leave an answer