How to get jquery ui date picker working with angular2?

Question

I'm using angular2 and typescript with html5.

I'm trying to add the jquery ui datepicker.

I have all the librarys and the css added but the datepicker jquery code is wiring up to the html.

Heres my code:

  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

  <p>Date: <input type="text" id="datepicker"></p>

I've tried putting this in my component : $( "#datepicker" ).datepicker(); But I just get errors.

any ideas?

I get this error when I add the project to mine:

I just couldnt get the datepicker work in an angular 2 environment — AngularM, Jan 29 '16 at 16:57
PrimeNG will provide a datepicker very soon according to their roadmap. http://blog.primefaces.org/?p=3763 — Cagatay Civici, Feb 01 '16 at 10:18

Pardeep Jain · Accepted Answer · 2016-02-03T17:41:11.790

1

Well there are already many datepicker libraries available for the angular2. few of them i have posted below:

but yes obviously everyone need stylish datepicker for our project me too want same so i according to need i have created one datepicker using bootflat framework for styling. you can refer here..

https://github.com/MrPardeep/Angular2-DatePicker

hope this may help you !

edited Feb 03 '16 at 17:41

answered Jan 29 '16 at 17:05

Pardeep Jain

84,110
37
165
215

sorry but this referred repo is working fine for me...btw whats the error you have ? – Pardeep Jain Jan 29 '16 at 17:08
Which one of the three links above did you try? – AngularM Jan 29 '16 at 18:04
does it work in internet explorer? because the documentation says chrome and firefox – AngularM Feb 01 '16 at 11:44
i have't tested on IE you can test. i am not sure about this – Pardeep Jain Feb 01 '16 at 11:46
is there a demo link? so i can try it first in ie? – AngularM Feb 01 '16 at 11:49
nop sorry you have to clone the repo first then only you can use this. – Pardeep Jain Feb 01 '16 at 12:27
I've added the error image above. I just tried to add your date picker to my project – AngularM Feb 01 '16 at 12:57
The question asks about the `jQueryUI Datepicker` not for alternatives - Although it maybe helpful to list alternative as an aside, it doesn't answer the question – Luke T O'Brien Dec 08 '16 at 14:25
@LukeTO'Brien internally this datepicker is using `jQuery` so posting as answer, and i dont think this answer is too bad to be downvote isn't it ? – Pardeep Jain Dec 08 '16 at 17:21

score 1 · Answer 2 · answered Feb 03 '16 at 16:23

1

PrimeNG also provides a component for DatePicker. Live demo;

http://www.primefaces.org/primeng/#/calendar

answered Feb 03 '16 at 16:23

Cagatay Civici

6,406
1
29
34

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

See this question as a answer of how to use jQuery UI plugins in your app Whats the best way to use jquery widgets inside angular 2?

This example uses ElementRef but you could also use ViewChild

:-)

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 08 '16 at 14:31

Luke T O'Brien

2,565
3
26
38

score 0 · Answer 4 · answered Nov 05 '16 at 11:42

0

Here is another one with many configurations, live demo:
https://vlio20.github.io/ng2-date-picker/

answered Nov 05 '16 at 11:42

vlio20

8,955
18
95
180

How to get jquery ui date picker working with angular2?

4 Answers4

Linked