ng-daterangepicker-ext/src/ng-daterangepicker/ng-daterange-calendar/ng-daterange-calendar.component.js

Angular PayPal Datepicker

import { NgDateRangePickerHelper } from '../shared/ng-daterangerpicker.helper';
import { Component, ElementRef, EventEmitter, Injectable, Input, Output, ViewChild } from '@angular/core';
import * as dateFns from 'date-fns';
var NgDateRangeCalendarComponent = (function () {
    function NgDateRangeCalendarComponent(element, helper) {
        this.element = element;
        this.helper = helper;
        this.onDateFrom = new EventEmitter();
        this.onDateTo = new EventEmitter();
        this.onValueChange = new EventEmitter();
    }
    Object.defineProperty(NgDateRangeCalendarComponent.prototype, "dateFrom", {
        get: function () {
            return this._dateFrom;
        },
        set: function (value) {
            this._dateFrom = value;
            this.onDateFrom.emit(this.dateFrom);
        },
        enumerable: true,
        configurable: true
    });
    ;
    Object.defineProperty(NgDateRangeCalendarComponent.prototype, "dateTo", {
        get: function () {
            return this._dateTo;
        },
        set: function (value) {
            this._dateTo = value;
            this.onDateTo.emit(this.dateTo);
        },
        enumerable: true,
        configurable: true
    });
    ;
    NgDateRangeCalendarComponent.prototype.ngOnInit = function () {
        this.date = dateFns.startOfDay(new Date());
        this.currentRange = this.options.range;
        this.initNames();
        this.showAt();
        this.generateCalendar();
    };
    NgDateRangeCalendarComponent.prototype.initNames = function () {
        this.dayNames = this.options.dayNames;
    };
    NgDateRangeCalendarComponent.prototype.showAt = function () {
        var top = 0;
        if (this.target) {
            this.coords = this.target.getBoundingClientRect();
            top = this.coords.top + 30;
        }
        else {
            this.coords = {
                top: 0,
                left: 0,
                bottom: 0,
                right: 0
            };
            top = this.coords.top + 75;
        }
        var el = this.element.nativeElement;
        el.style.top = Math.floor(top) + 'px';
        el.style.left = Math.floor(this.coords.left) + 'px';
        el.style.position = 'absolute';
    };
    NgDateRangeCalendarComponent.prototype.generateCalendar = function () {
        var _this = this;
        this.days = [];
        var start = dateFns.startOfMonth(this.date);
        var end = dateFns.endOfMonth(this.date);
        var days = dateFns.eachDay(start, end).map(function (d) {
            return {
                date: d,
                day: dateFns.getDate(d),
                weekday: dateFns.getDay(d),
                today: dateFns.isToday(d),
                firstMonthDay: dateFns.isFirstDayOfMonth(d),
                lastMonthDay: dateFns.isLastDayOfMonth(d),
                visible: true,
                from: dateFns.isSameDay(_this.dateFrom, d),
                to: dateFns.isSameDay(_this.dateTo, d),
                isWithinRange: dateFns.isWithinRange(d, _this.dateFrom, _this.dateTo)
            };
        });
        var prevMonthDayNum = dateFns.getDay(start) - 1;
        var prevMonthDays = [];
        if (prevMonthDayNum > 0) {
            prevMonthDays = Array.from(Array(prevMonthDayNum).keys()).map(function (i) {
                var d = dateFns.subDays(start, prevMonthDayNum - i);
                return {
                    date: d,
                    day: dateFns.getDate(d),
                    weekday: dateFns.getDay(d),
                    firstMonthDay: dateFns.isFirstDayOfMonth(d),
                    lastMonthDay: dateFns.isLastDayOfMonth(d),
                    today: false,
                    visible: false,
                    from: false,
                    to: false,
                    isWithinRange: false
                };
            });
        }
        this.days = prevMonthDays.concat(days);
    };
    NgDateRangeCalendarComponent.prototype.selectDate = function (e, index) {
        e.preventDefault();
        var selectedDate = this.days[index].date;
        if ((this.opened === 'from' && dateFns.isAfter(selectedDate, this.dateTo)) ||
            (this.opened === 'to' && dateFns.isBefore(selectedDate, this.dateFrom))) {
            return;
        }
        if (this.opened === 'from') {
            this.dateFrom = selectedDate;
            this.opened = 'to';
        }
        else if (this.opened === 'to') {
            this.dateTo = selectedDate;
            this.opened = 'from';
        }
        this.generateCalendar();
        this.emitValue();
    };
    NgDateRangeCalendarComponent.prototype.prevMonth = function () {
        this.date = dateFns.subMonths(this.date, 1);
        this.generateCalendar();
    };
    NgDateRangeCalendarComponent.prototype.nextMonth = function () {
        this.date = dateFns.addMonths(this.date, 1);
        this.generateCalendar();
    };
    NgDateRangeCalendarComponent.prototype.selectRange = function (range) {
        this.currentRange = range;
        var dates = this.helper.selectRange(this.options, range);
        this.dateFrom = dates.dateFrom;
        this.dateTo = dates.dateTo;
        this.generateCalendar();
        this.emitValue();
    };
    NgDateRangeCalendarComponent.prototype.closeCalendar = function (e) {
        this.opened = false;
    };
    NgDateRangeCalendarComponent.prototype.formatTime = function (value) {
        return dateFns.format(value, this.options.timeFormat);
    };
    NgDateRangeCalendarComponent.prototype.toggleTimer = function () {
        this.timerOpened = !this.timerOpened;
    };
    NgDateRangeCalendarComponent.prototype.getTimeUnitValue = function (unitFormat) {
        return dateFns.format(this.opened === 'from' ? this.dateFrom : this.dateTo, unitFormat);
    };
    NgDateRangeCalendarComponent.prototype.formatTimeForTitle = function (hours, minutes, seconds) {
        var f = function (v) {
            return v < 10 ? '0' + v : v;
        };
        return f(hours) + ":" + f(minutes) + (this.showSeconds() ? ':' + f(seconds) : '');
    };
    NgDateRangeCalendarComponent.prototype.onTimeChange = function () {
        if (this.opened === 'from') {
            this.setTime(this.dateFrom);
        }
        else {
            this.setTime(this.dateTo);
        }
    };
    NgDateRangeCalendarComponent.prototype.setTime = function (dateObj) {
        dateObj.setHours(this.hoursEl.nativeElement.value);
        dateObj.setMinutes(this.minutesEl.nativeElement.value);
        dateObj.setSeconds(this.showSeconds() ? this.secondsEl.nativeElement.value : 0);
    };
    NgDateRangeCalendarComponent.prototype.showSeconds = function () {
        return this.options.timeFormat.includes(':s'); // also covers :ss
    };
    NgDateRangeCalendarComponent.prototype.emitValue = function () {
        this.onValueChange
            .emit(dateFns.format(this.dateFrom, this.options.outputFormat) + "-" + dateFns.format(this.dateTo, this.options.outputFormat));
    };
    NgDateRangeCalendarComponent.prototype.getCSSClasses = function () {
        return "calendar theme-" + this.options.theme + (!!this.opened ? ' is-opened' : '') + (this.opened === 'to' ? ' is-to' : '');
    };
    return NgDateRangeCalendarComponent;
}());
export { NgDateRangeCalendarComponent };
NgDateRangeCalendarComponent.decorators = [
    { type: Component, args: [{
                selector: 'ng-daterange-calendar',
                templateUrl: 'ng-daterange-calendar.component.html',
                styleUrls: ['ng-daterange-calendar.component.sass']
            },] },
    { type: Injectable },
];
/** @nocollapse */
NgDateRangeCalendarComponent.ctorParameters = function () { return [
    { type: ElementRef, },
    { type: NgDateRangePickerHelper, },
]; };
NgDateRangeCalendarComponent.propDecorators = {
    'options': [{ type: Input },],
    'target': [{ type: Input },],
    'onDateFrom': [{ type: Output },],
    'onDateTo': [{ type: Output },],
    'onValueChange': [{ type: Output },],
    'opened': [{ type: Input },],
    'currentRange': [{ type: Input },],
    'hoursEl': [{ type: ViewChild, args: ['hours',] },],
    'minutesEl': [{ type: ViewChild, args: ['minutes',] },],
    'secondsEl': [{ type: ViewChild, args: ['seconds',] },],
};