基于datepicker定義自己的angular時(shí)間組件的示例
基于datepicker定義自己的angular時(shí)間組件,分享給大家。
首先是引入相應(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里面定義自己的時(shí)間格式
<my-datepicker name="jssj" [(ngModel)]="search.jssj" [options]="{format:'YYYY-MM-DD hh:mm:ss'}"></my-datepicker>
總結(jié):通過(guò)這個(gè)組件,我們只需要調(diào)用my-datepicker 就可以在任意模塊引入然后使用,減少代碼的使用,方便維護(hù)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- AngularJS 日期格式化詳解
- 詳解Angularjs在控制器(controller.js)中使用過(guò)濾器($filter)格式化日期/時(shí)間實(shí)例
- Angularjs中使用layDate日期控件示例
- Angular指令封裝jQuery日期時(shí)間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
- Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間
- Angular4.0中引入laydate.js日期插件的方法教程
- angularjs封裝bootstrap時(shí)間插件datetimepicker
- angularjs實(shí)現(xiàn)時(shí)間軸效果的示例代碼
- bootstrap timepicker在angular中取值并轉(zhuǎn)化為時(shí)間戳
- AngularJS日期格式化常見(jiàn)操作實(shí)例分析
相關(guān)文章
淺談Angular HttpClient簡(jiǎn)單入門(mén)
本篇文章主要介紹了淺談Angular HttpClient 簡(jiǎn)單入門(mén),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05Angular4實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果
這篇文章主要介紹了Angular4實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10詳解Webstorm 下的Angular2.0開(kāi)發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開(kāi)發(fā)之路(圖文) ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12使用ngView配合AngularJS應(yīng)用實(shí)現(xiàn)動(dòng)畫(huà)效果的方法
這篇文章主要介紹了使用ngView配合AngularJS應(yīng)用實(shí)現(xiàn)動(dòng)畫(huà)效果的方法,AngularJS是十分熱門(mén)的JavaScript庫(kù),需要的朋友可以參考下2015-06-06AngularJS實(shí)現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)進(jìn)度條功能,結(jié)合具體完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)進(jìn)度條功能的原理、相關(guān)知識(shí)點(diǎn)與注意事項(xiàng),需要的朋友可以參考下2017-07-07AngularJS實(shí)現(xiàn)表單手動(dòng)驗(yàn)證和表單自動(dòng)驗(yàn)證
本文是對(duì)AngularJS表單驗(yàn)證,手動(dòng)驗(yàn)證或自動(dòng)驗(yàn)證的講解,對(duì)學(xué)習(xí)JavaScript編程技術(shù)有所幫助,感興趣的小伙伴們可以參考一下2015-12-12