我如何在我的 Angular 2 项目中使用 Daterangepicker JS

how i use daterangepicker js in my angular 2 project?

本文关键字：Daterangepicker JS 项目 我的 Angular      更新时间：2023-09-26

我在 Angular 2 项目中工作，想要集成日期范围选择器.js库以弹出日期范围选择器。 这里链接到图书馆，以防您在 http://www.daterangepicker.com/之前没有听说过它

网页代码： 

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

在我的索引内.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();
                               }
       }

有几个可用的样本，请参阅这些选项-

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

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

看看这是否有帮助。

编辑：

应用程序

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);
  }
}
相关文章：