Maison > interface Web > js tutoriel > Exemple de définition de votre propre composant de temps angulaire basé sur le sélecteur de date

Exemple de définition de votre propre composant de temps angulaire basé sur le sélecteur de date

亚连
Libérer: 2018-05-30 15:20:47
original
1537 Les gens l'ont consulté

Cet article présente principalement la définition de votre propre composant de temps angulaire basé sur le sélecteur de date. Maintenant, je le partage avec vous et le donne comme référence.

Définissez votre propre composant de temps angulaire basé sur le sélecteur de date et partagez-le avec tout le monde.

Tout d'abord, introduisez les fichiers jquery et datepicker correspondants, comme suit

 "styles": [
   "styles.less",
   "./assets/lib/datetimepicker/datetimepicker.css"
  ],
  "scripts": [
   "assets/lib/jquery/jquery.min.js",
   "./assets/lib/datetimepicker/datetimepicker.js",
  ],
Copier après la connexion

Ensuite le fichier 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;);
 }
}
Copier après la connexion

La dernière étape consiste à appeler, définir le vôtre format horaire en option

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Vue implémente une méthode de mise en évidence des clics d'étiquettes

Méthode de configuration Vue-Highlight pour la barre de menu de navigation de routage

Un exemple d'utilisation de vue combinée avec Echarts pour obtenir un effet de mise en évidence des clics

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal