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>

我如何实现我的目标？
将其移入打字稿（client.component.ts）

Answer 1

您需要包括年份以说明leap年规则。我在生成月份，然后在月份或年份值更新时生成日期。 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

角度-如何根据出生日期中的月份过滤日期

1 个答案: