如何在Angular 2中使用DateRangePicker指令？

Question

我想在Angular 2中使用DateRangePicker，用戶可以選擇日期範圍，並在提交按鈕時將它保存在任何變量中。

我使用的是DateTimePickerDirective，但無法獲取選定的日期範圍。

請幫我HTML和.TS碼

DATERANGE網站： http://www.daterangepicker.com/

Answer 1

使用該包裝在角2 https://www.npmjs.com/package/angular2-daterangepicker

npm install --save angular2-daterangepicker 

實現安裝此之後，添加所有的依賴像jquery，bootstrap .. as npm packages in .html

<input daterangepicker 
       (selected)="dateSelected($event)" 
       [options]="pickerOptions" type="submit" 
       [disabled]="disabled" 
       value="{{datelabel}}" 
       class="form-control btn btn-primary inputField"/> 

在.TS

@Output() selectedDate:EventEmitter<any> = new EventEmitter(false); 

     public disabled:boolean; 

     private pickerOptions: Object = { 
     'showDropdowns': true, 
     'showWeekNumbers': true, 
     'timePickerIncrement': 5, 
     'autoApply': true, 
     'startDate': '04/27/2016', 
     'endDate': '07/27/2016' 
     }; 

     private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate']; 
     private format:string = this.formats[0]; 
     private startdate: Date = new Date(); 
     private enddate: Date = new Date(); 
     private datelabel: string = 'Please choose a date'; 
     private selected: any; 

     constructor() { 
     this.disabled = false; 
     this.selected = {}; 
     } 

     private dateSelected(message: any) { 
     this.selectedDate.emit(message); 
     }