如何将Enddate的最小值设置为StartDate加10天？

我来帮你搞定这个需求！要实现选择StartDate后，EndDate的最小可选日期自动设为StartDate加10天的功能，咱们从组件逻辑和模板绑定两部分来调整，具体步骤如下：

你的原代码里有几个小问题：sdate和edate的类型声明不准确，addDays函数放在ngOnInit内部无法被模板调用。我们把它改成组件的实例方法，同时处理日期格式的转换适配：

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
  today = new Date();
  sdate: string; // input[type=date]绑定的是yyyy-MM-dd格式的字符串
  edate: string;
  endDateMin: string; // 存储EndDate的最小可选日期

  constructor() { }

  ngOnInit() {
    // 初始化StartDate为今天，格式转为input要求的yyyy-MM-dd
    this.sdate = this.formatDate(this.today);
    // 初始化EndDate的最小日期为今天加10天
    this.updateEndDateMin();
  }

  // 给日期添加指定天数的工具方法
  addDays(date: Date, days: number): Date {
    const result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
  }

  // 把Date对象转为yyyy-MM-dd格式的字符串，适配input[type=date]的属性要求
  formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  // 当StartDate变化时，更新EndDate的最小可选日期
  updateEndDateMin() {
    if (this.sdate) {
      const startDateObj = new Date(this.sdate);
      const endDateObj = this.addDays(startDateObj, 10);
      this.endDateMin = this.formatDate(endDateObj);
    }
  }
}

接下来调整模板里的日期输入框，给StartDate添加(change)事件触发更新逻辑，同时把EndDate的min属性绑定到我们计算好的endDateMin：

<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" 
        [(ngModel)]="sdate" 
        min="{{formatDate(today)}}"
        (change)="updateEndDateMin()"
      ><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="{{endDateMin}}"
      ><br><br>
    </div>
    <button class="btn">Submit</button>
  </form>
</div>

1. 日期格式匹配：input[type=date]的min属性和双向绑定的值都要求是yyyy-MM-dd格式的字符串，所以专门写了formatDate方法做转换，避免格式不兼容导致的失效。
2. 实时更新触发：给StartDate输入框添加(change)事件，每次用户选择新日期都会自动计算并更新EndDate的最小可选范围。
3. 初始状态处理：在ngOnInit里初始化StartDate为当天，同时计算好初始的EndDate最小日期，确保页面加载时就符合需求。

这样调整后，当你选择19/3/2019作为StartDate时，EndDate的选择器就会自动从29/3/2019开始可选啦！

内容的提问来源于stack exchange，提问作者Ponmari Subramanian