How disable all the dates before a particular date in angular?

Question

I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers.

Below is my HTML for startDate and endDate:

startDate:

endDate:

Now below is my angular code (ts) where I am calling validateForm method on the page load.

ngOnInit() {
    ....
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
     'startDate': ['', Validators.required],
     'endDate': ['', Validators.required],
     'unavailabilityReason': ['']
    });
}

ProblemStatement:

Now what I need to do is - if I have selected any date in startDate (for example 23rd Nov), then in the endDate datepicker all the dates before and including 23rd Nov should be disabled so that I can only select dates after 23rd Nov only. Is this possible to do in Angular?

Can we achieve that by placing minDate and maxDate somewhere in HTML or TS ?

user_8020941 · Answer

Binding with [min] works perfect for any date

.ts file

//today's date
todayDate:Date = new Date();

//any date
someDate: Date = new Date(anydate);

.html file

user_6294072 · Answer

Since you are using a reactive form, utilize the form controls. It's not recommended to have two bindings (ngModel and formControl). So drop the ngModel like I suggested in a previous question of yours: https://stackoverflow.com/a/47426879/6294072

So populate your form controls with the values of from your object unavailability.

constructor(private formBuilder: FormBuilder) { 
  this.unavailabilityForm = this.formBuilder.group({
    startDate: [this.unavailability.startDate],
    endDate: [this.unavailability.endDate]
  });  
}

if you are receiving the values at a later point you can use patchValues:

this.unavailabilityForm.setValue({
  startDate: this.unavailability.startDate;
  endDate: this.unavailability.endDate;
})

else you can set the values when you build the form.

Then the only thing you need to add to your second datepicker is [min] like the other answer mentioned. There utilize the form control value:

DEMO

user_3780040 · Answer

Unless I'm missing something, you can use the [min]="" date property:

Whatever startDate is will limit the Calendar dates available for endDate. If you need it set before startDate is chosen, use another variable and set it in consturctor() or ngOnInit() of your component.

See: https://material.angular.io/components/datepicker/overview#date-validation

user_1542982 · Answer

Using the valueChanges of Angular reactive forms and Min feature here is a complete working solution with validation and reactive forms

you can also see the image that the publishedTo only accepts values greater than or equal to any values you set on the PublisedFrom

components.ts

  export class AnnouncementformComponent implements OnInit {
   constructor(private _formBuilder: FormBuilder){}

   Announcementform: FormGroup;
   minDate:Date;

   this.Announcementform = this._formBuilder.group({

   PublishedFrom: ['', Validators.required],
   PublishedTo: ['', Validators.required],

  });
  this.Announcementform.valueChanges.subscribe(res=>{
    this.minDate = new Date(res.PublishedFrom);
  });

component.html

      
                
                    Publish FROM *
                
                
            
            
                
                    Publish TO *

I am also writing additional code below if someone needs to start his date from a specific date or greater or equal to current date can use simple line of code below

1- create a variable in your component class name it for example startDate

startDate:Date;

 ngOnInit() {
//---This will set the datepicker to accept values from current date or above---//
//--- you can also customize the value to set any date you want----//
this.startDate= new Date();
}

then in your component.html file

user_4529760 · Answer

I used

[min]="startDate.value"

and worked like expected (disabled endDate calendar previous dates from selected date in startDate Calendar)

user_12324282 · Answer

user_7930361 · Answer

Latest version accept minDate and maxDate as Properties

https://material.angular.io/components/datepicker/api

user_16584757 · Answer

first date


   1st installment date

2nd date


    2nd installment date

Here settingForm is my formgroup name, Just one line change in second date no need to write anything in .ts file

How disable all the dates before a particular date in angular?

8 Answers