我在角度项目的组件之一中使用角度材料日期选择器。该组件有两个选项卡。使用* ng如果我仅基于用户单击的内容一次显示一个,则在一个选项卡中用户选择一个日期,并且如果导航到相同组件的其他选项卡并返回上一个选项卡,则我需要保留选择的日期。
这就是我在 HTML方面所做的事情:
<mat-form-field class="dropdownWidth">
<input #dateInput matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker"
placeholder="Choose a date"
[value]="datePickerDate"
[(ngModel)]="datePickerDate"
(dateChange)="addDateEvent($event)"
[disabled]="selectedOperator.length === 0 && userDateRange.length === 0">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
并在 TS文件中:
addDateEvent(event) {
this.datePickerEvent = event;
this.datePickerDate = new Date(`${event.value['_i'].month + 1}-${event.value['_i'].date}-${event.value['_i'].year}`);
this.formatDate = moment(event.value).format('YYYY-MM-DD');
}
但是当我向后浏览时,日期值不会保留。有什么建议可以实现吗?
以下是示例stackblitz
答案 0 :(得分:1)
在您的示例中,您没有使用任何绑定。尝试使用[(ngModel)]
,以便它将采用并保持所选的值。
这样做,它将起作用:
<mat-form-field>
<input matInput [(ngModel)]="date" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
答案 1 :(得分:1)
它不起作用,因为您没有存储选定的值。因此,在打字稿中创建一个变量:
yourDate: any;
HTML:
<p> YourDate {{ yourDate | date }} </p>
<mat-form-field>
<input matInput [(ngModel)]="yourDate" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>