基于datepicker定義自己的angular時間組件的示例
更新時間:2018年03月14日 08:36:48 作者:阿踏
這篇文章主要介紹了基于datepicker定義自己的angular時間組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
基于datepicker定義自己的angular時間組件,分享給大家。
首先是引入相應(yīng)的文件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');
}
}
最后是調(diào)用,option里面定義自己的時間格式
復(fù)制代碼 代碼如下:
<my-datepicker name="jssj" [(ngModel)]="search.jssj" [options]="{format:'YYYY-MM-DD hh:mm:ss'}"></my-datepicker>
總結(jié):通過這個組件,我們只需要調(diào)用my-datepicker 就可以在任意模塊引入然后使用,減少代碼的使用,方便維護
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- AngularJS 日期格式化詳解
- 詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時間實例
- Angularjs中使用layDate日期控件示例
- Angular指令封裝jQuery日期時間插件datetimepicker實現(xiàn)雙向綁定示例
- Angularjs驗證用戶輸入的字符串是否為日期時間
- Angular4.0中引入laydate.js日期插件的方法教程
- angularjs封裝bootstrap時間插件datetimepicker
- angularjs實現(xiàn)時間軸效果的示例代碼
- bootstrap timepicker在angular中取值并轉(zhuǎn)化為時間戳
- AngularJS日期格式化常見操作實例分析
相關(guān)文章
詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
使用ngView配合AngularJS應(yīng)用實現(xiàn)動畫效果的方法
這篇文章主要介紹了使用ngView配合AngularJS應(yīng)用實現(xiàn)動畫效果的方法,AngularJS是十分熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
AngularJS實現(xiàn)表單手動驗證和表單自動驗證
本文是對AngularJS表單驗證,手動驗證或自動驗證的講解,對學(xué)習(xí)JavaScript編程技術(shù)有所幫助,感興趣的小伙伴們可以參考一下2015-12-12

