1

我有两个输入 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">´

从现在开始，谢谢能帮助我的人。

4

1 回答 1

0

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

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

那你怎么能做到 - 但总的来说，你应该考虑两个绑定是否是要走的路:)

于 2021-04-06T19:22:24.020 回答