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 ?
-
1How about this one? You can see it working with Angular2 here.Cosmin Ababei– Cosmin Ababei2016-06-01 11:09:48 +00:00Commented Jun 1, 2016 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– geo2016-06-01 11:41:59 +00:00Commented Jun 1, 2016 at 11:41
-
I tried to create a custom datePicker based on the link that you sent to me.Here is the example linkgeo– geo2016-06-02 10:57:14 +00:00Commented Jun 2, 2016 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– Kutyel2016-06-02 12:51:57 +00:00Commented Jun 2, 2016 at 12:51
Add a comment
|
3 Answers
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.
3 Comments
papaiatis
And what if I want it to be two-way bound? How would that look like?
Cosmin Ababei
[ngModel] and (blur) act as two-way data binding. In the end, [(ngModel)] is the same as [ngModel] and (ngModelChange) - source
Sebastian Thomas
@CosminAbabei I dont get how you instantiate pikadate against the input, help?
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
6 Comments
geo
Again this can be used with typescript or is there a way to use it with javascript ?
null canvas
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
I am not sure I understand. For me typescript == javascript
null canvas
|
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/
