如何使用 NgDatePicker Angular 处理 startDate 中的值

Question

我尝试根据选定的开始日期确定Angular ngDatePicker上dueDate的minDate。

例如，我选择开始日期：2019 年 5 月 16 日，因此我希望根据在 startDate 上选择的日期禁用到期日期的开始日期之前的日期。

我尝试使用 [(ngModel) 从 startDate 获取值，以便它可以用作 dueDate 中的 minDate，但它不能。

示例代码：

<div class="row">
<div class="col-sm-6 text-right form-inline">
<div class="form-group">
<label for="from">From</label>
<div class="input-group ml-3">
<input class="col-sm-6 form-control" placeholder="yyyy-mm-dd" name="logInDF"
formControlName="loginDateFrom" ngbDatepicker #logInDF="ngbDatepicker" [(ngModel)]="loginDateFrom">
<div class="input-group-append" (click)="logInDF.toggle()">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 text-left form-inline">
<div class="form-group">
<label for="inputLastName">To</label>
<div class="input-group ml-3">
<input class="col-sm-6  form-control" placeholder="yyyy-mm-dd" name="logInDT"
formControlName="loginDateTo" ngbDatepicker #logInDT="ngbDatepicker" [minDate]="loginDateFrom">
<div class="input-group-append" (click)="logInDT.toggle()">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
</div>
</div>

如何根据开始日期上的值从到期日期获取最小日期？

Answer 1

如果您使用的是响应式表单，我建议您删除ngModel以防止数据流(模板驱动与响应式表单)之间的任何混淆。

然后，在 ngBootstrap 日期选取器上，formControlName为loginDateFrom，将(dateSelect)事件与自定义方法绑定onSelect()，该方法将随时触发。 用户在日期选取器上选择一个日期。

此外，在 ngBootstrap 日期选择器上，formControlName为loginDateTo，您必须将[minDate]上的输入绑定设置为loginDateTo的值，即formGroup.value.loginDateTo。

<div class="row">
<div class="col-sm-6 text-right form-inline">
<div class="form-group">
<label for="from">From</label>
<div class="input-group ml-3">
<input class="col-sm-6 form-control" placeholder="yyyy-mm-dd" name="logInDF" formControlName="loginDateFrom" ngbDatepicker #logInDF="ngbDatepicker" (select)="onSelect($event)">
<div class="input-group-append" (click)="logInDF.toggle()">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 text-left form-inline">
<div class="form-group">
<label for="inputLastName">To</label>
<div class="input-group ml-3">
<input class="col-sm-6  form-control" placeholder="yyyy-mm-dd" name="logInDT" formControlName="loginDateTo" ngbDatepicker #logInDT="ngbDatepicker" [minDate]="loginDateFrom">
<div class="input-group-append" (click)="logInDT.toggle()">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
</div>
</div>

然后，在您的 component.ts 上，我们定义onSelect()方法，我们使用 patchValue 使用loginDateFrom中的值更新 FormControlloginDateTo。

onSelect(event) {
//console.log(event);
this.formGroup.patchValue({
loginDateTo: event
})
}

这将根据在第一个日期选取器上选择的内容，绑定loginDateTo的正确[minDate]值。

我创建了一个演示，它复制了上述所需的行为。