首页 文章

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

提问于
浏览 次
1

我的角度应用程序中有两个日期输入字段（fromDate和toDate） . 我还有3个按钮'昨天'，'上周'，'上个月' . 用户可以选择“从”和“到”日期，也可以按其中一个按钮 .

单击按钮后，必须立即填充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（）函数可以适当地更改from和to日期 . 这是我的daysDateFilter（）的代码

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); }

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

从'@ angular / common'导入;

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

周四05 05 2018 05:30:00 GMT 0530（IST）

我一直在尝试不同的方法来实现所需的功能，但却无法找到方法 . 救命？谢谢 .

angular date angular-ngmodel input-field date-pipe

1 回答

  • 3
    <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); 
}

    Demo

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

    ng-pick-datetime

    我希望这能帮到您 . 如果您有任何问题或疑虑，请告诉我 .

    回复于

相关问题