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

Answer 1

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