这篇文章主要介绍了基于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';
declare var $: any;
@component({
selector: 'my-datepicker',
template: '<input [name]="name" [disabled]="disabled" class="ant-input" [value]="value">'
})
export class mydatepickercomponent implements oninit, 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 = new eventemitter<any>();
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 name="jssj" [(ngmodel)]="search.jssj" [options]="{format:'yyyy-mm-dd hh:mm:ss'}"></my-datepicker>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue实现a标签点击高亮方法
vue-路由导航菜单栏的高亮设置方法
vue结合echarts实现点击高亮效果的示例
以上就是基于datepicker定义自己的angular时间组件的示例的详细内容。