咨询Angular7中点击按钮同时显示两个日历的实现方法

没问题！在Angular 7里实现点击按钮同时弹出开始/结束日期选择器，用Angular Material的Datepicker组件就能完美实现，我给你整理了完整的可运行代码和步骤：

1. 先安装适配Angular 7的Angular Material #

首先确保你的项目已经安装了对应版本的Material依赖（Angular 7对应Material 7.x版本），执行以下命令：

npm install @angular/material@7.3.7 @angular/cdk@7.3.7 --save
npm install @angular/animations@7.2.16 --save

2. 在模块中导入必要的模块 #

打开你的组件所在的模块文件（比如app.module.ts），导入以下模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';

// Material组件模块
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
    MatButtonModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件TS逻辑实现 #

在你的组件文件（比如app.component.ts）中，用响应式表单管理日期，并添加显示/隐藏日历的控制逻辑：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DateValidator } from './date.validator'; // 自定义日期验证器

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dateForm: FormGroup;
  showCalendars = false; // 控制日历显示状态

  constructor(private fb: FormBuilder) {
    // 初始化表单，添加日期验证
    this.dateForm = this.fb.group({
      startDate: [null, Validators.required],
      endDate: [null, Validators.required]
    }, { validator: DateValidator.endDateAfterStartDate });
  }

  // 切换日历显示/隐藏
  toggleCalendars() {
    this.showCalendars = !this.showCalendars;
  }

  // 提交日期（可选）
  onSubmit() {
    if (this.dateForm.valid) {
      console.log('开始日期:', this.dateForm.value.startDate);
      console.log('结束日期:', this.dateForm.value.endDate);
      // 这里添加你的业务逻辑
    }
  }
}

自定义日期验证器（可选但推荐） #

新建一个date.validator.ts文件，添加结束日期晚于开始日期的验证：

import { AbstractControl, ValidationErrors } from '@angular/forms';

export class DateValidator {
  static endDateAfterStartDate(control: AbstractControl): ValidationErrors | null {
    const startDate = control.get('startDate')?.value;
    const endDate = control.get('endDate')?.value;

    if (startDate && endDate && endDate < startDate) {
      return { endDateBeforeStartDate: true };
    }
    return null;
  }
}

4. 组件HTML模板 #

在app.component.html中，编写按钮和双日历的布局：

<div class="container">
  <button mat-raised-button color="primary" (click)="toggleCalendars()">
    {{ showCalendars ? '收起日历' : '选择日期范围' }}
  </button>

  <!-- 双日历容器 -->
  <mat-card *ngIf="showCalendars" class="calendar-container">
    <form [formGroup]="dateForm" (ngSubmit)="onSubmit()">
      <div class="date-picker-group">
        <mat-form-field>
          <input matInput [matDatepicker]="startPicker" placeholder="开始日期" formControlName="startDate">
          <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
          <mat-datepicker #startPicker></mat-datepicker>
          <mat-error *ngIf="dateForm.get('startDate')?.hasError('required')">
            请选择开始日期
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <input matInput [matDatepicker]="endPicker" placeholder="结束日期" formControlName="endDate">
          <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
          <mat-datepicker #endPicker></mat-datepicker>
          <mat-error *ngIf="dateForm.get('endDate')?.hasError('required')">
            请选择结束日期
          </mat-error>
          <mat-error *ngIf="dateForm.hasError('endDateBeforeStartDate')">
            结束日期不能早于开始日期
          </mat-error>
        </mat-form-field>
      </div>

      <button mat-raised-button color="accent" type="submit" [disabled]="!dateForm.valid">
        确认选择
      </button>
    </form>
  </mat-card>
</div>

5. 添加基础样式（可选） #

在app.component.css中添加样式让两个日历并排显示：

.container {
  padding: 20px;
}

.calendar-container {
  margin-top: 15px;
  padding: 20px;
}

.date-picker-group {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

mat-form-field {
  width: 200px;
}

关键说明 #

• 用showCalendars布尔变量控制两个日历的显示/隐藏，点击按钮时切换状态
• 通过响应式表单FormGroup绑定两个日期输入框，方便做验证和值的获取
• 自定义验证器确保结束日期不会早于开始日期，提升用户体验
• Angular Material的Datepicker在Angular 7中是稳定可用的，这套代码完全适配你的版本

内容的提问来源于stack exchange，提问作者Vempati Mounika