Example of defining your own angular time component based on datepicker

This article mainly introduces defining your own angular time component based on datepicker. Now I will share it with you and give you a reference.

Define your own angular time component based on datepicker and share it with everyone.

First, introduce the corresponding files jquery and datepicker, as follows

 "styles": [
   "styles.less",
   "./assets/lib/datetimepicker/datetimepicker.css"
  ],
  "scripts": [
   "assets/lib/jquery/jquery.min.js",
   "./assets/lib/datetimepicker/datetimepicker.js",
  ],

Then the ts file

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: &#39;<input [name]="name" [disabled]="disabled" class="ant-input" [value]="value">&#39;
})

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(&#39;ngModel&#39;)
 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 = &#39;&#39;;
  }

  let _this = this;
  this.defaults = {
       format: &#39;YYYY-MM-DD&#39;,
       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(&#39;input&#39;).jeDate(options)
   .on(&#39;click&#39;, function(e) {
    e.stopPropagation();

    $(this).addClass(&#39;focus&#39;).blur();
   });
 }

 private _choose(value: string) {
  this._onChange(value);

  this.onChoose.emit(value); // 选中事件
 }

 private _clear() {
  this._onChange(&#39;&#39;);

  this.onChoose.emit(&#39;&#39;); // 选中事件
 }

 private _close() {
  $(this._element.nativeElement).find(&#39;input&#39;).removeClass(&#39;focus&#39;);
 }
}

Finally, call and define your own time format in the option

<my-datepicker  name="jssj" [(ngModel)]="search.jssj" [options]="{format:&#39;YYYY-MM-DD hh:mm:ss&#39;}"></my-datepicker>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

vue implements a label click highlighting method

##Vue-Highlight setting method of routing navigation menu bar

Example of vue combined with Echarts to achieve click highlighting effect

The above is the detailed content of Example of defining your own angular time component based on datepicker. For more information, please follow other related articles on the PHP Chinese website!