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

Question

我想在 Angular 2 中使用 DateRangePicker，用户可以在其中选择日期范围，并在提交按钮上将其保存在任何变量中。

我正在使用 DateTimePickerDirective 但无法获取选定的日期范围。

请帮助我处理 HTML 和 .ts 代码

日期范围网站： http://www.daterangepicker.com/

Answer 1

使用这个包装器在 Angular 2 中实现 https://www.npmjs.com/package/angular2-daterangepicker

npm install --save angular2-daterangepicker

安装后，将 jquery、bootstrap 等所有依赖项添加为 npm 包 在 .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);
      }