CODEWITHSUNDEEP
htmlangulartypescript
onmyway
onmyway

Reputation: 1505

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

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!

Upvotes: 0

Views: 1259

Answers (1)

Wahab Shah
Wahab Shah

Reputation: 2256

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

Upvotes: 1

Related Questions