Beispiel für die Definition Ihrer eigenen Winkelzeitkomponente basierend auf Datepicker

In diesem Artikel wird hauptsächlich die Definition Ihrer eigenen Winkelzeitkomponente basierend auf der Datumsauswahl vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Definieren Sie Ihre eigene Winkelzeitkomponente basierend auf dem Datepicker und teilen Sie sie mit allen.

Fügen Sie zunächst die entsprechenden Dateien jquery und datepicker wie folgt ein

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

Dann die ts-Datei

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;);
 }
}

Zum Schluss rufen Sie in der Option Ihr eigenes Zeitformat auf und definieren es

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

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Vue implementiert eine Hervorhebungsmethode für Etikettenklicks

Vue-Highlight-Einstellungsmethode für die Navigationsmenüleiste des Routings

Ein Beispiel für die Verwendung von Vue in Kombination mit Echarts, um einen Klick-Hervorhebungseffekt zu erzielen

Das obige ist der detaillierte Inhalt vonBeispiel für die Definition Ihrer eigenen Winkelzeitkomponente basierend auf Datepicker. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!