南强小屋 Design By 杰米
基于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: '<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');
}
}
最后是调用,option里面定义自己的时间格式
复制代码 代码如下:
<my-datepicker name="jssj" [(ngModel)]="search.jssj" [options]="{format:'YYYY-MM-DD hh:mm:ss'}"></my-datepicker>
总结:通过这个组件,我们只需要调用my-datepicker 就可以在任意模块引入然后使用,减少代码的使用,方便维护
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无基于datepicker定义自己的angular时间组件的示例的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?