javascript - 以编程方式设置角度材料日期选择器值
问题描述
我在我的一个角项目组件中使用角材料日期选择器。该组件有两个选项卡。使用 *ngIf 我根据用户单击的内容一次只显示一个。在一个选项卡中,用户选择一个日期,如果导航到同一组件的其他选项卡并返回到前一个选项卡,我需要保留所选日期。
这就是我在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');
}
但是当我向后导航时,不会保留日期值。有什么建议我怎样才能做到这一点?
这是示例堆栈闪电战
解决方案
它不起作用,因为您没有存储选定的值。所以在打字稿中创建一个变量:
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>
可以在 stackblitz看到整个代码
推荐阅读
- c++ - 如何使用协程调试程序
- python - 递减或递增列表
- python - 如何在pyqt5中使用线程编辑QPlainTextEdit文本
- ocaml - 如何在 utop 中使用 ppx 派生?
- javascript - 从 Vue JS 中的 URL 获取参数
- google-maps - 如何使用 Chrome 意图打开谷歌地图应用程序并开始导航?
- kotlinx.serialization - 类“TaskPayload”未在“EventPayload”范围内注册多态序列化
- elasticsearch - Elasticsearch Match 查询分析文本字段中的所有单词
- entity-framework-core - EF Core - 更改跟踪子记录
- node.js - 如何在 TypeORM 中正确插入具有 OneToMany 关系的实体