角度：输入类型=“日期”与初始值

问题描述

我有两个输入 type="date" 来按期间过滤数据。 我想为它们带来加载页面时已经通知的价值。

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

使用 Date() 进行第二次输入。

这是我的角度代码：

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

从现在开始，感谢可以帮助我的人。

解决方法

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

@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">

那你怎么做 - 但一般来说，你应该考虑是否可以使用两个绑定:)