angular-custom-datepicker/fesm2020/angular-custom-datepicker.mjs

Custom Datepicker component for Angular

import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ViewChild, HostListener, Input, Output, NgModule } from '@angular/core';
import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
import * as i1 from '@fortawesome/angular-fontawesome';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import * as i2 from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

class AngularCustomDatepickerService {
    constructor() { }
}
AngularCustomDatepickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
AngularCustomDatepickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: function () { return []; } });

class AngularCustomDatepickerComponent {
    constructor(window) {
        this.window = window;
        this.faAngleLeft = faAngleLeft;
        this.faAngleRight = faAngleRight;
        this.years = [];
        this.months = [
            { id: 0, val: 'Jan' },
            { id: 1, val: 'Feb' },
            { id: 2, val: 'Mar' },
            { id: 3, val: 'Apr' },
            { id: 4, val: 'May' },
            { id: 5, val: 'Jun' },
            { id: 6, val: 'Jul' },
            { id: 7, val: 'Aug' },
            { id: 8, val: 'Sep' },
            { id: 9, val: 'Oct' },
            { id: 10, val: 'Nov' },
            { id: 11, val: 'Dec' },
        ];
        this.date = new Date();
        this.show = false;
        this.days = [];
        // Display on input box
        this.displayDate = null;
        this.minDate = null;
        this.maxDate = null;
        this.min = null;
        this.max = null;
        this.disabled = false;
        this.selectedValue = null;
        this.placeholder = 'Select Date';
        this.SelectedDate = new EventEmitter();
    }
    // To detect any outside click to toggle or close the calendar accordingly
    clickedOutside(event) {
        if (this.disabled == true)
            return;
        else if (this.calendarInput?.nativeElement.contains(event.target)) {
            this.show = !this.show;
            if (this.show == true) {
                // to display the selected date after dropdown is re-opened
                if (this.displayDate != null) {
                    this.renderSelectedDate();
                }
            }
        }
        // Do not close the calendar if user clicks anywhere inside calendar
        else if (this.calendar?.nativeElement.contains(event.target)) {
            this.show = true;
        }
        else {
            // Close the calendar if user clicks anywhere outside calendar/calendar input
            this.show = false;
        }
    }
    //  To detect where to render (upside/downside) the calendar based on spacing
    onResize(event) {
        this.dropUpOrDown();
    }
    ngOnInit() {
        this.yearAssigner();
        let todaysDate = new Date().setHours(0, 0, 0, 0);
        this.currentDateOrignal = new Date(todaysDate);
        this.date.setDate(1);
        this.date.setHours(0, 0, 0, 0);
        this.selectedYear = this.date.getFullYear();
        this.selectedMonth = this.date.getMonth();
        if (this.min != null) {
            let d = new Date(this.min).setHours(0, 0, 0, 0);
            this.minDate = new Date(d);
        }
        if (this.max != null) {
            let d = new Date(this.max).setHours(0, 0, 0, 0);
            this.maxDate = new Date(d);
            this.date.setYear(this.maxDate.getFullYear());
            this.selectedYear = this.maxDate.getFullYear();
            this.date.setMonth(this.maxDate.getMonth());
            this.selectedMonth = this.maxDate.getMonth();
        }
        if (this?.selectedValue) {
            this.setDisplayDateAccordingtoInput();
        }
        // Index of day of the first-date
        this.firstDayIndex = this.date.getDay();
        this.configureAndRenderCalendar();
    }
    ngAfterViewInit() {
        this.dropUpOrDown();
    }
    ngOnChanges(changes) {
        this.min = null;
        this.max = null;
        if (changes?.['min']?.currentValue) {
            this.min = `${changes?.['min'].currentValue}`;
        }
        if (changes?.['max']?.currentValue) {
            this.max = `${changes?.['max'].currentValue}`;
        }
        if (changes?.['selectedValue']?.currentValue) {
            let selectedDate = new Date(`${changes?.['selectedValue'].currentValue}`);
            selectedDate.setHours(0, 0, 0, 0);
            this.selectedValue = selectedDate;
        }
        else {
            this.displayDate = null;
        }
        if (changes?.['min']?.currentValue ||
            changes?.['max']?.currentValue ||
            changes?.['selectedValue']?.currentValue)
            this.ngOnInit();
    }
    configureAndRenderCalendar() {
        this.days = [];
        this.lastDayofCurrentMonth = 0;
        this.lastDayofPrevMonth = 0;
        this.lastDayIndex = 0;
        this.nextDays = 0;
        this.lastDayIndex = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDay();
        //days of next month to be displayed
        this.nextDays = 7 - this.lastDayIndex - 1;
        this.lastDayofCurrentMonth = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0).getDate();
        this.lastDayofPrevMonth = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDate();
        // Previous month dates (Dates like 29,30,31,1)
        for (let x = this.firstDayIndex - 1; x >= 0; x--) {
            this.days.push({
                day: this.lastDayofPrevMonth - x,
                type: 'prev',
                disabled: true,
            });
        }
        //  Setting Current month dates (1-30 / 1-31)
        let disabled;
        for (let i = 1; i <= this.lastDayofCurrentMonth; i++) {
            disabled = false;
            // Check if mindate lies between these dates
            if (this?.minDate) {
                if (this.checkIfDateisEqualtoMinDate(i))
                    this.leftIconDisabled = true;
                if (this.checkIfDateisLessThanMinDate(i)) {
                    this.leftIconDisabled = true;
                    disabled = true;
                }
            }
            // Check if maxdate lies between these dates
            if (this?.maxDate) {
                if (this.checkIfDateisEqualtoMaxDate(i))
                    this.rightIconDisabled = true;
                if (this.checkIfDateisGreaterThanMaxDate(i)) {
                    this.rightIconDisabled = true;
                    disabled = true;
                }
            }
            // To highlight the selected date
            if (i == this?.displayDate?.getDate() &&
                this?.displayDate?.getMonth() == this.date.getMonth() &&
                this?.displayDate?.getFullYear() == this.date.getFullYear()) {
                this.days.push({ day: i, type: 'target', disabled: disabled });
            }
            else {
                this.days.push({ day: i, type: 'curr', disabled: disabled });
            }
        }
        // Number of next days to be displayed
        if (this.nextDays <= 2) {
            this.nextDays += 3;
        }
        // Dates of next month
        for (let j = 1; j <= this.nextDays; j++) {
            this.days.push({ day: j, type: 'next', disabled: true });
        }
    }
    // Toggle calendar on icon click
    calendarClick() {
        this.show = !this.show;
    }
    //  If left arrow is clicked
    prevArrow() {
        // Do not allow if disabled
        if (this.leftIconDisabled)
            return;
        // Reset
        this.leftIconDisabled = false;
        this.rightIconDisabled = false;
        this.date.setMonth(this.date.getMonth() - 1);
        this.selectedYear = this.date.getFullYear();
        // If calendar is finished (first month and first year of calendar)
        this.checkIfCalendarisFinished(this.date.getMonth(), this.selectedYear);
        this.date.setDate(1);
        this.firstDayIndex = this.date.getDay();
        this.configureAndRenderCalendar();
    }
    // If right arrow is clicked
    nextArrow() {
        // Do not allow if disabled
        if (this.rightIconDisabled)
            return;
        // Reset
        this.leftIconDisabled = false;
        this.rightIconDisabled = false;
        this.date.setMonth(this.date.getMonth() + 1);
        this.selectedYear = this.date.getFullYear();
        // If calendar is finished (last month and last year of calendar)
        this.checkIfCalendarisFinished(this.date.getMonth(), this.selectedYear);
        this.date.setDate(1);
        this.firstDayIndex = this.date.getDay();
        this.configureAndRenderCalendar();
    }
    dateClicked(val) {
        // If date is not disabled
        if ((val.type == 'curr' || val.type == 'target') && !val.disabled) {
            this.show = false;
            let day = val.day;
            let month = this.date.getMonth();
            let year = this.date.getFullYear();
            this.selectedDay = day;
            this.selectedMonth = month;
            this.selectedYear = year;
            this.date = new Date(year, month, day);
            this.displayDate = new Date(year, month, day);
            this.SelectedDate.emit(this.displayDate);
            this.configureAndRenderCalendar();
        }
    }
    // Year is changed
    yearSelected(e) {
        this.leftIconDisabled = false;
        this.rightIconDisabled = false;
        let y = e.target.value;
        this.date.setYear(y);
        this.selectedYear = this.date.getFullYear();
        this.date.setDate(1);
        // Disable leftIcon/RightIcon if calendar is finished
        this.checkIfCalendarisFinished(this.date.getMonth(), this.selectedYear);
        // To Display and render correct month in case mindate and/or maxdate is set
        if (this?.minDate?.getFullYear() == this.selectedYear ||
            this?.maxDate?.getFullYear() == this.selectedYear) {
            if (this?.minDate?.getFullYear() == this.selectedYear) {
                if (this.date.getMonth() <= this.minDate.getMonth())
                    this.date.setMonth(this.minDate.getMonth());
            }
            else if (this?.maxDate?.getFullYear() == this.selectedYear) {
                if (this.date.getMonth() >= this.maxDate.getMonth())
                    this.date.setMonth(this.maxDate.getMonth());
            }
        }
        this.date.setDate(1);
        this.firstDayIndex = this.date.getDay(0);
        this.configureAndRenderCalendar();
    }
    // Month is changed
    monthSelected(e) {
        this.leftIconDisabled = false;
        this.rightIconDisabled = false;
        let m = e.target.value;
        this.date.setMonth(m);
        this.selectedMonth = this.date.getMonth();
        // Disable leftIcon/RightIcon if calendar is finished
        this.checkIfCalendarisFinished(this.date.getMonth(), this.selectedYear);
        this.firstDayIndex = this.date.getDay();
        this.configureAndRenderCalendar();
    }
    // Position to render the calendar accordingly
    dropUpOrDown() {
        let dropdownHeight = 288 + 42;
        let windowHeight = this.window.innerHeight;
        let calendarStart = this.calendarInput.nativeElement.getBoundingClientRect().top;
        if (windowHeight - calendarStart < dropdownHeight) {
            return 'dropup';
        }
        else {
            return 'dropdown';
        }
    }
    // Assign 100 years starting from (currentYear-100);
    yearAssigner() {
        this.years = [];
        let currentYear = new Date().getFullYear();
        let startYear = Number(currentYear) - 100;
        for (let i = startYear; i <= currentYear; i++) {
            this.years.push({ val: `${i}` });
        }
    }
    checkIfCalendarisFinished(month, year) {
        if (month == 0 && year == this.years[0].val) {
            this.leftIconDisabled = true;
        }
        else if (month == 11 && year == this.years[this.years.length - 1].val) {
            this.rightIconDisabled = true;
        }
    }
    checkIfDateisLessThanMinDate(d) {
        if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() <
            this?.minDate?.getTime()) {
            return true;
        }
        else
            return false;
    }
    checkIfDateisEqualtoMinDate(d) {
        if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() ==
            this?.minDate?.getTime()) {
            return true;
        }
        else
            return false;
    }
    checkIfDateisEqualtoMaxDate(d) {
        if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() ==
            this?.maxDate?.getTime()) {
            return true;
        }
        else
            return false;
    }
    checkIfDateisGreaterThanMaxDate(d) {
        if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() >
            this?.maxDate?.getTime()) {
            return true;
        }
        else
            return false;
    }
    renderSelectedDate() {
        this.leftIconDisabled = false;
        this.rightIconDisabled = false;
        this.date.setYear(this.displayDate?.getFullYear());
        this.date.setMonth(this.displayDate?.getMonth());
        this.date.setDate(this.displayDate?.getDate());
        this.firstDayIndex = new Date(this.displayDate?.getFullYear(), this.displayDate?.getMonth(), 1).getDay();
        this.selectedYear = this.displayDate?.getFullYear();
        this.selectedMonth = this.displayDate?.getMonth();
        this.checkIfCalendarisFinished(this.selectedMonth, this.selectedYear);
        this.configureAndRenderCalendar();
    }
    setDisplayDateAccordingtoInput() {
        if (this.minDate != null && this.maxDate != null) {
            if (this?.selectedValue?.getTime() >= this?.minDate?.getTime() &&
                this?.selectedValue?.getTime() <= this?.maxDate?.getTime()) {
                this.displayDate = this.selectedValue;
            }
        }
        else if (this.minDate != null &&
            this?.selectedValue?.getTime() >= this?.minDate?.getTime()) {
            this.displayDate = this.selectedValue;
        }
        else if (this.maxDate != null &&
            this?.selectedValue?.getTime() <= this?.maxDate?.getTime()) {
            this.displayDate = this.selectedValue;
        }
        else if (this.minDate == null && this.maxDate == null)
            this.displayDate = this.selectedValue;
    }
}
AngularCustomDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerComponent, deps: [{ token: Window }], target: i0.ɵɵFactoryTarget.Component });
AngularCustomDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AngularCustomDatepickerComponent, selector: "date-picker", inputs: { min: "min", max: "max", disabled: "disabled", selectedValue: "selectedValue", placeholder: "placeholder" }, outputs: { SelectedDate: "SelectedDate" }, host: { listeners: { "document:click": "clickedOutside($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["cally"], descendants: true }, { propertyName: "calendarInput", first: true, predicate: ["callyinp"], descendants: true }, { propertyName: "calendarIcon", first: true, predicate: ["callyicon"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <div class=\"set\">\n    <div #callyinp class=\"inputtag\">\n      <input\n      [disabled]=\"this?.disabled\"\n        [readonly]=\"true\"\n        placeholder=\"{{placeholder}}\"\n        [value]=\"displayDate?.toDateString() | date: 'dd/MM/yyyy'\"\n        class=\"calendar-input\"\n        type=\"text\"\n      />\n      <div #callyicon class=\"iconholder\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          fill=\"currentColor\"\n          class=\"icon bi bi-calendar-event\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path\n            d=\"M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z\"\n          />\n          <path\n            d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z\"\n          />\n        </svg>\n      </div>\n    </div>\n    <div *ngIf=\"show\" #cally class=\"calendar\" [ngClass]=\"dropUpOrDown()\">\n      <div class=\"calendarheader\">\n        <span (click)=\"prevArrow()\" class=\"leftIcon\">\n          <fa-icon\n            [ngClass]=\"{ 'fa-disabled': leftIconDisabled }\"\n            size=\"lg\"\n            [icon]=\"faAngleLeft\"\n          ></fa-icon>\n        </span>\n\n        <div class=\"month_year\">\n          <select (change)=\"monthSelected($event)\" class=\"monthpicker\">\n            <ng-container *ngFor=\"let month of months\">\n              <option\n                *ngIf=\"\n                  month.id <= this?.maxDate?.getMonth() ||\n                  this.selectedYear != this?.maxDate?.getFullYear()\n                \"\n                [disabled]=\"\n                  (this.selectedYear == this?.minDate?.getFullYear() &&\n                    month.id < this?.minDate?.getMonth()) ||\n                  (month.id > this?.maxDate?.getMonth() &&\n                    this.selectedYear == this?.maxDate?.getFullYear())\n                \"\n                [selected]=\"this.date.getMonth() == month.id\"\n                [value]=\"month.id\"\n              >\n                {{ month.val }}\n              </option>\n            </ng-container>\n            <!-- (this.selectedYear == this?.minDate?.getFullYear() &&\n            month.id < this?.minDate?.getMonth()) ||\n          (month.id > this?.maxDate?.getMonth() &&\n            this.selectedYear == this?.maxDate?.getFullYear()) ||\n          (this.selectedYear >= this.currentDateOrignal.getFullYear() &&\n            month.id > this.currentDateOrignal.getMonth()) -->\n          </select>\n          <select (change)=\"yearSelected($event)\" class=\"yearpicker\">\n            <ng-container *ngFor=\"let year of years\">\n              <option\n                *ngIf=\"\n                  !(this?.minDate && year.val < this?.minDate?.getFullYear()) &&\n                  !(this?.maxDate && year.val > this?.maxDate?.getFullYear())\n                \"\n                [disabled]=\"\n                  (this?.minDate && year.val < this?.minDate?.getFullYear()) ||\n                  (this?.maxDate && year.val > this?.maxDate?.getFullYear())\n                \"\n                [selected]=\"this.date.getFullYear() == year.val\"\n                [value]=\"year.val\"\n              >\n                <span>{{ year.val }}</span>\n              </option>\n            </ng-container>\n          </select>\n        </div>\n\n        <span (click)=\"nextArrow()\" class=\"rightIcon\">\n          <fa-icon\n            [ngClass]=\"{ 'fa-disabled': rightIconDisabled }\"\n            size=\"lg\"\n            [icon]=\"faAngleRight\"\n          ></fa-icon>\n        </span>\n      </div>\n      <div class=\"weekdays\">\n        <div>Su</div>\n        <div>Mo</div>\n        <div>Tu</div>\n        <div>We</div>\n        <div>Th</div>\n        <div>Fr</div>\n        <div>Sa</div>\n      </div>\n      <div class=\"days\">\n        <div\n          (click)=\"dateClicked(day)\"\n          [ngClass]=\"{\n            'prev-date': day.type == 'prev',\n            'next-date': day.type == 'next',\n            target: day.type == 'target',\n            disabled: day.disabled == true,\n            currentDate:\n              this.currentDateOrignal.getDate() == day.day &&\n              day.type == 'curr' &&\n              this.currentDateOrignal.getFullYear() ==\n                this.date.getFullYear() &&\n              this.currentDateOrignal.getMonth() == this.date.getMonth()\n          }\"\n          *ngFor=\"let day of days\"\n        >\n          {{ day.day }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".container{width:100%;height:100vh;background-color:#fff;display:flex;justify-content:center;align-items:center}.parent,.set{position:relative}.calendarheader{border-radius:5px;height:2rem;color:#fff;background-color:#0974ad;display:flex;justify-content:space-between;align-items:center}.calendar{font-family:Arial,Helvetica,sans-serif;background-color:#d6f1ff;width:19rem;height:18rem;padding:.5rem;z-index:999}.leftIcon{cursor:pointer;margin-left:4px}.rightIcon{cursor:pointer;margin-right:4px}.select{font-size:1rem}.monthpicker{font-size:1rem;width:5.5rem;padding-left:5px;height:1.5rem}.yearpicker{width:5.5rem;font-size:1rem;height:1.5rem;padding-left:5px}.yearpicker,.monthpicker:focus{outline:none}.weekdays{width:100%;height:2.5rem;display:flex;align-items:center;font-weight:600;margin-bottom:.2rem}.weekdays div{font-size:1.1rem;width:2.5614285714rem;text-align:center;box-sizing:border-box}.days{display:flex;flex-wrap:wrap;align-items:center}.days div{box-sizing:border-box;width:2.5614285714rem;text-align:center;height:2rem;display:flex;justify-content:center;align-items:center}.prev-date,.next-date{opacity:.5}.days div:hover:not(.today,.next-date,.prev-date,.disabled,.target,.currentDate){border:.1rem solid #777;border-radius:10%}.days div:hover:not(.next-date,.prev-date,.disabled){cursor:pointer}.calendar-input{width:100%;padding:.5rem;font-size:1rem;border:1px solid #ced4da;border-radius:.2rem}.calendar-input:focus{outline:none}.inputtag{position:relative!important}.iconholder{top:25%;position:absolute;right:3%;cursor:pointer}.icon:hover{transition:.1s;width:1.2rem;height:1.2rem}.calendar{position:absolute}.target{background-color:#0974ad;color:#fff;border-radius:10%}.disabled{opacity:.5}.fa-disabled{opacity:.6;cursor:not-allowed}.currentDate{background-color:#9ed6f3;border-radius:10%}.dropup{bottom:2.62rem;border-top-left-radius:3%;border-top-right-radius:3%}.dropdown{left:0;border-bottom-left-radius:3%;border-bottom-right-radius:3%}@media (min-width: 320px) and (max-width: 500px){.calendar{width:100%!important}.weekdays div,.days div{width:14.2857142857%!important}.monthpicker,.yearpicker{width:6rem!important;height:1.7rem;padding-left:5px}.calendarheader{height:2.5rem!important}.leftIcon,.rightIcon{font-size:1.3rem!important}}select{color:#000;-webkit-appearance:none;border-radius:0;-webkit-border-radius:0px;background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>\");background-position:100% 50%;background-repeat:no-repeat;background-color:#fff;border:1px solid #767676}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i2.DatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'date-picker', template: "<div>\n  <div class=\"set\">\n    <div #callyinp class=\"inputtag\">\n      <input\n      [disabled]=\"this?.disabled\"\n        [readonly]=\"true\"\n        placeholder=\"{{placeholder}}\"\n        [value]=\"displayDate?.toDateString() | date: 'dd/MM/yyyy'\"\n        class=\"calendar-input\"\n        type=\"text\"\n      />\n      <div #callyicon class=\"iconholder\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          fill=\"currentColor\"\n          class=\"icon bi bi-calendar-event\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path\n            d=\"M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z\"\n          />\n          <path\n            d=\"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z\"\n          />\n        </svg>\n      </div>\n    </div>\n    <div *ngIf=\"show\" #cally class=\"calendar\" [ngClass]=\"dropUpOrDown()\">\n      <div class=\"calendarheader\">\n        <span (click)=\"prevArrow()\" class=\"leftIcon\">\n          <fa-icon\n            [ngClass]=\"{ 'fa-disabled': leftIconDisabled }\"\n            size=\"lg\"\n            [icon]=\"faAngleLeft\"\n          ></fa-icon>\n        </span>\n\n        <div class=\"month_year\">\n          <select (change)=\"monthSelected($event)\" class=\"monthpicker\">\n            <ng-container *ngFor=\"let month of months\">\n              <option\n                *ngIf=\"\n                  month.id <= this?.maxDate?.getMonth() ||\n                  this.selectedYear != this?.maxDate?.getFullYear()\n                \"\n                [disabled]=\"\n                  (this.selectedYear == this?.minDate?.getFullYear() &&\n                    month.id < this?.minDate?.getMonth()) ||\n                  (month.id > this?.maxDate?.getMonth() &&\n                    this.selectedYear == this?.maxDate?.getFullYear())\n                \"\n                [selected]=\"this.date.getMonth() == month.id\"\n                [value]=\"month.id\"\n              >\n                {{ month.val }}\n              </option>\n            </ng-container>\n            <!-- (this.selectedYear == this?.minDate?.getFullYear() &&\n            month.id < this?.minDate?.getMonth()) ||\n          (month.id > this?.maxDate?.getMonth() &&\n            this.selectedYear == this?.maxDate?.getFullYear()) ||\n          (this.selectedYear >= this.currentDateOrignal.getFullYear() &&\n            month.id > this.currentDateOrignal.getMonth()) -->\n          </select>\n          <select (change)=\"yearSelected($event)\" class=\"yearpicker\">\n            <ng-container *ngFor=\"let year of years\">\n              <option\n                *ngIf=\"\n                  !(this?.minDate && year.val < this?.minDate?.getFullYear()) &&\n                  !(this?.maxDate && year.val > this?.maxDate?.getFullYear())\n                \"\n                [disabled]=\"\n                  (this?.minDate && year.val < this?.minDate?.getFullYear()) ||\n                  (this?.maxDate && year.val > this?.maxDate?.getFullYear())\n                \"\n                [selected]=\"this.date.getFullYear() == year.val\"\n                [value]=\"year.val\"\n              >\n                <span>{{ year.val }}</span>\n              </option>\n            </ng-container>\n          </select>\n        </div>\n\n        <span (click)=\"nextArrow()\" class=\"rightIcon\">\n          <fa-icon\n            [ngClass]=\"{ 'fa-disabled': rightIconDisabled }\"\n            size=\"lg\"\n            [icon]=\"faAngleRight\"\n          ></fa-icon>\n        </span>\n      </div>\n      <div class=\"weekdays\">\n        <div>Su</div>\n        <div>Mo</div>\n        <div>Tu</div>\n        <div>We</div>\n        <div>Th</div>\n        <div>Fr</div>\n        <div>Sa</div>\n      </div>\n      <div class=\"days\">\n        <div\n          (click)=\"dateClicked(day)\"\n          [ngClass]=\"{\n            'prev-date': day.type == 'prev',\n            'next-date': day.type == 'next',\n            target: day.type == 'target',\n            disabled: day.disabled == true,\n            currentDate:\n              this.currentDateOrignal.getDate() == day.day &&\n              day.type == 'curr' &&\n              this.currentDateOrignal.getFullYear() ==\n                this.date.getFullYear() &&\n              this.currentDateOrignal.getMonth() == this.date.getMonth()\n          }\"\n          *ngFor=\"let day of days\"\n        >\n          {{ day.day }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".container{width:100%;height:100vh;background-color:#fff;display:flex;justify-content:center;align-items:center}.parent,.set{position:relative}.calendarheader{border-radius:5px;height:2rem;color:#fff;background-color:#0974ad;display:flex;justify-content:space-between;align-items:center}.calendar{font-family:Arial,Helvetica,sans-serif;background-color:#d6f1ff;width:19rem;height:18rem;padding:.5rem;z-index:999}.leftIcon{cursor:pointer;margin-left:4px}.rightIcon{cursor:pointer;margin-right:4px}.select{font-size:1rem}.monthpicker{font-size:1rem;width:5.5rem;padding-left:5px;height:1.5rem}.yearpicker{width:5.5rem;font-size:1rem;height:1.5rem;padding-left:5px}.yearpicker,.monthpicker:focus{outline:none}.weekdays{width:100%;height:2.5rem;display:flex;align-items:center;font-weight:600;margin-bottom:.2rem}.weekdays div{font-size:1.1rem;width:2.5614285714rem;text-align:center;box-sizing:border-box}.days{display:flex;flex-wrap:wrap;align-items:center}.days div{box-sizing:border-box;width:2.5614285714rem;text-align:center;height:2rem;display:flex;justify-content:center;align-items:center}.prev-date,.next-date{opacity:.5}.days div:hover:not(.today,.next-date,.prev-date,.disabled,.target,.currentDate){border:.1rem solid #777;border-radius:10%}.days div:hover:not(.next-date,.prev-date,.disabled){cursor:pointer}.calendar-input{width:100%;padding:.5rem;font-size:1rem;border:1px solid #ced4da;border-radius:.2rem}.calendar-input:focus{outline:none}.inputtag{position:relative!important}.iconholder{top:25%;position:absolute;right:3%;cursor:pointer}.icon:hover{transition:.1s;width:1.2rem;height:1.2rem}.calendar{position:absolute}.target{background-color:#0974ad;color:#fff;border-radius:10%}.disabled{opacity:.5}.fa-disabled{opacity:.6;cursor:not-allowed}.currentDate{background-color:#9ed6f3;border-radius:10%}.dropup{bottom:2.62rem;border-top-left-radius:3%;border-top-right-radius:3%}.dropdown{left:0;border-bottom-left-radius:3%;border-bottom-right-radius:3%}@media (min-width: 320px) and (max-width: 500px){.calendar{width:100%!important}.weekdays div,.days div{width:14.2857142857%!important}.monthpicker,.yearpicker{width:6rem!important;height:1.7rem;padding-left:5px}.calendarheader{height:2.5rem!important}.leftIcon,.rightIcon{font-size:1.3rem!important}}select{color:#000;-webkit-appearance:none;border-radius:0;-webkit-border-radius:0px;background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>\");background-position:100% 50%;background-repeat:no-repeat;background-color:#fff;border:1px solid #767676}\n"] }]
        }], ctorParameters: function () { return [{ type: Window }]; }, propDecorators: { calendar: [{
                type: ViewChild,
                args: ['cally']
            }], calendarInput: [{
                type: ViewChild,
                args: ['callyinp']
            }], calendarIcon: [{
                type: ViewChild,
                args: ['callyicon']
            }], clickedOutside: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }], onResize: [{
                type: HostListener,
                args: ['window:resize', ['$event']]
            }], min: [{
                type: Input
            }], max: [{
                type: Input
            }], disabled: [{
                type: Input
            }], selectedValue: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], SelectedDate: [{
                type: Output
            }] } });

class AngularCustomDatepickerModule {
}
AngularCustomDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AngularCustomDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerModule, declarations: [AngularCustomDatepickerComponent], imports: [BrowserModule,
        FontAwesomeModule], exports: [AngularCustomDatepickerComponent] });
AngularCustomDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerModule, providers: [{ provide: Window, useValue: window }], imports: [[
            BrowserModule,
            FontAwesomeModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AngularCustomDatepickerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        AngularCustomDatepickerComponent
                    ],
                    imports: [
                        BrowserModule,
                        FontAwesomeModule,
                    ],
                    exports: [
                        AngularCustomDatepickerComponent
                    ],
                    providers: [{ provide: Window, useValue: window }]
                }]
        }] });

/*
 * Public API Surface of angular-custom-datepicker
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AngularCustomDatepickerComponent, AngularCustomDatepickerModule, AngularCustomDatepickerService };
//# sourceMappingURL=angular-custom-datepicker.mjs.map