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

Question

我想在 Angular 2 中使用 DateRangePicker，用户可以在其中 select 日期范围和提交按钮，它应该保存在任何变量中。

我正在使用 DateTimePickerDirective 但无法获得 selected 日期范围。

请帮助我 HTML 和 .ts 代码

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

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

How to use DateRangePicker directive in Angular 2?

daterangepicker

typescript

bootstrap-daterangepicker

angular