如何在 Angular 5 中使用数据绑定设置日期输入字段的值?

Question

我的角度应用程序中有两个日期输入字段(fromDate和toDate)。我还有3个按钮"昨天"，"上周"，"上个月"。用户可以选择"开始"和"结束"日期，也可以按其中一个按钮。

单击按钮后，必须正确填写"开始日期"和"结束日期"字段。我已经将 ngModel 指令应用于这两个日期输入字段。这是我的网页

<div class="col-sm-4 filter-box">
<label>Filter by Date</label>
<div class="row content-even" >
<button class="btn btn-primary btn-sm my-1" (click)="yesterdayDateFilter()">Yesterday</button>
<button class="btn btn-primary btn-sm my-1">Last Week</button>
<button class="btn btn-primary btn-sm my-1">Last Month</button>                    
</div>
<div class="row mt-1 content-even" >
<div class="form-group">
<label for="fromDate">From </label>
<input type="date" id="fromDate" [(ngModel)]="fromDate" name="fromDate">
{{fromDate}}
</div>                    
<div class="form-group">
<label for="toDate">To </label>
<input type="date" id="toDate" [(ngModel)]="toDate" name="toDate">
{{toDate}}
</div>
</div>
</div>

现在，当按下按钮时，我不确定如何填写日期字段。例如，当我按下昨天按钮时，我希望我的昨天日期过滤器()函数适当地更改开始日期和结束日期。这是我昨天的代码日期过滤器()

yesterdayDateFilter(){        
let yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
this.fromDate =  new Date(this.datePipe.transform(yesterday, 'yyyy-MM-dd'));
console.log(this.fromDate); }

我正在使用角度的日期管道将日期转换为合适的格式

从 '@angular/common' 导入 { DatePipe };

现在，当我单击昨天按钮时，开始日期字段保持不变，但输入字段旁边的 fromDate 值(模板中的 {{fromDate}})以这种格式显示

2018年4月5日星期四 05：30：00 GMT+0530 (IST)

我一直在尝试不同的方法来实现所需的功能，但一直无法找到一种方法。帮助？谢谢。

Answer 1

<input type="date" id="fromDate" [(ngModel)]="fromDate" name="fromDate">

类型"日期"不包含日期时间。如果要使用类型为日期的输入，请使用以下代码来实现它。在将转换后的值分配给模型时，无需将其解析为 Date。

yesterdayDateFilter(){        
let yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
this.fromDate = this.datePipe.transform(yesterday, 'yyyy-MM-dd');
this.toDate=this.datePipe.transform(new Date(), 'yyyy-MM-dd');
console.log(this.fromDate); 
}

演示

如果要同时显示日期和时间，则应使用以下库。

ng-pick-datetime

我希望这对你有帮助。如果您有任何问题或疑问，请告诉我。