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

Question

我的 angular 应用程序中有两个日期输入字段（fromDate 和 toDate）。我还有 3 个按钮 'Yesterday'、'Last Week'、'Last Month'。用户可以同时选择 'from' 和 'to' 日期，也可以按其中一个按钮。

单击按钮后，必须正确填写起始日期和截止日期字段。我已将 ngModel 指令应用于这两个日期输入字段。这是我的 HTML

        <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() 函数适当地更改开始日期和结束日期。这是我的 yesterdayDateFilter()

代码

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 中使用 datepipe 将日期转换为合适的格式

import { DatePipe } from '@angular/common';

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

Thu Apr 05 2018 05:30:00 GMT+0530 (IST)

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

Answer 1

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

type "date" 不包含日期时间。如果您打算使用类型为日期的输入，那么您可以使用以下代码来实现它。在将转换值分配给模型时，您不需要将转换后的值解析为 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); 
}

Demo

如果你想同时显示日期和时间，那么你应该使用以下库。

ng-pick-datetime

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

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

How to set the value of date input field using data binding in Angular 5?

angular

date

angular-ngmodel

input-field

date-pipe