html 物料日期选择器只能与单个输入关联

r3i60tvu  于 2023-01-15  发布在  其他
关注(0)|答案(1)|浏览(90)

我正在尝试使用角形材料的日期选择器功能,但在我创建的“div”中出现此错误。**“错误:一个MatDatepicker只能与一个输入关联。"**在得到这个错误后,我发现当我选择日期时,我不能影响下面的内容。我只能更改上面的日期区域。
你可以看到我在这里尝试使用的功能:calendar
下面是我的HTML代码:

<div class="col-2">
            <mat-form-field appearance="outline" class="margin-0">
                <mat-label>{{ "PROD_REPORT.FROM" | translate }}</mat-label>
                <input matInput [matDatepicker]="picker" [(ngModel)]="start_time" />
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

            <mat-form-field appearance="outline" class="margin-0">
                <mat-label>{{ "PROD_REPORT.TO" | translate }}</mat-label>
                <input matInput [matDatepicker]="picker" [(ngModel)]="end_time" />
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
        </div>
yqlxgs2m

yqlxgs2m1#

我面临着同样的问题,实际上当你使用角材料日期选择器在同一个表单中的多个字段,那么你应该使用#选择器名称应该不同.

<div class="col-2">
        <mat-form-field appearance="outline" class="margin-0">
            <mat-label>{{ "PROD_REPORT.FROM" | translate }}</mat-label>
            <input matInput [matDatepicker]="picker" [(ngModel)]="start_time" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

        <mat-form-field appearance="outline" class="margin-0">
            <mat-label>{{ "PROD_REPORT.TO" | translate }}</mat-label>
            <input matInput [matDatepicker]="picker_another" [(ngModel)]="end_time" />
            <mat-datepicker-toggle matSuffix [for]="picker_another"></mat-datepicker-toggle>
            <mat-datepicker #picker_another></mat-datepicker>
        </mat-form-field>
    </div>

相关问题