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

Question

I have two date input fields (fromDate & toDate) in my angular application. I also 3 buttons 'Yesterday', 'Last Week', 'Last Month'. The user can either choose both 'from' and 'to' dates or they can press one of the buttons.

As soon as a button is clicked, the from & to date fields must be filled appropriately. I have applied the ngModel directive to both these date input fields. Here is my 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>

Now when a button is pressed, I am not sure how to fill the date fields. For example, when i press the yesterday button, I want my yesterdayDateFilter() function to change the from and to dates appropritely. Here is my code for 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); }

I am using datepipe in angular to transform the date into suitable format

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

Now when i click the yesterday button, the from date field remains unchanged but the fromDate value ( {{fromDate}} in the template)beside the input field displays in this format

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

I've been trying different ways to achieve the required functionality but not have been able to figure out a way. Help? Thank you.

Bolin

What date format do you need? – Nobe

Angular date pipe is not for inputs – Haileyhailfellowwellmet

I want the dates to be stored in ISO format ( like this "2018-01-29T10:14:25.784Z" ). When i click on the yesterday button the 'from' date should be "2018-04-05T00:00:00.000Z" and the 'to' date should be "2018-04-06T00:00:00.000Z". At the same time i want the date input fields to be changed as well so that the user can see what 'from' and 'to' dates are being applied. Thank you – Bolin

@BhargavRaju Check the answer – Bract

Answer 1

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

type "date" does not consists of datetime. If you are going to use input with type as date then you use the following code to achieve it. You don't need to parse the transformed value to Date while assigning it to the model.

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

If you want to display both date and time then you should go with following library.

ng-pick-datetime

I hope this will help you. If you have any issues or doubts let me know.

Bract