title: how i use daterangepicker js in my angular 2 project?
body: <p>i am working in angular 2 project and want to integrate daterangepicker.js library to pop up date range picker. here link to library in case  you do not hear about it before <a href="http://www.daterangepicker.com/" rel="nofollow">http://www.daterangepicker.com/</a></p>
  
  <p>htmlcode: </p>
  
  <pre><code>&lt;input type="text" placeholder="Start - End" class="oa-search-height padd" name="daterange" &gt; &lt;/div&gt;
  </code></pre>
  
  <p>and inside my index.html </p>
  
  <pre><code> &lt;script src="./assets/js/daterangepicker.min.js" &gt; &lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href ="./assets/css/daterangepicker-bs3.min.css"/&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" &gt;
  
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   $(document).ready(function() {
   $('input[name="daterange"]').daterangepicker();
     });
      &lt;/script&gt;
  </code></pre>
  
  <p>also i create directive </p>
  
  <pre><code>  import { Directive,  ElementRef, Input, Renderer } from '@angular/Core';
  
    declare var jQuery: any;
    @Directive({
       selector: '[date-range]',
       host: {
            '(keyup)': 'dateRangePicker()'
             }
           })
    export class  DateRangeDirective {
        private element: HTMLElement;
        private renderer: Renderer;
  
        constructor(element: ElementRef, renderer: Renderer) {
               this.element = element.nativeElement;
               this.renderer = renderer;
                            }
               @Input('date-range');
               dateRangePicker(){
                 jQuery(this.element).daterangepicker();
                                 }
  
         }
  </code></pre>