由于angular2兴起不久，相关插件还是很少，所以有时候不得不用一些jquery插件来完成项目，
那么如何把jquery插件放到angular2中呢？采用自定义指令！
在上下文之前要引入jquery，这点不再描述
首先创建一个指令，采用@input方式，来获取jquery插件所需要的参数。
在ngOnChanges时，也就是参数通过@input传入时，初始化jquery插件，
初始化jquery插件需要获取dom元素，所以我们引入ElementRef，用来获取dom元素
这里需要讲一下，jquery中回调函数，如果直接使用this,回调是无法获取angular的函数的
所以这里采用bind的形式，把this传递进去。这样在angular中的函数才会被正确调用。
// 引入jquery.daterangepicker插件相关JS和css,Css打包时需要打包成单个文件，或者直接在html单独引用
// 如何单独打包请看下节代码
// 如何单独打包请看下节代码
require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.js');
require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.css');
// 自定义指令
@Directive({
selector: '[dateRangePicker]',})
export class DateRangePicker {
/**
- jquery.daterangepicker插件所需的参数
- 参数:http://www.daterangepicker.com/#options
*/
@Input() public dateRangePickerOptions: IJQueryDateRangePicker;
// 选中事件
@Output() selected: any = new EventEmitter();
/**
- 初始化
- @param _elementRef
*/
constructor(private _elementRef: ElementRef) {
}
/**
- 属性发生更改时
- @private
*/
ngOnChanges() {
$(this._elementRef.nativeElement).daterangepicker(this.dateRangePickerOptions,this.dateCallback.bind(this));
}
/**
- 时间发生更改时使用emit传递事件
- @private
*/
dateCallback(start,end) {
let format = "YYYY-MM-DD";
if (this.dateRangePickerOptions.locale.format) {
format = this.dateRangePickerOptions.locale.format;
}
let date = {
startDate: start.format(format),endDate: end.format(format),}
this.selected.emit(date);
}
}
@Component({
selector: 'dashboard',template: `
<div class="form-group">
<label for="startDate">{date.startDate}
<input
dateRangePicker
[dateRangePickerOptions]="option"
(selected)="dateSelected($event)"
type="text"
class="form-control">
`,directives: [DateRangePicker]
})
export class Dashboard {
selector: 'dashboard',template: `
<div class="form-group">
<label for="startDate">{date.startDate}
<input
dateRangePicker
[dateRangePickerOptions]="option"
(selected)="dateSelected($event)"
type="text"
class="form-control">
/**
- 当前选中的时间
*/
public date: any
/**
- jquery时间插件参数
*/
private option: Object = {
locale: {
format: "YYYY-MM-DD",separator: " 至 ",applyLabel: "确定",cancelLabel: '取消',fromLabel: '起始时间',toLabel: '结束时间',customRangeLabel: '自定义',daysOfWeek: ['日','一','二','三','四','五','六'],monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],firstDay: 1
},};
constructor() {
}
/**
- emit回调事件，获取选中时间
- @param date
*/
dateSelected(date) {
this.date = date;
}
}
