how can disable angular material date picker between to date

Question

i want to disabled selected angular material between tow date . for example user can not selected any date between 2021-03-02 and 2011-03-02 .

i write this code :

 <input matInput [max]="maxDate" [min]="minDate" [matDatepicker]="picker6"/>

maxDate = new Date();
minDate =new Date().setFullYear(this.maxDate.getFullYear() - 10)

but it not worked .

Demo

whats the problem ? how can i sovle this problem ???

I suggest you to use mat-date-range-input. In this input you can't select below min date and above max date. For more reference please refer this link. material.angular.io/components/datepicker/examples — Aman Gojariya
– Aman Gojariya, Commented Mar 2, 2021 at 12:38
Okay then please refer this answer. Hope It will resolve your concern. stackoverflow.com/a/47499503/8213994 — Aman Gojariya
– Aman Gojariya, Commented Mar 2, 2021 at 12:46
Does this answer your question? How disable all the dates before a particular date in angular? — Aman Gojariya
– Aman Gojariya, Commented Mar 2, 2021 at 12:48
@AmanGojariya i try all of taht link but thats not worked . i upfate question and put the stackbliz code — Mr-Programer
– Mr-Programer, Commented Mar 2, 2021 at 13:04

Aman Gojariya · Accepted Answer · 2021-03-02 15:15:40Z

1

Please replace your html file with below

your.component.html

<mat-form-field>
    <mat-label>Choose Start date</mat-label>
    <input matInput [max]="unavailabilityForm.controls.startDate.value" [matDatepicker]="picker1" />
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass" #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Choose End date</mat-label>
    <input matInput [min]="unavailabilityForm.controls.endDate.value" [matDatepicker]="picker" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
</mat-form-field>

your.component.ts

import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { FormBuilder } from "@angular/forms";

/** @title Datepicker with custom date classes */
@Component({
  selector: "datepicker-date-class-example",
  templateUrl: "datepicker-date-class-example.html",
  styleUrls: ["datepicker-date-class-example.css"],
  encapsulation: ViewEncapsulation.None
})
export class DatepickerDateClassExample implements OnInit {
  unavailabilityForm: any;
  maxDate = new Date();

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    let startDateTimeStamp = new Date().setFullYear(new Date().getFullYear() - 10);
    this.unavailabilityForm = this.formBuilder.group({
      startDate: [new Date(startDateTimeStamp)],
      endDate: [new Date()]
    });
  }
}

It will resolve your concern.

edited Mar 2, 2021 at 15:15

answered Mar 2, 2021 at 13:18

Aman Gojariya

1,5031 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr-Programer Over a year ago

thank you bro for your vote . but still i have that problem . i can select the date between 2011 and 2020 i want can not select between to date

Aman Gojariya Over a year ago

Ohh I am not getting the question properly give me 5 mins I will solve your problem

Aman Gojariya Over a year ago

Sorry @Mr-Programer your problem is not fixed it's not possible. because of we are not set the max date below current date.

Aman Gojariya Over a year ago

You need to use two dropdown

Aman Gojariya Over a year ago

Hello @Mr-Programer I have changes my answer. You can take two different date pickers and then your concerns is resolved

|

Collectives™ on Stack Overflow

how can disable angular material date picker between to date

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related