我如何在我的角度2项目中使用daterangepicker js？

Question

我在angular 2项目中工作，想要将daterangepicker.js库集成到弹出日期范围选择器中。这里链接到库，以防你在http://www.daterangepicker.com/

之前没有听说过它

htmlcode：

<input type="text" placeholder="Start - End" class="oa-search-height padd" name="daterange" > </div>

并在我的index.html

中

 <script src="./assets/js/daterangepicker.min.js" > </script>
<link rel="stylesheet" type="text/css" href ="./assets/css/daterangepicker-bs3.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('input[name="daterange"]').daterangepicker();
   });
    </script>

我也创建了指令

  import { Directive,  ElementRef, Input, Renderer } from '@angular/Core';

  declare var jQuery: any;
  @Directive({
     selector: '[date-range]',
     host: {
          '(keyup)': 'dateRangePicker()'
           }
         })
  export class  DateRangeDirective {
      private element: HTMLElement;
      private renderer: Renderer;

      constructor(element: ElementRef, renderer: Renderer) {
             this.element = element.nativeElement;
             this.renderer = renderer;
                          }
             @Input('date-range');
             dateRangePicker(){
               jQuery(this.element).daterangepicker();
                               }

       }

Answer 1

可提供多种样品，请参阅以下选项 -

1. https://github.com/onehungrymind/ng2-bootstrap-daterangepicker

2. https://github.com/simpulton/ng2-daterangepicker

看看这是否有帮助。

修改

  

app.ts

import { Component } from '@angular/core';
import { DateRangePickerDirective } from 'ng2-daterangepicker';

@Component({
  moduleId: module.id,
  selector: 'app',
  template: `
    <div class="container">
      <div class="jumbotron">
        <h2 class="text-center">Date Range Picker</h2>
        <div class="form-group">
          <input daterangepicker
                (selected)="dateSelected($event)"
                [options]="pickerOptions" type="submit"
                class="form-control btn btn-success"/>
        </div>
      </div>
    </div>
  `,
  directives: [DateRangePickerDirective],
  styles: [`
    .jumbotron {
      margin-top: 15px;
      box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
    }
    input { cursor: pointer; }
  `]
})

export class AppComponent {
  pickerOptions: Object = {
    'showDropdowns': true,
    'showWeekNumbers': true,
    'timePickerIncrement': 5,
    'autoApply': true,
    'startDate': '05/28/2016',
    'endDate': '06/03/2016'
  };

  dateSelected(message) {
    alert(message);
  }
}

  

daterangepicker.directive.ts

import {Directive, ElementRef, OnInit, Input, Output, EventEmitter} from '@angular/core';

@Directive({
  selector: '[daterangepicker]'
})

export class DateRangePickerDirective implements OnInit {
  @Input() options: Object = {};
  @Output() selected: any = new EventEmitter();

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    $(this.elementRef.nativeElement)
      .daterangepicker(this.options, this.dateCallback.bind(this));
  }

  dateCallback(start, end, label) {
    let message = `
      New date range selected:
      ${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')}
      (predefined range: ${label})
    `;
    this.selected.emit(message);
  }
}