datepickerrh定义自己的angular时间组件-创新互联

这篇文章将为大家详细讲解有关datepickerrh 定义自己的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里面定义自己的时间格式

关于“datepickerrh 定义自己的angular时间组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。