我如何在我的角度2項目中使用daterangepicker js？

Question

我正在角2項目中工作，並希望集成daterangepicker.js庫來彈出日期範圍選擇器。這裏鏈接到庫中，你沒有聽到關於它的情況下，前http://www.daterangepicker.com/

htmlcode：

<input type="text" placeholder="Start - End" class="oa-search-height padd" name="daterange" > </div> 

和我的index.html內

<script src="./assets/js/daterangepicker.min.js" > </script> 
<link rel="stylesheet" type="text/css" href ="./assets/css/daterangepicker-bs3.min.css"/> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" > 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('input[name="daterange"]').daterangepicker(); 
    }); 
    </script> 

也是我創建指令

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(); 
           } 

     } 

Answer 1

幾個可用樣品，請參閱這些選項-

1. https://github.com/onehungrymind/ng2-bootstrap-daterangepicker

2. https://github.com/simpulton/ng2-daterangepicker

看看這會有所幫助。

---

編輯：

app.ts

import { Component } from '@angular/core'; 
import { DateRangePickerDirective } from 'ng2-daterangepicker'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    template: ` 
    <div class="container"> 
     <div class="jumbotron"> 
     <h2 class="text-center">Date Range Picker</h2> 
     <div class="form-group"> 
      <input daterangepicker 
       (selected)="dateSelected($event)" 
       [options]="pickerOptions" type="submit" 
       class="form-control btn btn-success"/> 
     </div> 
     </div> 
    </div> 
    `, 
    directives: [DateRangePickerDirective], 
    styles: [` 
    .jumbotron { 
     margin-top: 15px; 
     box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2); 
    } 
    input { cursor: pointer; } 
    `] 
}) 

export class AppComponent { 
    pickerOptions: Object = { 
    'showDropdowns': true, 
    'showWeekNumbers': true, 
    'timePickerIncrement': 5, 
    'autoApply': true, 
    'startDate': '05/28/2016', 
    'endDate': '06/03/2016' 
    }; 

    dateSelected(message) { 
    alert(message); 
    } 
} 

daterangepicker.directive.ts

import {Directive, ElementRef, OnInit, Input, Output, EventEmitter} from '@angular/core'; 

@Directive({ 
    selector: '[daterangepicker]' 
}) 

export class DateRangePickerDirective implements OnInit { 
    @Input() options: Object = {}; 
    @Output() selected: any = new EventEmitter(); 

    constructor(private elementRef: ElementRef) {} 

    ngOnInit() { 
    $(this.elementRef.nativeElement) 
     .daterangepicker(this.options, this.dateCallback.bind(this)); 
    } 

    dateCallback(start, end, label) { 
    let message = ` 
     New date range selected: 
     ${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')} 
     (predefined range: ${label}) 
    `; 
    this.selected.emit(message); 
    } 
}