Maison > Article > interface Web > Exemple de définition de votre propre composant de temps angulaire basé sur le sélecteur de date
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", ],
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: '<input [name]="name" [disabled]="disabled" class="ant-input" [value]="value">' }) 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<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 = ''; } 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'); } }
La dernière étape consiste à appeler, définir le vôtre format horaire en option
<my-datepicker name="jssj" [(ngModel)]="search.jssj" [options]="{format:'YYYY-MM-DD hh:mm:ss'}"></my-datepicker>
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
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!