如何在Angular中动态设置datetime-local的minDate并联动起止时间

步骤1：修改模板，绑定结束时间的min属性并添加联动事件 #

给开始时间输入框添加(ngModelChange)事件监听变化，同时给结束时间的min属性绑定格式化后的开始时间：

<div>
    <small id="inputHelp" class="form-text text-muted-hint">Enter Time (UTC Format)</small>
</div>
<div>
    <label for="startTime">Start Time:</label>
    <input type="datetime-local" class="form-control" id="startTime" 
           ng-model="startTime" 
           max="{{maxDate | date: 'yyyy-MM-ddTHH:mm:ss'}}"
           (ngModelChange)="onStartTimeChange($event)">
</div>
<div>
    <label for="endTime">End Time:</label>
    <input type="datetime-local" class="form-control" id="endTime" 
           ng-model="endTime" 
           [disabled]="!startTime"
           [min]="startTime | date: 'yyyy-MM-ddTHH:mm'">
</div>

步骤2：在组件类中实现联动逻辑 #

在组件的.ts文件里添加处理函数，实现开始时间变化时同步结束时间的逻辑：

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

@Component({
  selector: 'app-your-component', // 替换为你的组件选择器
  templateUrl: './your-component.component.html', // 替换为你的模板路径
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  startTime: string | null = null;
  endTime: string | null = null;
  maxDate: Date = new Date(); // 可根据实际需求调整maxDate的取值

  onStartTimeChange(newValue: string | null) {
    if (newValue) {
      // 开始时间有值时，同步设置结束时间
      this.endTime = newValue;
    } else {
      // 开始时间清空时，结束时间也清空
      this.endTime = null;
    }
  }
}

关键说明 #

• [min]="startTime | date: 'yyyy-MM-ddTHH:mm'"：通过Angular的date管道将开始时间转换为datetime-local输入框要求的格式，确保结束时间无法选择早于开始时间的数值。
• (ngModelChange)="onStartTimeChange($event)"：监听开始时间的变更，一旦开始时间被设置，立即同步结束时间为相同值；若开始时间被清空，结束时间也随之清空并保持禁用状态。
• datetime-local输入框绑定的是YYYY-MM-DDTHH:mm格式的字符串，所以变量类型使用string | null能避免Date对象格式不匹配的问题。

内容的提问来源于stack exchange，提问作者Abhigyan Sharma