Angular：输入类型=“日期”与初始值[重复]答案

【问题标题】：Angular: input type="date" with initial value [duplicate]Angular：输入类型=“日期”与初始值[重复]
【发布时间】：2021-07-02 14:50:38
【问题描述】：

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

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

【问题讨论】：

好吧，当我单击运行代码 sn-p 时没有任何反应，因为没有导入 Angular，并且没有 ngModel 可以使用的 dtInitial 或 dtFinal 属性。请显示更多您的代码。如果代码不可运行，则无需使用 Stack Snippet 功能。
@HereticMonkey，我将 Stack Snippet 更改为代码。感谢您的反馈。

标签： angular typescript angular-date-format

【解决方案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">

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

【讨论】：

它必须是特定格式的字符串才能使用input type="date"...