Блог

Я должен установить свой выбор начальной даты 10 дней в качестве минимального диапазона дат для моей конечной даты. Например: StartDate = 19/3/2019, тогда средство выбора конечной даты включается только с 29/3/2019

Мой код: 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 resu<
    }
  }
  

Заранее спасибо, ребята..

Вы должны вызывать addDays метод всякий раз, когда изменяется значение начальной даты sdate , используя 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>
  

В вашем component.ts должен быть метод, addDays который увеличивает начальную дату и присваивает дату 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 = resu<
      this.edate = resu<
    }

}
  

Демонстрация Stackblitz