基于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>

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