How to get jquery ui date picker working with angular2?

Question

How to get jquery ui date picker working with angular2?

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.

lib: https://jqueryui.com/datepicker/

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:

Answer 1

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

• https://github.com/kekeh/mydatepicker
• https://github.com/jkuri/ng2-datepicker
• http://www.primefaces.org/primeng/#/calendar

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 !

Answer 2

PrimeNG also provides a component for DatePicker. Live demo;

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

Answer 3

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

Answer 4

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

:-)