angular - Angular - 如何根据出生日期中的月份过滤日期
问题描述
我正在使用 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)
解决方案
您需要包括年份以考虑闰年规则。我正在生成月份,然后当月份或年份值更新时,就会生成日期。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();
}
}
推荐阅读
- php - 在使用 Webhooks 从外部源发送到 Discord 的命令中添加成员 ID
- python - PyGame 中的碰撞
- timestamp - 当在最大值列字段中使用时间戳作为增量提取时,NiFi generateTableFetch 处理器在状态值中添加毫秒
- java - 转换为数据对象时,莫斯科时间晚一小时
- laravel - 反应原生应用程序返回 404 错误
- listview - 如何使用非附加滚动条来滚动 ListView,其中委托具有不同的高度?
- python - 如何加速非内置函数?如何使用椭圆或圆形内核进行 MaxPool 操作?
- django - Django - 更新内联表单集不更新
- python - Flask - db 'unique' 约束有效,但不返回错误,因此如果使用用户名/电子邮件,我可以向用户闪烁消息。如何通知用户?
- angular - Angular 9 网站未提取更新的 javascript 文件