title: JavaScript function wrapped in TypeScript function is not working
body: <p>I am trying to implement a <code>datepicker</code> whose button upon being clicked displays a calendar. For this purpose, I have wrapped <code>datepicker()</code> (JavaScript function) in <code>pickDate()</code> (user defined TypeScript function) but the button is not <strong>clicking/displaying anything</strong>. What could be going wrong?</p>
  
  <p>Below are my code snippets</p>
  
  <p><strong>HTML file</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class='col-sm-6'&gt;
        &lt;div class="form-group"&gt;
          &lt;div class='input-group date' id='datetimepicker1'&gt;
            &lt;input type='text' class="form-control" /&gt;
            &lt;span class="input-group-addon" (click)="pickDate()"&gt;
              &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>.ts file</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  import * as $ from 'jquery';
  
  @Component({
      selector : 'pm-datepicker', /** This is a directive which implies this Component's template can be
      used as any other Component's template.  */
      templateUrl : './datepicker.component.html' /** Path to our HTML file */
  })
  
  export class DatePickerComponent {
  
      pickDate() {
          console.log(5); /** To check if something is logging */
          $('#datetimepicker1').datepicker();
      }
  }
  </code></pre>
  
  <p><strong>Errors on console</strong></p>
  
  <pre><code>ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).datepicker is not a function
      at DatePickerComponent.webpackJsonp.../../../../../src/app/datepicker/datepicker.component.ts.DatePickerComponent.pickDate (datepicker.component.ts:18)
      at Object.eval [as handleEvent] (DatePickerComponent.html:21)
      at handleEvent (core.es5.js:11998)
      at callWithDebugContext (core.es5.js:13467)
      at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
      at dispatchEvent (core.es5.js:8614)
      at core.es5.js:9228
      at HTMLSpanElement.&lt;anonymous&gt; (platform-browser.es5.js:2648)
      at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
      at Object.onInvokeTask (core.es5.js:3881)
  </code></pre>
  
  <p><strong>Edit 2</strong></p>
  
  <p>I carried out the following steps : </p>
  
  <pre><code>npm install jquery-ui --save
  </code></pre>
  
  <p>and then I included the script URLs with respect to <code>jQuery</code> and <code>jQuery-ui</code> in <strong><code>index.html</code></strong> but the errors still persist. Is there anything specifically I need to import in my <code>component.ts</code> or <code>app.module.ts</code>?</p>