Angular - Как отфильтровать день в зависимости от месяца в дате рождения

Question

Я использую Angular-7 для разработки клиентского портала. Я хочу использовать опцию выбора для даты рождения , но год не будет включаться . Это будет только месяц и день. значения в поле дня будут зависеть от того, какой месяц выбран. В настоящее время у меня есть это:

client.component.html

<div class="form-group">
  <label for="name">Month</label>
  <select class="form-control pt-1" name="month" [(ngModel)]="data.month">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
  </select>
</div>

<div class="form-group">
<label for="name">Month</label>
  <select class="form-control pt-1" name="day" [(ngModel)]="data.day">                
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option *ngIf="month != 'February'")>
      29
    </option>
    <option *ngIf="month != 'February'">
      30
    </option>
    <option *ngIf="month == 'January' || month == 'March' || month == 'May' || month == 'July' || month == 'August' || month == 'October' || month == 'December'">
      31
    </option>
 </select>

1. Как мне достичь своей цели?

2. Переместить его в машинописный текст (client.component.ts)

Answer 1

Вам необходимо указать год для учета правил високосного года. Я генерирую месяцы, а затем, когда значение месяца или года обновляется, генерируются дни. getDaysInMonth в уловке, чтобы получить правильное количество дней для данного месяца и года.

<div class="form-group">
  <label for="selectedYear">Year</label>
  <input name="selectedYear" [(ngModel)]="selectedYear" />
</div>

<div class="form-group">
  <label for="selectedMonth">Month</label>
  <select class="form-control pt-1" name="selectedMonth" [(ngModel)]="selectedMonth">
    <option *ngFor="let month of months; let i = index" [value]="i+1">{{month}}</option>
  </select>
</div>

<div class="form-group">
  <label for="selectedDay">Day</label>
  <select name="selectedDay" [(ngModel)]="selectedDay">
    <option *ngFor="let day of days" [value]="day">{{day}}</option>
  </select>
</div>

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

const getMonth = (idx) => {

  var objDate = new Date();
  objDate.setDate(1);
  objDate.setMonth(idx-1);

  var locale = "en-us",
      month = objDate.toLocaleString(locale, { month: "long" });

    return month;
}



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  months = Array(12).fill(0).map((i,idx) => getMonth(idx + 1));

  selectedYear = 2004;
  selectedMonth = 1;
  selectedDay = 1;

  public get days() {
    const dayCount = this.getDaysInMonth(this.selectedYear, this.selectedMonth);
    return Array(dayCount).fill(0).map((i,idx) => idx +1)
  }

  public getDaysInMonth(year: number, month: number) {
    return 32 - new Date(year, month - 1, 32).getDate();
  }
}

Вы можете попробовать это здесь: https://stackblitz.com/edit/angular-rqintz