Angular 2 with javascript and datepicker

Question

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 ?

How about [this one](https://eonasdan.github.io/bootstrap-datetimepicker/)? You can see it working with Angular2 [here](http://stackoverflow.com/questions/36087762/how-to-detect-bootstrap-datetimepicker-change-events-within-angular2/36090026#36090026). — Cosmin Ababei, Jun 01 '16 at 11:09
Yes, that seems to work and I understand that the best solution in order to avoid to have jquery inside controllers is to try to wrap it to a new component and use it. — geo, Jun 01 '16 at 11:41
I tried to create a custom datePicker based on the link that you sent to me.Here is the example [link](https://plnkr.co/edit/p064JaXJ02spSw8T8jcN?p=preview) — geo, Jun 02 '16 at 10:57
@geo please don't fall again in the same mistake that happened in Angular 1... to add JQuery to Angular 2... there is no need at ALL... check the answer bellow! — Kutyel, Jun 02 '16 at 12:51

Cosmin Ababei · Accepted Answer · 2017-03-02T07:55:42.693

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.

And what if I want it to be two-way bound? How would that look like? — papaiatis, Feb 27 '17 at 18:38
`[ngModel]` and `(blur)` act as two-way data binding. In the end, `[(ngModel)]` is the same as `[ngModel]` and `(ngModelChange)` - [source](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#inside-span-class-syntax-ngmodel-span-) — Cosmin Ababei, Mar 02 '17 at 07:54
@CosminAbabei I dont get how you instantiate pikadate against the input, help? — Sebastian Thomas, Apr 13 '17 at 11:38

null canvas · Answer 2 · 2017-02-24T12:30:41.760

2

Visit ng2-bootstrap, it has 800 stars, and take a look on this date picker, https://github.com/valor-software/ng2-bootstrap/blob/development/src/datepicker/datepicker.component.ts

if you want a javascript datepicker, just use the one from bootstrap

http://www.eyecon.ro/bootstrap-datepicker/

edited Feb 24 '17 at 12:30

answered Jun 02 '16 at 17:56

null canvas

10,201
2
15
18

Again this can be used with typescript or is there a way to use it with javascript ? – geo Jun 03 '16 at 07:49
of course, it can be used with typescript, it's written in typescript. But you really want the js datepicker, see the link above – null canvas Jun 03 '16 at 09:07
Yes, I have seen that and in particular this is what I have used in order to create a custom datepicker as you can see here [link](https://plnkr.co/edit/p064JaXJ02spSw8T8jcN?p=preview). So, my question is if it exists something else or if I can use the "typescript" datepicker with javascript. – geo Jun 03 '16 at 09:23
I am not sure I understand. For me typescript == javascript – null canvas Jun 03 '16 at 15:16
the first url does not work anymore – geo Feb 24 '17 at 11:07
1

updated link https://github.com/valor-software/ng2-bootstrap/blob/development/src/datepicker/datepicker.component.ts – null canvas Feb 24 '17 at 12:30

score 0 · Answer 3 · answered Jun 03 '16 at 12:55

You can use jQuery Datepicker, it provides a lot of functionalities and also you will have a full control on the functionalities.

For example: You cannot limit your dateRange in html-datepicker But jQuery-datepicker you can limit the date ranges

You can download it from here: http://jqueryui.com/download/

Angular 2 with javascript and datepicker

3 Answers3