DateRangePickerディレクティブをAngular 2で使用する方法は？

Question

DateRangePickerをAngular 2で使いたい場合、ユーザーは日付範囲を選択でき、送信ボタンを押すと任意の変数に保存する必要があります。

DateTimePickerDirectiveを使用していますが、選択した期間を取得できません。

HTMLと.TSコード

DATERANGEのウェブサイトで私を助けてください：、これをインストールした後、角2 https://www.npmjs.com/package/angular2-daterangepicker

npm install --save angular2-daterangepicker 

に実装するすべての依存関係を追加する http://www.daterangepicker.com/

Answer 1

使用このラッパーjquery、bootstrap ..のようにnpmパッケージ 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); 
     }