Angular 2에서 DateRangePicker 지시문을 사용하는 방법은 무엇입니까?

Question

사용자가 날짜 범위를 선택할 수있는 각도 2의 DateRangePicker를 사용하고 제출 버튼에 모든 변수에 저장해야합니다.

DateTimePickerDirective를 사용하고 있지만 선택한 기간을 가져올 수 없습니다. 모든 종속성을 추가, http://www.daterangepicker.com/

Answer 1

사용이 래퍼가이 장치를 설치 한 후

npm install --save angular2-daterangepicker 

각 2 https://www.npmjs.com/package/angular2-daterangepicker에서 구현하기 :

HTML 및 .TS 코드

DATERANGE 웹 사이트를 제발 도와주세요 jquery, bootstrap .. npm 패키지로. in .html

.TS에서

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

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