时间戳

首页 > 解决方案 > 如何使用 NgDatePicker Angular 在 startDate 中处理 Duedate

angular - 如何使用 NgDatePicker Angular 在 startDate 中处理 Duedate

问题描述

我尝试根据所选的 startDate 确定 Angular ngDatePicker 上的 DueDate 的 minDate。

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

我曾尝试使用 [(ngModel) 从 startDate 获取值，以便它可以用作到期日期中的 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>

如何根据 StartDate 上的值从 dueDate 获取 MinDate？

标签： angular

解决方案

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

formControlName然后，在带有of的 ngBootstrap 日期选择器上loginDateFrom，将(dateSelect)事件与自定义方法绑定onSelect()，该方法将在任何时候触发。用户在日期选择器上选择一个日期。

formControlName此外，在带有of的 ngBootstrap 日期选择器上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()方法，我们使用patchValueloginDateTo使用来自的值更新 FormControl 。loginDateFrom

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

这将根据在第一个 DatePicker 上选择的内容为 's绑定正确的[minDate]值。loginDateTo

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

推荐阅读