这篇文章主要介绍了基于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: '' }) 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(); 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 就可以在任意模块引入然后使用，减少代码的使用，方便维护
以上就是基于datepicker定义自己的angular时间组件的示例的详细内容，更多请关注0133技术站其它相关文章！
