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 ..作为npm包在.html

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

in .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指令？

1 个答案: