Angular 5中如何通过数据绑定设置日期输入框值及按钮自动填充？

我来帮你搞定这个日期快速选择的需求，下面是完整的代码示例和逻辑说明：

1. 组件类代码（xxx.component.ts） #

先在组件类里定义绑定日期的变量，再写三个按钮对应的日期计算方法：

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

@Component({
  selector: 'app-date-filter',
  templateUrl: './date-filter.component.html',
  styleUrls: ['./date-filter.component.css']
})
export class DateFilterComponent {
  // 绑定日期输入框的变量
  fromDate: Date | undefined;
  toDate: Date | undefined;

  constructor() {}

  // 填充"Yesterday"日期：昨天一整天
  setYesterday(): void {
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    // 清零时间部分，避免时分秒干扰日期显示
    yesterday.setHours(0, 0, 0, 0);
    this.fromDate = new Date(yesterday);
    this.toDate = new Date(yesterday);
  }

  // 填充"Last Week"日期：过去7天（从7天前到昨天）
  setLastWeek(): void {
    const today = new Date();
    const sevenDaysAgo = new Date(today);
    sevenDaysAgo.setDate(today.getDate() - 7);
    sevenDaysAgo.setHours(0, 0, 0, 0);
    
    const yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1);
    yesterday.setHours(0, 0, 0, 0);

    this.fromDate = sevenDaysAgo;
    this.toDate = yesterday;
  }

  // 填充"Last Month"日期：这里提供两种常见逻辑，选你需要的就行
  // 方案1：过去30天
  setLastMonth(): void {
    const today = new Date();
    const thirtyDaysAgo = new Date(today);
    thirtyDaysAgo.setDate(today.getDate() - 30);
    thirtyDaysAgo.setHours(0, 0, 0, 0);
    
    const yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1);
    yesterday.setHours(0, 0, 0, 0);

    this.fromDate = thirtyDaysAgo;
    this.toDate = yesterday;
  }

  // 方案2：完整上个月（月初到月末），需要的话替换上面的方法
  // setLastMonth(): void {
  //   const today = new Date();
  //   const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
  //   const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
  //   firstDayOfLastMonth.setHours(0, 0, 0, 0);
  //   lastDayOfLastMonth.setHours(23, 59, 59, 999);

  //   this.fromDate = firstDayOfLastMonth;
  //   this.toDate = lastDayOfLastMonth;
  // }
}

2. 模板HTML代码（xxx.component.html） #

补全你的HTML，绑定好ngModel和按钮点击事件：

<div class="col-sm-4 filter-box">
  <label>Filter by Date</label>
  <div class="d-flex gap-2 mb-2">
    <input 
      type="date" 
      class="form-control" 
      [(ngModel)]="fromDate" 
      placeholder="From Date"
    >
    <input 
      type="date" 
      class="form-control" 
      [(ngModel)]="toDate" 
      placeholder="To Date"
    >
  </div>
  <div class="d-flex gap-2">
    <button class="btn btn-sm btn-secondary" (click)="setYesterday()">Yesterday</button>
    <button class="btn btn-sm btn-secondary" (click)="setLastWeek()">Last Week</button>
    <button class="btn btn-sm btn-secondary" (click)="setLastMonth()">Last Month</button>
  </div>
</div>

3. 关键细节说明 #

• 日期格式兼容：Angular的type="date"输入框会自动把Date对象转成ISO格式（YYYY-MM-DD），所以直接绑定Date变量就行，不用手动格式化。
• 时间清零处理：设置日期时调用setHours(0,0,0,0)是为了避免时分秒的差异导致日期显示异常，确保是当天的起始时间。
• 双向绑定同步：[(ngModel)]已经帮我们处理了数据双向同步——手动选日期时变量会自动更新，按钮点击时输入框也会自动刷新显示。

4. 必做配置提醒 #

要确保你的模块里已经导入了FormsModule，不然ngModel会失效：

// 比如在app.module.ts中
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入项
    FormsModule
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Bhargav Raju