How Disable All The Dates Before A Particular Date In Angular?

March 30, 2023 Post a Comment

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/datepi

Solution 1:

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

 <mat-form-field>
        <input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Appointment date" formControlName="appointment_date"> 
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

Solution 2:

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:

<input matInput 
       [min]="unavailabilityForm.controls.startDate.value" 
       formControlName="endDate" ...>

DEMO

Solution 3:

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

<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
   <mat-form-field>
      <input matInput [min]="startDate" [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
</div>

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

Solution 4:

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

      <mat-form-field appearance="outline">
                <input matInput [matDatepicker]="PublishedFrom" placeholder="Publish FROM *"
                    formControlName="PublishedFrom">
                    <mat-label>Publish FROM *</mat-label>
                <mat-datepicker-toggle matSuffix [for]="PublishedFrom"></mat-datepicker-toggle>
                <mat-datepicker #PublishedFrom></mat-datepicker>
            </mat-form-field>
            <mat-form-field appearance="outline">
                <input matInput [matDatepicker]="PublishedTo" placeholder="Publish To *"
                    formControlName="PublishedTo" [min]="minDate">
                    <mat-label>Publish TO *</mat-label>
                <mat-datepicker-toggle matSuffix [for]="PublishedTo"></mat-datepicker-toggle>
                <mat-datepicker #PublishedTo></mat-datepicker>
            </mat-form-field>

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

  <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="publishdate" placeholder="Publish Date *"
                        formControlName="publishdate" [min]="startDate">
                    <mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
                    <mat-datepicker #publishdate></mat-datepicker>
                </mat-form-field>

Solution 5:

I used

[min]="startDate.value"

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

Html5 Info