angular-custom-datepicker
Version:
Custom Datepicker component for Angular
455 lines (448 loc) • 37.7 kB
JavaScript
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) {
var _a, _b;
if (this.disabled == true)
return;
else if ((_a = this.calendarInput) === null || _a === void 0 ? void 0 : _a.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 ((_b = this.calendar) === null || _b === void 0 ? void 0 : _b.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 === null || this === void 0 ? void 0 : this.selectedValue) {
this.setDisplayDateAccordingtoInput();
}
// Index of day of the first-date
this.firstDayIndex = this.date.getDay();
this.configureAndRenderCalendar();
}
ngAfterViewInit() {
this.dropUpOrDown();
}
ngOnChanges(changes) {
var _a, _b, _c, _d, _e, _f;
this.min = null;
this.max = null;
if ((_a = changes === null || changes === void 0 ? void 0 : changes['min']) === null || _a === void 0 ? void 0 : _a.currentValue) {
this.min = `${changes === null || changes === void 0 ? void 0 : changes['min'].currentValue}`;
}
if ((_b = changes === null || changes === void 0 ? void 0 : changes['max']) === null || _b === void 0 ? void 0 : _b.currentValue) {
this.max = `${changes === null || changes === void 0 ? void 0 : changes['max'].currentValue}`;
}
if ((_c = changes === null || changes === void 0 ? void 0 : changes['selectedValue']) === null || _c === void 0 ? void 0 : _c.currentValue) {
let selectedDate = new Date(`${changes === null || changes === void 0 ? void 0 : changes['selectedValue'].currentValue}`);
selectedDate.setHours(0, 0, 0, 0);
this.selectedValue = selectedDate;
}
else {
this.displayDate = null;
}
if (((_d = changes === null || changes === void 0 ? void 0 : changes['min']) === null || _d === void 0 ? void 0 : _d.currentValue) ||
((_e = changes === null || changes === void 0 ? void 0 : changes['max']) === null || _e === void 0 ? void 0 : _e.currentValue) ||
((_f = changes === null || changes === void 0 ? void 0 : changes['selectedValue']) === null || _f === void 0 ? void 0 : _f.currentValue))
this.ngOnInit();
}
configureAndRenderCalendar() {
var _a, _b, _c;
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 === null || this === void 0 ? void 0 : 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 === null || this === void 0 ? void 0 : 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 == ((_a = this === null || this === void 0 ? void 0 : this.displayDate) === null || _a === void 0 ? void 0 : _a.getDate()) &&
((_b = this === null || this === void 0 ? void 0 : this.displayDate) === null || _b === void 0 ? void 0 : _b.getMonth()) == this.date.getMonth() &&
((_c = this === null || this === void 0 ? void 0 : this.displayDate) === null || _c === void 0 ? void 0 : _c.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) {
var _a, _b, _c, _d;
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 (((_a = this === null || this === void 0 ? void 0 : this.minDate) === null || _a === void 0 ? void 0 : _a.getFullYear()) == this.selectedYear ||
((_b = this === null || this === void 0 ? void 0 : this.maxDate) === null || _b === void 0 ? void 0 : _b.getFullYear()) == this.selectedYear) {
if (((_c = this === null || this === void 0 ? void 0 : this.minDate) === null || _c === void 0 ? void 0 : _c.getFullYear()) == this.selectedYear) {
if (this.date.getMonth() <= this.minDate.getMonth())
this.date.setMonth(this.minDate.getMonth());
}
else if (((_d = this === null || this === void 0 ? void 0 : this.maxDate) === null || _d === void 0 ? void 0 : _d.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) {
var _a;
if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() <
((_a = this === null || this === void 0 ? void 0 : this.minDate) === null || _a === void 0 ? void 0 : _a.getTime())) {
return true;
}
else
return false;
}
checkIfDateisEqualtoMinDate(d) {
var _a;
if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() ==
((_a = this === null || this === void 0 ? void 0 : this.minDate) === null || _a === void 0 ? void 0 : _a.getTime())) {
return true;
}
else
return false;
}
checkIfDateisEqualtoMaxDate(d) {
var _a;
if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() ==
((_a = this === null || this === void 0 ? void 0 : this.maxDate) === null || _a === void 0 ? void 0 : _a.getTime())) {
return true;
}
else
return false;
}
checkIfDateisGreaterThanMaxDate(d) {
var _a;
if (new Date(this.date.getFullYear(), this.date.getMonth(), d).getTime() >
((_a = this === null || this === void 0 ? void 0 : this.maxDate) === null || _a === void 0 ? void 0 : _a.getTime())) {
return true;
}
else
return false;
}
renderSelectedDate() {
var _a, _b, _c, _d, _e, _f, _g;
this.leftIconDisabled = false;
this.rightIconDisabled = false;
this.date.setYear((_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.getFullYear());
this.date.setMonth((_b = this.displayDate) === null || _b === void 0 ? void 0 : _b.getMonth());
this.date.setDate((_c = this.displayDate) === null || _c === void 0 ? void 0 : _c.getDate());
this.firstDayIndex = new Date((_d = this.displayDate) === null || _d === void 0 ? void 0 : _d.getFullYear(), (_e = this.displayDate) === null || _e === void 0 ? void 0 : _e.getMonth(), 1).getDay();
this.selectedYear = (_f = this.displayDate) === null || _f === void 0 ? void 0 : _f.getFullYear();
this.selectedMonth = (_g = this.displayDate) === null || _g === void 0 ? void 0 : _g.getMonth();
this.checkIfCalendarisFinished(this.selectedMonth, this.selectedYear);
this.configureAndRenderCalendar();
}
setDisplayDateAccordingtoInput() {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (this.minDate != null && this.maxDate != null) {
if (((_a = this === null || this === void 0 ? void 0 : this.selectedValue) === null || _a === void 0 ? void 0 : _a.getTime()) >= ((_b = this === null || this === void 0 ? void 0 : this.minDate) === null || _b === void 0 ? void 0 : _b.getTime()) &&
((_c = this === null || this === void 0 ? void 0 : this.selectedValue) === null || _c === void 0 ? void 0 : _c.getTime()) <= ((_d = this === null || this === void 0 ? void 0 : this.maxDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
this.displayDate = this.selectedValue;
}
}
else if (this.minDate != null &&
((_e = this === null || this === void 0 ? void 0 : this.selectedValue) === null || _e === void 0 ? void 0 : _e.getTime()) >= ((_f = this === null || this === void 0 ? void 0 : this.minDate) === null || _f === void 0 ? void 0 : _f.getTime())) {
this.displayDate = this.selectedValue;
}
else if (this.maxDate != null &&
((_g = this === null || this === void 0 ? void 0 : this.selectedValue) === null || _g === void 0 ? void 0 : _g.getTime()) <= ((_h = this === null || this === void 0 ? void 0 : this.maxDate) === null || _h === void 0 ? void 0 : _h.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