framadate-responsive/src/app/pages/dates/dates.component.ts

import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
import {ConfigService} from '../../config.service';
import {BaseComponent} from '../base-page/base.component';
import {DOCUMENT} from '@angular/common';

@Component({
    selector: 'framadate-dates',
    templateUrl: './dates.component.html',
    styleUrls: ['./dates.component.scss']
})
export class DatesComponent extends BaseComponent implements OnInit {
    constructor(public config: ConfigService,
                private cd: ChangeDetectorRef,
                @Inject(DOCUMENT) private document: any
    ) {
        super(config);
    }

    ngOnInit() {
    }

    addDate() {
        this.config.dateList.push({literal: '', timeList: []});
    }

    addtime() {
        this.config.timeList.push({literal: '', timeList: []});
    }

    /**
     * add a time period to a specific date choice,
     * focus on the new input
     * @param config
     * @param id
     */
    addTimetoDate(config: any, id: number) {
        config.timeList.push({literal: ''});
        let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
        console.log('selector', selector);
        this.cd.detectChanges();
        const elem = this.document.querySelector(selector);
        if (elem) {
            elem.focus();
        }
    }

    emptyAll() {
        this.config.dateList.forEach(element => {
            element.literal = '';
            element.timeList = ['', '', ''];
        });
        this.config.timeList.forEach(element => {
            element.literal = '';
        });
    }
}