基于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 相关文章推荐
JSON字符串转JSON对象
Jul 31 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
JS实现前端动态分页码代码实例
Jun 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP中几个常用的魔术常量
2012/02/23 PHP
深入apache host的配置详解
2013/06/09 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python autoescape标签用法解析
2020/01/17 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
销售顾问岗位职责
2014/02/25 职场文书
教职工代表大会主持词
2014/04/01 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
合作协议书格式
2014/08/19 职场文书
2014年工程工作总结
2014/11/25 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS