geo geo -4 years ago 185
Javascript Question

Angular 2 with javascript and datepicker

I am trying to create an application with angular 2 and javascript. I want to have date inputs and I have read that html 5 input type "date" is not supported from all browsers.I searched for datepickers for angular 2 and I have found a lot datepickers but with typescript support such as (
Does anyone know a easy date picker to use in an angular 2 app? ).
My question is if there is any datepicker for angular 2 supporting javascript or if there is a way to import typescipt datepickers inside javascript ?

Answer Source

In the end, this question comes down to How can I integrate a JavaScript datepicker library with Angular2?.

If you're only interested in getting back the date as a text value, e.g.: Sat Jun 18 2016, things are very simple. It all comes down to how the library gives back the selected date.

If you look at this library you'll see that it uses a text input to store the selected date:

<input type="text" id="datepicker">

All that you need to do is get the value into Angular2. That's all.

  • You can do this by using the blur event:

    <input type="text" id="datepicker" 
        #datePicker (blur)="onDateChange(datePicker.value);">
    
  • You can even asign the value to ngModel, thus achieving two-way data binding:

    <input type="text" id="datepicker" 
        #datePicker [ngModel]="date" (blur)="date = datePicker.value">
    

More or less, you've completely ported Pikaday library to Angular2.

As a final note, it's a good idea to wrap it into an free-standing Angular2 component as you'll get the benefits of reusability and encapsulation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download