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

總結：通過這個組件，我們只需要調用my-datepicker 就可以在任意模塊引入然后使用，減少代碼的使用，方便維護

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。