基于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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 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
通过html表格发电子邮件
2006/10/09 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python实现祝福弹窗效果
2019/04/07 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
python打开音乐文件的实例方法
2020/07/21 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
农村党员一句话承诺
2014/05/30 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Python基础之Socket通信原理
2021/04/22 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS