How to fix my "StartDate + 10 days" as minimum value for "Enddate"?

Question

I have to set my Startdate selection + 10 days as the minimum date range for my Enddate. For Ex : StartDate= 19/3/2019 Then Enddate picker enable only from 29/3/2019

My code: intex.html

<div class="container-fluid">
  <form #userForm="ngForm" (ngSubmit)="onSubmit()">
    {{userForm.value | json}}
    {{today| date}}

    <div class="form-group">
      <label>Start Date</label>
      <input type="date" name="sdate" class="form-control" value="{{today| date: 'dd/MM/yyyy'}}" [(ngModel)]="sdate"
        min="{{today | date:'yyyy-MM-dd'}}"><br><br>

    </div>

    <div class="form-group">
      {{today| date: 'dd/MM/yyyy'}}
      {{today| date: 'yyyy/MM/dd'}}
      <label>End Date</label>
      <input type="date" name="edate" class="form-control" [(ngModel)]="edate" min=""><br><br>
    </div>

    <button class="btn">Submit</button>
  </form>
</div>

app.ts

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
today = Date.now();
sdate=Date
edate=Date
days:number
// timestamp1 = new Date(this.sdate).getTime();
//  timestamp2 = new Date(this.edate).getTime();

  constructor() { }

  ngOnInit() {

    function addDays(sdate, days) {
      var result = new Date(sdate);
      result.setDate(result.getDate() + days);
      return result;
    }
  }

Advance Thanks guys..

Answer 1

You should invoke the addDays method whenever the start date sdate value changes using ngModelChange

<div class="container-fluid">
  <form #userForm="ngForm" (ngSubmit)="onSubmit()">
    {{userForm.value | json}}
    {{today| date}}

    <div class="form-group">
      <label>Start Date</label>
      <input type="date" name="sdate" class="form-control" value="{{today| date: 'dd/MM/yyyy'}}" [(ngModel)]="sdate" (ngModelChange)="addDays($event, 10)"
        min="{{today | date:'yyyy-MM-dd'}}"><br><br>

    </div>

    <div class="form-group">
      {{today| date: 'dd/MM/yyyy'}}
      {{today| date: 'yyyy/MM/dd'}}
      <label>End Date</label>
      <input type="date" name="edate" class="form-control" [ngModel]="edate | date:'yyyy-MM-dd'"
      min="{{minendDate | date:'yyyy-MM-dd'}}"
       (ngModelChange)="edate = $event" min=""><br><br>
    </div>

    <button class="btn">Submit</button>
  </form>
</div>

Your component.ts should have a method addDays which increments the start date and assign the date to the edate

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 today = Date.now();
sdate: any;
edate: any;
minendDate: any;
days:number
// timestamp1 = new Date(this.sdate).getTime();
//  timestamp2 = new Date(this.edate).getTime();

  constructor() { }

  ngOnInit() {
  }

     addDays(sdate, days) {
      let result = new Date(sdate);
      result.setDate(result.getDate() + days);
      this.minendDate = result;
      this.edate = result;
    }

}

Stackblitz demo