ui-date-rangepicker.component.ts

import {AfterViewInit, Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {DaterangePickerComponent, DaterangepickerConfig} from 'ng2-daterangepicker';
import {FormGroup} from '@angular/forms';

declare const moment: any;

@Component({
  selector: 'app-date-rangepicker',
  templateUrl: 'ui-kit.components/ui-date-rangepicker/ui-date-rangepicker.component.html'
})
export class UiDateRangepickerComponent implements AfterViewInit {
  @Input() id: string;
  @Input() itemName: string;
  @Input() label: string;
  @Input() control: FormGroup;
  @Input() daysToSubtract: number;
  @Input() applyClass = 'btn-green';
  @Input() applyLabel = 'Aplicar';
  @Input() fromLabel = 'De';
  @Input() format = 'll';
  @Input() toLabel = 'até';
  @Input() cancelLabel = 'Cancelar';
  @Input() placeholder = 'Selecione um período';
  @Input() endDate = moment();
  @Input() startDate = moment().subtract(this.daysToSubtract || 29, 'days');
  @Output() selectedDate: EventEmitter<Object> = new EventEmitter();
  @Input() drops = 'up';
  @Input() opens = 'left';
  @ViewChild(DaterangePickerComponent) private picker: DaterangePickerComponent;
  public mainInput = {
    'start': this.startDate,
    'end': this.endDate
  };

  public eventLog = '';

  constructor(private daterangepickerOptions: DaterangepickerConfig) {
    this.daterangepickerOptions.skipCSS = true;
    this.daterangepickerOptions.settings = {
      locale: {
        'applyClass': this.applyClass,
        'applyLabel': this.applyLabel,
        'fromLabel': this.fromLabel,
        'format': this.format,
        'toLabel': this.toLabel,
        'cancelLabel': this.cancelLabel
      },
      showDropdowns: true,
      linkedCalendars: false,
      buttonClasses: ['btn', 'btn-xs'],
      applyClass: 'btn-primary icon-caret-right',
      cancelClass: 'btn-default',
      opens: this.opens,
      drops: this.drops,
    };
  }


  ngAfterViewInit(): void {
    this.control.controls[this.itemName].disable();
    this.picker.datePicker.opens = this.opens;
    console.log(this.picker.datePicker);
  }

  private selected(value: any, dateInput: any) {
    dateInput.start = value.start;
    dateInput.end = value.end;
    this.control.controls[this.itemName].setValue(
      `${moment(value.start).format('L')} ${this.toLabel} ${moment(value.end).format('L')}`);
    this.control.updateValueAndValidity();
    this.selectedDate.emit({
      rawValue: value,
      value: `${moment(value.start).format('L')} ${this.toLabel} ${moment(value.end).format('L')}`
    });
  }
}