基于datepicker定义自己的angular时间组件的示例
基于datepicker定义自己的angular时间组件，分享给大家。
首先是引入相应的文件jquery和datepicker，如下
"styles":[ "styles.less", "./assets/lib/datetimepicker/datetimepicker.css" ], "scripts":[ "assets/lib/jquery/jquery.min.js", "./assets/lib/datetimepicker/datetimepicker.js", ],
然后是ts文件
import{Component,EventEmitter,OnInit,AfterViewInit,ElementRef,Input,Output}from'@angular/core';
import{ControlValueAccessor,NgControl}from'@angular/forms';
declarevar$:any;
@Component({
selector:'my-datepicker',
template:''
})
exportclassMyDatePickerComponentimplementsOnInit,AfterViewInit,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=newEventEmitter();
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(){
letoptions=$.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就可以在任意模块引入然后使用，减少代码的使用，方便维护
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。