基于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 相关文章推荐
popdiv
Jul 14 Javascript
Z-Blog中用到的js代码
Mar 15 Javascript
javascript html 静态页面传参数
Apr 10 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
js实现烟花特效
Mar 02 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实现微信网页授权开发教程
2016/01/19 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
在python中实现对list求和及求积
2018/11/14 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Jupyter加载文件的实现方法
2020/04/14 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
社区庆八一活动方案
2014/02/02 职场文书
事假请假条范文
2014/04/11 职场文书
计生专干事迹
2014/05/28 职场文书
禁毒主题班会教案
2015/08/14 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python