Example of defining your own angular time component based on datepicker-JS Tutorial-php.cn

Example of defining your own angular time component based on datepicker

亚连

Release： 2018-05-30 15:20:47

Original

1471 people have browsed it

This article mainly introduces defining your own angular time component based on datepicker. Now I will share it with you and give you a reference.

Define your own angular time component based on datepicker and share it with everyone.

First, introduce the corresponding files jquery and datepicker, as follows

 "styles": [
   "styles.less",
   "./assets/lib/datetimepicker/datetimepicker.css"
  ],
  "scripts": [
   "assets/lib/jquery/jquery.min.js",
   "./assets/lib/datetimepicker/datetimepicker.js",
  ],

Copy after login

Then the ts file

import { Component, EventEmitter, OnInit, AfterViewInit, ElementRef, Input, Output } from &#39;@angular/core&#39;;
import { ControlValueAccessor, NgControl } from &#39;@angular/forms&#39;;

declare var $: any;

@Component({
 selector: &#39;my-datepicker&#39;,
 template: &#39;<input [name]="name" [disabled]="disabled" class="ant-input" [value]="value">&#39;
})

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(&#39;ngModel&#39;)
 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 = &#39;&#39;;
  }

  let _this = this;
  this.defaults = {
       format: &#39;YYYY-MM-DD&#39;,
       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(&#39;input&#39;).jeDate(options)
   .on(&#39;click&#39;, function(e) {
    e.stopPropagation();

    $(this).addClass(&#39;focus&#39;).blur();
   });
 }

 private _choose(value: string) {
  this._onChange(value);

  this.onChoose.emit(value); // 选中事件
 }

 private _clear() {
  this._onChange(&#39;&#39;);

  this.onChoose.emit(&#39;&#39;); // 选中事件
 }

 private _close() {
  $(this._element.nativeElement).find(&#39;input&#39;).removeClass(&#39;focus&#39;);
 }
}

Copy after login

Finally, call and define your own time format in the option

<my-datepicker  name="jssj" [(ngModel)]="search.jssj" [options]="{format:&#39;YYYY-MM-DD hh:mm:ss&#39;}"></my-datepicker>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

vue implements a label click highlighting method

##Vue-Highlight setting method of routing navigation menu bar

Example of vue combined with Echarts to achieve click highlighting effect

The above is the detailed content of Example of defining your own angular time component based on datepicker. For more information, please follow other related articles on the PHP Chinese website!