ace-component/src/app/components/ace-date-picker/ace-date-picker.component.ts

ace-components for ewms

import { Component, OnInit, ViewEncapsulation, Input,EventEmitter, Output, ViewChild,ElementRef, OnChanges } from '@angular/core';

@Component({
  selector: 'ace-date-picker',
  templateUrl: './ace-date-picker.component.html',
  styleUrls: ['./ace-date-picker.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AceDatePickerComponent implements OnInit {
  @ViewChild('datePicker') datePicker;
  @Input() placeholder:string = "Select a min date";
  @Input() mode:string = "daytime";
  @Input() min:string; //最小时间
  minDate=null;
  maxDate=null;
  @Input() max:string; //最大时间
  @Output() onchange = new EventEmitter();
  public value:string; //选中的值
  public format='YYYY-MM-DD HH:mm:ss';
  public showTime:boolean=true;
  constructor(
    private el:ElementRef
  ) {};

  changed(value){
    this.onchange.emit(value);
  };

  ngOnInit() {
    this.setMode();
  }
  
  ngOnChanges(){
    if(this.max){
      this.maxDate = new Date(this.max.replace(/-/g,'/'));
    }
    if(this.min){
      this.minDate = new Date(this.min.replace(/-/g,'/'));
    }
    
  };

  setMode(){
    if(this.mode=='day'){
      this.format ='YYYY-MM-DD';
      this.showTime = false;
    }
  };

  disabledDate=(date)=>{
    var result = false;
    if(this.maxDate&&date.getTime()>this.maxDate.getTime()){
      
      result = true;
    }
    if(this.minDate&&date.getTime()<this.minDate.getTime()){
      result =  true
    };
    return result;
  }
}