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

基于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 $http://: any;

@Component({

selector: 'my-datepicker',

template: ''

})

export class MyDatePickerComphttp://onent 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();

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 UrWCRriMct就可以在任意模块引入然后使用，减少代码的使用，方便维护

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。