基于datepicker定义自己的angular时间组件的示例
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了基于datepicker定义自己的angular时间组件,长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
基于datepicker定义自己的angular时间组件,分享给大家。
首先是引入相应的文件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 { ControlValueAessor, 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, ControlValueAessor { constructor( private _element: ElementRef, public _control: NgControl ) { if (this._control) { this._control.valueAessor = 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.sPropagation(); $(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'); } }
最后是调用,option里面定义自己的时间格式
代码如下:
<my-datepicker name="jssj" [(ngModel)]="search.jssj" [options]="{format:'YYYY-MM-DD hh:mm:ss'}"></my-datepicker>
总结:通过这个组件,我们只需要调用my-datepicker 就可以在任意模块引入然后使用,减少代码的使用,方便维护
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程