基于datepicker定义自己的angular时间组件的示例


Posted in Javascript onMarch 14, 2018

基于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 就可以在任意模块引入然后使用,减少代码的使用,方便维护

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
vue 过滤器filter实例详解
Mar 14 #Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 #Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 #Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 #Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 #Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 #Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 #Javascript
You might like
PHP中strtotime函数使用方法详解
2011/11/27 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
js数组的操作详解
2013/03/27 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
Python读写配置文件的方法
2015/06/03 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python如何重载模块实例解析
2018/01/25 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
大学三年的自我评价
2013/12/25 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
铁路个人事迹材料
2014/01/30 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
开学第一周总结
2015/07/16 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
Python中for后接else的语法使用
2021/05/18 Python