Angular8中如何实现年月日分离下拉框的自定义日期选择器

我需要创建如下图所示的自定义日期选择器：

目前我尝试使用formGroup实现该功能，但我对Angular开发经验不足，已编写的部分代码如下：

<form [formGroup]="profileForm" (ngSubmit)="sendMessageForm1()">
                    <select id="day" formControlName="Day">
                      <option value="">Day</option>
                      <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                    </select>

                    <select id="month" formControlName="Month">
                      <option value="">Month</option>
                      <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                    </select>

                    <select id="year" formControlName="Year">
                      <option value="">Year</option>
                      <option value="2001">2001</option>
                      <option value="2002">2002</option>
                      <option value="2003">2003</option>
                      <option value="2004">2004</option>
                    </select>

</form>

请提供开发指导，帮助我完成该功能的实现。

前置配置 #

首先确保你所在的Angular模块已经导入ReactiveFormsModule，否则响应式表单指令无法正常工作：

// 在对应的module文件中添加
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他已有导入
    ReactiveFormsModule
  ],
  // ...其他配置
})
export class YourModule { }

组件逻辑实现 #

不用手写所有下拉选项，通过数组动态生成，同时增加日期合法性校验，避免出现2月30日这类无效日期：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-custom-date-picker',
  templateUrl: './custom-date-picker.component.html'
})
export class CustomDatePickerComponent implements OnInit {
  profileForm: FormGroup;
  // 动态生成日、月、年选项
  days: number[] = Array.from({ length: 31 }, (_, i) => i + 1);
  months: number[] = Array.from({ length: 12 }, (_, i) => i + 1);
  // 年份范围可自行调整，示例为1950年到当前年，倒序排列让最新年份显示在最上方
  years: number[] = Array.from(
    { length: new Date().getFullYear() - 1949 },
    (_, i) => 1950 + i
  ).reverse();

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单，添加必填校验
    this.profileForm = this.fb.group({
      Day: ['', Validators.required],
      Month: ['', Validators.required],
      Year: ['', Validators.required]
    });

    // 监听年月选择变化，自动匹配对应月份的合法天数
    this.profileForm.valueChanges.subscribe(formValue => {
      if (formValue.Month && formValue.Year) {
        // 获取选中年月的实际最大天数（自动处理闰年2月、大小月）
        const maxValidDay = new Date(formValue.Year, formValue.Month, 0).getDate();
        this.days = Array.from({ length: maxValidDay }, (_, i) => i + 1);
        // 如果之前选中的日期超过当月最大天数，清空日的选择
        if (formValue.Day && formValue.Day > maxValidDay) {
          this.profileForm.get('Day').setValue('');
        }
      }
    });
  }

  sendMessageForm1(): void {
    if (this.profileForm.invalid) return;
    const { Day, Month, Year } = this.profileForm.value;
    // 拼接为标准日期格式，自动补前导零
    const selectedDate = `${Year}-${String(Month).padStart(2, '0')}-${String(Day).padStart(2, '0')}`;
    // 后续提交逻辑写在这里，比如调用接口传参
    console.log('选中日期：', selectedDate);
  }
}

模板优化 #

用*ngFor循环渲染选项，替代手写的大量option标签，同时优化交互细节：

<form [formGroup]="profileForm" (ngSubmit)="sendMessageForm1()">
  <select id="day" formControlName="Day">
    <option value="" disabled>Day</option>
    <option *ngFor="let day of days" [value]="day">{{ day | number:'2.0' }}</option>
  </select>

  <select id="month" formControlName="Month">
    <option value="" disabled>Month</option>
    <option *ngFor="let month of months" [value]="month">{{ month | number:'2.0' }}</option>
  </select>

  <select id="year" formControlName="Year">
    <option value="" disabled>Year</option>
    <option *ngFor="let year of years" [value]="year">{{ year }}</option>
  </select>

  <button type="submit" [disabled]="profileForm.invalid">提交</button>
</form>

实现说明 #

• 用Angular内置的number:'2.0'管道自动给1-9的日月补前导零，显示为01、02的格式，和示例效果一致
• 默认提示选项加了disabled属性，用户选择有效值后无法切回空提示项，交互更合理
• 提交按钮绑定了表单的有效状态，三个下拉都选完才能点击提交，减少无效请求
• 自动适配不同年月的天数，不需要手动维护每个月的日期列表，闰年、大小月的逻辑由原生Date API自动处理

内容的提问来源于stack exchange，提问作者subhajit saha