Question

我必须设置“开始日期”选项+ 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 result;
    }
  }

提前谢谢大家。

Answer 1

只要使用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 = result;
      this.edate = result;
    }

}

Stackblitz demo

如何确定我的“开始日期+ 10天”作为“结束日期”的最小值？

1 个答案: