基于datepicker定义自己的angular时间组件的示例

前端之家收集整理的这篇文章主要介绍了基于datepicker定义自己的angular时间组件的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基于datepicker定义自己的angular时间组件,分享给大家。

首先是引入相应的文件jquery和datepicker,如下

然后是ts文件

declare var $: any;

@Component({
selector: 'my-datepicker',template: '<input [name]="name" [disabled]="disabled" class="ant-input" [value]="value">'
})

export class MyDatePickerComponent implements OnInit,ControlValueAccessor {
constructor(
private _element: ElementRef,public _control: NgControl
) {
if (this._control) {
this._control.valueAccessor = this;
}
}

@Input()
name:string;

@Input()
disabled:string;

@Input()
options:Object = {};

@Input('ngModel')
value: string;

@Output() onChoose = new EventEmitter();

defaults: Object;

_onChange = (value: any) => {};

writeValue(value: string) {
if (value) {
this.value = value;
}
}

registerOnChange(fn: (value: any) => void) {
this._onChange = fn;
}

registerOnTouched(fn: any) {

}

ngOnInit() {
if (this.value == undefined) {
this.value = '';
}

let _this = this;
this.defaults = {
format: 'YYYY-MM-DD',isToday:true,choosefun: function(ele,data){
_this._choose(data);
},clearfun: function(){
_this._clear();
},closefun: function() {
_this._close();
}
};
}

ngAfterViewInit() {
let options = $.extend({},this.defaults,this.options);

$(this._element.nativeElement).find('input').jeDate(options)
.on('click',function(e) {
e.stopPropagation();

$(this).addClass('focus').blur();

});
}

private _choose(value: string) {
this._onChange(value);

this.onChoose.emit(value); // 选中事件
}

private _clear() {
this._onChange('');

this.onChoose.emit(''); // 选中事件
}

private _close() {
$(this._element.nativeElement).find('input').removeClass('focus');
}
}

最后是调用,option里面定义自己的时间格式

代码如下:

总结:通过这个组件,我们只需要调用my-datepicker 就可以在任意模块引入然后使用,减少代码的使用,方便维护

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章