How get the input value (date) from ng2-date-picker component in Angular2

Question

I am trying to get the value from a date picker (ng2-date-picker) input field, but might be missing something. I have tried all sorts of different ways to get the value, but with little success.

This is the link to the npm package I am using.

This is my date picker setup in my component:

import { DatePickerComponent } from 'ng2-date-picker';

  @ViewChild('dayPicker', {static: false}) datePicker: DatePickerComponent;
  open() { this.datePicker.api.open(); }
  close() { this.datePicker.api.close(); }

This is the date picker setup in my view:

    <dp-date-picker
        #dayPicker
        name="dob"
        [(ngModel)]="dateOfBirth"
        [config]='dateConfig'>
    </dp-date-picker>

I have tried accessing the value using the reference - #dayPicker and ngModel using dateOfBirth, but both values are undefined even after a date has been selected.

console.log('DOB: ' + this.dateOfBirth); (undefined)
console.log('this.datePicker: ' + this.datePicker); (undefined)

The only way I have been able to access the value, was through the following (but this only updates on the blur event, so I only get a value after the 2nd time the date is changed).

this.datepickerInputValue = (<HTMLInputElement><any>document.getElementsByClassName('dp-picker-input'))[0].value;
console.log('input value: ' + this.datepickerInputValue);

Thank you in advance!

Nope, I don't get any errors. Tried all variations of ngModel. But still get an undefined value — onmyway
– onmyway, Commented Jun 24, 2020 at 13:43

Wahab Shah · Accepted Answer · 2020-06-24 14:10:16Z

1

Have you tried (onChange) or (onSelect) on your datepicker tag? If none of those 2 works try this (ngModelChange). They should work btw.

edited Jun 24, 2020 at 14:10

answered Jun 24, 2020 at 13:45

Wahab Shah

2,2861 gold badge19 silver badges21 bronze badges

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

7 Comments

R. Richards Over a year ago

How, and where would the OP make these changes?

Wahab Shah Over a year ago

what do you mean? OP?

onmyway Over a year ago

I was able to get the required value using (ngModelChange)="dateOfBirthChange($event)". However, I'm still perplexed why ngModel and the reference does not work....

Wahab Shah Over a year ago

Yeah it happened with me as well quite a while back. They have mentioned in the documentation as well " if you want to receive every value (valid and invalid) please use the native ngModelChange output. "

Wahab Shah Over a year ago

But I am glad it helped you solve the problem :). If you think it did mark it as an answer.

|

Collectives™ on Stack Overflow

How get the input value (date) from ng2-date-picker component in Angular2

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related