Angular 4+ - How to fetch date from input datepicker

Question

I'm new to angular.

I have an input date picker. I want to get/fetch the date selected in the date picker.

Code: Html file:

 <input class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" readonly="" type="text">

I'm trying to console.log the selected date.
In the component.ts file I've added a variable staff_date_booking : Date; and created a function

bookStaffEmployeeDate(){
        console.log("This is the DATE:", this.staff_book_date);
    }

and in the html I've added

 <input [ngModel]="staff_book_date | date:'yyyy-MM-dd'" class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" readonly="" type="text">

Once the date is selected I'm calling this function on (click) but I'm getting this.staff_book_date as undefined.

How can I store the selected date in a variable like staff_book_date

try changing [ngModel] to [(ngModel)] in your input tag. — Sarthak Aggarwal
– Sarthak Aggarwal, Commented Oct 25, 2018 at 6:08
maybe you are calling bookStaffEmployeeDate() before the value of staff_book_date is selected — Hana Wujira
– Hana Wujira, Commented Oct 25, 2018 at 6:28
No, it is after the date is selected. There's another input after the date picker and on its click I've called the function. — String Name
– String Name, Commented Oct 25, 2018 at 6:31
try stackblitz.com/edit/angular-vbukxm?embed=1&file=src/app/… — Sooriya Dasanayake
– Sooriya Dasanayake, Commented Oct 25, 2018 at 7:56

Sachila Ranawaka · Accepted Answer · 2018-10-25 06:08:56Z

1

Don't use pipes inside ngModel. Also, use the two-way binding in the ngModel

<input [(ngModel)]="staff_book_date"

answered Oct 25, 2018 at 6:08

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

4 Comments

String Name Over a year ago

Removed pipes and added two way binding in ngModel, still it says undefined.

String Name Over a year ago

No console errors after removing pipes. Console output: This is the DATE: undefined

Sachila Ranawaka Over a year ago

where do you call the bookStaffEmployeeDate methos

String Name Over a year ago

There is another input field right after the date picker I've added (click)="bookStaffEmployeeDate()" on the input field.

Sarthak Aggarwal · Accepted Answer · 2018-10-25 06:38:59Z

1

Create a property in your .ts file and make a two way binding with it in your .html

Make the following changes

.component.ts

staff_book_date : any;

bookStaffEmployeeDate(){
        console.log("This is the DATE:", this.staff_book_date);
}

component.html

<input [(ngModel)]="staff_book_date" class="form-control m-input " id="m_datepicker_2_validate" placeholder="Select Date" type="date">
<button (click)="bookStaffEmployeeDate()">Click Me</button>

edited Oct 25, 2018 at 6:38

answered Oct 25, 2018 at 6:11

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

9 Comments

String Name Over a year ago

If I try to create a 2 way binding model it gives an error regarding the pipes. Error I get in console log: ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Cannot have a pipe in an action expression at column 19 in [staff_book_date | date:'yyyy-MM-dd'=$event] in ng:///ServiceModule/ServicesComponent.html@809:40 ("<div class="input-group date">

Sarthak Aggarwal Over a year ago

Remove the pipe in two way binding.

Sarthak Aggarwal Over a year ago

if you want to format your input using pipe, check this link

String Name Over a year ago

After removal of pipe I get no error but the console log shows date as undefined. Console log: This is the DATE: undefined

Sarthak Aggarwal Over a year ago

if you are not entering any value in input box, it will be undefined since we have declared staff_book_date not defined it. Also, you have made your input as readonly, you wont be able to edit it also.

|

Collectives™ on Stack Overflow

Angular 4+ - How to fetch date from input datepicker

2 Answers 2

4 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related