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.

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 — Bhargav Raju
– Bhargav Raju, Commented Apr 6, 2018 at 9:35

Suvethan Nantha · Accepted Answer · 2018-04-06 09:59:40Z

11

<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.

edited Apr 6, 2018 at 9:59

answered Apr 6, 2018 at 9:54

Suvethan Nantha

2,47418 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related