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

import {ChangeDetectorRef, Component, Inject, OnChanges, 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, OnChanges {
    showDateInterval: boolean = true;
    startDateInterval: any;
    intervalDays: any;
    intervalDaysDefault: number = 7;
    endDateInterval: any;

    constructor(public config: ConfigService,
                private cd: ChangeDetectorRef,
                @Inject(DOCUMENT) private document: any
    ) {
        super(config);
    }

    ngOnChanges() {
        // compute the number of days in the date interval
        if (this.endDateInterval && this.startDateInterval) {
            this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0)
        }
    }

    /**
     * set the interval options
     */
    ngOnInit() {
        let dateCurrent = new Date();
        const dateJson = dateCurrent.toISOString();
        console.log('dateJson', dateJson.substring(0, 10));
        this.startDateInterval = dateJson.substring(0, 10);
        this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10);
    }

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

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

    /**
     * add some days to a date, to compute intervals
     * @param days
     * @param date
     */
    addDaysToDate(days: number, date: Date) {
        var date = new Date(date.valueOf());
        date.setDate(date.getDate() + days);
        return date;
    };

    /**
     * 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();
        }
    }

    /**
     * remove all input contents, does not reset to default
     */
    emptyAll() {
        this.config.dateList.forEach(element => {
            element.literal = '';
            element.timeList = ['', '', ''];
        });
        this.config.timeList.forEach(element => {
            element.literal = '';
        });
    }

    /**
     * add all the dates between the start and end dates
     */
    addIntervalOfDates() {
        let newIntervalArray = this.getDatesInrange(this.startDateInterval, this.endDateInterval, 1);
        console.log('newIntervalArray', newIntervalArray);

        const converted = [];
        newIntervalArray.forEach(element => {
            converted.push({literal: element, timeList: []});
        });
        this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items
        console.log('converted', converted);
        console.log('this.config.dateList', this.config.dateList);

    }

    getDatesInrange(d1, d2, interval) {
        d1 = new Date(d1);
        d2 = new Date(d2);
        var dates = [];
        while (+d1 < +d2) {
            dates.push(this.formateDate(d1));
            d1.setDate(d1.getDate() + interval)
        }
        return dates.slice(0)
    }

    dayDiff(d1: Date, d2: Date): Number {
        console.log('Number(((d2.getTime()) - (d1.getTime()) / 31536000000))', Number(((d2.getTime()) - (d1.getTime()) / 31536000000)));
        return Number(((d2.getTime()) - (d1.getTime()) / 31536000000));
    }

    /**
     * format a date object to the date format used by the inputs of type date
     * YYYY-MM-DD
     * @param date
     */
    formateDate(date) {
        return [
            date.getFullYear(),
            this.getDoubleDigits(date.getMonth() + 1),
            this.getDoubleDigits(date.getDate()),
        ].join('-')
    }

    getDoubleDigits(str) {
        return ("00" + str).slice(-2);
    }
}