这篇文章主要介绍了基于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 { ControlValueAccessor, NgControl } from '@angular/forms';declare var $: any;@Component({ selector: 'my-datepicker', template: ''})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(); 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'); }}
登录后复制
最后是调用,option里面定义自己的时间格式
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue实现a标签点击高亮方法
Vue-路由导航菜单栏的高亮设置方法
vue结合Echarts实现点击高亮效果的示例
以上就是基于datepicker定义自己的angular时间组件的示例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753490.html
