between-date.component.ts

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { FormControl } from '@angular/forms';

import { Criterion, BetweenCriterion } from '../../../store/model';

@Component({
    selector: 'app-between-date',
    templateUrl: 'between-date.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class BetweenDateComponent {
    @Input() id: number;
    @Input() operator: string;
    @Input() label: string;
    @Input()
    set criterion(criterion: Criterion) {
        this.getDefault(criterion);
    }
    @Output() addCriterion: EventEmitter<BetweenCriterion> = new EventEmitter();
    @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();

    field = new FormControl('');

    emitAdd(): void {
        const dateMin = this.getDateString(this.field.value[0]);
        const dateMax = this.getDateString(this.field.value[1]);
        const fd = new BetweenCriterion(this.id, dateMin, dateMax);
        this.addCriterion.emit(fd);
    }

    emitDelete(): void {
        this.deleteCriterion.emit(this.id);
    }

    getDefault(criterion: Criterion): void {
        if (!criterion) {
            this.field.setValue('');
            this.field.enable();
        } else {
            const c = criterion as BetweenCriterion;
            this.field.setValue([new Date(c.min), new Date(c.max)]);
            this.field.disable();
        }
    }

    getDateString(date: Date): string {
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + (date.getDate())).slice(-2);
        return date.getFullYear() + '-' + month + '-' + day;
    }
}