角度：输入类型 = "date"，初始值

Question

我有两个输入type="日期"；以按周期过滤数据。我想在加载页面时将它们与已经通知的值一起带来。

第一个输入值为Date((-7。

Date((的第二个输入。

这是我的角度代码：

<input type="date" class="form-control form-date" [(ngModel)]="dtInitial">       
<input type="date" class="form-control form-date" [(ngModel)]="dtFinal">´

从现在起，谢谢你能帮助我。

Answer 1

您的输入应该包含一个字符串。尝试将日期转换为组件中的字符串。

@Component({
selector: "example",
templateUrl: "./app.component.html",
providers: [DatePipe]
})
export class AppComponent implements OnInit {
dtInitial: string = "";
dtFinal: string = "";
constructor(private datePipe: DatePipe) {}
ngOnInit(): void {
let today: Date = new Date();
let sevenDaysAgo = new Date();
sevenDaysAgo.setDate(today.getDate()-7)
this.dtInitial = this.datePipe.transform(today, "yyyy-MM-dd");
this.dtFinal = this.datePipe.transform(sevenDaysAgo, "yyyy-MM-dd");
}
}

或者，您也可以直接在模板中使用datePipe。你可以用其他方式格式化你的约会。在这里，您可以看到一些可以使用的不同格式：https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#format_of_a_valid_date_string.

如果您想在其中一个输入更改时使其更新，您可以将其添加到组件中。

updateDateInitial() {
let newDate = new Date(this.dtInitial);
newDate.setDate(newDate.getDate()-7)
this.dtFinal = this.datePipe.transform(newDate, "yyyy-MM-dd");
}
updateDateFinal() {
let newDate = new Date(this.dtInitial);
newDate.setDate(newDate.getDate()+7)
this.dtInitial = this.datePipe.transform(newDate, "yyyy-MM-dd");
}

并且这用于输入。

<input (change)="updateDateInitial()" type="date" class="form-control form-date" [(ngModel)]="dtInitial">       
<input (change)="updateDateFinal()" type="date" class="form-control form-date" [(ngModel)]="dtFinal">

这就是你可以做到的——但总的来说，你应该考虑两个绑定是否是可行的：(