datepicker를 기반으로 자신만의 각도 시간 구성 요소를 정의하는 예

이 글에서는 주로 datepicker를 기반으로 자신만의 각도 시간 구성 요소를 정의하는 방법을 소개하고 참고용으로 제공합니다.

datepicker를 기반으로 나만의 각도 시간 구성 요소를 정의하고 모든 사람과 공유하세요.

먼저 해당 파일인 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: &#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;);
 }
}

마지막으로 옵션에서 자신만의 시간 형식을 호출하고 정의합니다

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

위 내용은 제가 모두를 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 될 것입니다.

관련 기사:

vue는 태그 클릭 강조 방식을 구현합니다.

Vue-Route 탐색 메뉴 표시줄 강조 설정 방식

클릭 강조 효과를 구현하기 위해 Echarts와 결합된 vue의 예

위 내용은 datepicker를 기반으로 자신만의 각도 시간 구성 요소를 정의하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!