Question

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

例如，我选择startDate：2019年5月16日，因此我希望根据startDate上选择的一项来禁用dueDate上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>

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

Answer 1

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

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

此外，在onSelect()的{{1}}的ngBootstrap日期选择器上，您必须将formControlName上的输入绑定设置为loginDateTo的值，是[minDate]。

loginDateTo

然后，在您的component.ts上，定义formGroup.value.loginDateTo方法，并使用patchValue用<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>中的值更新onSelect() FormControl。

loginDateTo

这将根据第一个DatePicker上选择的内容为loginDateFrom绑定正确的onSelect(event) { //console.log(event); this.formGroup.patchValue({ loginDateTo: event }) }值。

我创建了一个demo，它复制了上面的期望行为。

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

1 个答案: