date-picker-custom/bundles/date-picker-custom.umd.min.js

A simple customizable date picker for Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("date-picker-custom",["exports","@angular/core","@angular/platform-browser"],t):t((e=e||self)["date-picker-custom"]={},e.ng.core,e.ng.platformBrowser)}(this,(function(e,t,a){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */function r(e,t,a,r){var o,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,a):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,a,r);else for(var h=e.length-1;h>=0;h--)(o=e[h])&&(s=(n<3?o(s):n>3?o(t,a,s):o(t,a))||s);return n>3&&s&&Object.defineProperty(t,a,s),s}function o(e,t){var a="function"==typeof Symbol&&e[Symbol.iterator];if(!a)return e;var r,o,n=a.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(r=n.next()).done;)s.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(a=n.return)&&a.call(n)}finally{if(o)throw o.error}}return s}var n=function(){function e(){this.monthDayMap=[{numberOfDays:31,month:"January",days:this.arrangeDates(0,31)},{numberOfDays:28,month:"February",days:this.arrangeDates(1,28)},{numberOfDays:31,month:"March",days:this.arrangeDates(2,31)},{numberOfDays:30,month:"April",days:this.arrangeDates(3,30)},{numberOfDays:31,month:"May",days:this.arrangeDates(4,31)},{numberOfDays:30,month:"June",days:this.arrangeDates(5,30)},{numberOfDays:31,month:"July",days:this.arrangeDates(6,31)},{numberOfDays:31,month:"August",days:this.arrangeDates(7,31)},{numberOfDays:30,month:"September",days:this.arrangeDates(8,30)},{numberOfDays:31,month:"October",days:this.arrangeDates(9,31)},{numberOfDays:30,month:"November",days:this.arrangeDates(10,30)},{numberOfDays:31,month:"December",days:this.arrangeDates(11,31)}]}return e.prototype.arrangeDates=function(e,t,a){var r=new Date(a||(new Date).getFullYear(),e,1).getDay();return Array(r+t).fill(0).map((function(e,t){return t<r?0:t-r+1}))},e.prototype.monthToName=function(e){return this.monthDayMap[e].month},e.prototype.nameToMonth=function(e){return this.monthDayMap.findIndex((function(t){return t.month===e}))},e.prototype.getMap=function(){return function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(o(arguments[t]));return e}(this.monthDayMap)},e.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e=r([t.Injectable({providedIn:"root"})],e)}(),s=function(){function e(e){this.datePickerService=e,this.showDay=!0,this.showMonth=!0,this.showYear=!0,this.themeColor="default",this.finalDate=new t.EventEmitter,this.finalDay=new t.EventEmitter,this.finalMonth=new t.EventEmitter,this.finalMonthName=new t.EventEmitter,this.finalYear=new t.EventEmitter,this.showDateBox=!0,this.showMonthBox=!1,this.showYearBox=!1}return e.prototype.ngOnInit=function(){var e=new Date;this.selectedDay=this.checkDay=e.getDate(),this.selectedMonth=this.checkMonth=e.getMonth(),this.selectedYear=this.currentYear=this.checkYear=e.getFullYear(),this.years=Array(12).fill(this.selectedYear).map((function(e,t){return e+=t})),this.monthDayMap=this.datePickerService.getMap(),this.themeColor="theme-"+this.themeColor,this.showYear&&this.toggleDayMonthYear("year"),this.showMonth&&this.toggleDayMonthYear("month"),this.showDay&&this.toggleDayMonthYear("day")},e.prototype.monthYearPrev=function(){this.showDateBox?(this.selectedMonth--,this.selectedMonth<0&&(this.selectedYear--,this.selectedMonth=11),this.monthDayMap[this.selectedMonth].days=this.datePickerService.arrangeDates(this.selectedMonth,this.monthDayMap[this.selectedMonth].numberOfDays,this.selectedYear)):this.showMonthBox?this.selectedYear--:this.showYearBox&&(this.currentYear-=12,this.years=Array(12).fill(this.currentYear).map((function(e,t){return e+=t})))},e.prototype.monthYearNext=function(){this.showDateBox?(this.selectedMonth++,this.selectedMonth>11&&(this.selectedYear++,this.selectedMonth=0),this.monthDayMap[this.selectedMonth].days=this.datePickerService.arrangeDates(this.selectedMonth,this.monthDayMap[this.selectedMonth].numberOfDays,this.selectedYear)):this.showMonthBox?this.selectedYear++:this.showYearBox&&(this.currentYear+=12,this.years=Array(12).fill(this.currentYear).map((function(e,t){return e+=t})))},e.prototype.selectDay=function(e){this.selectedDay=this.checkDay=e,this.checkMonth=this.selectedMonth,this.checkYear=this.selectedYear,this.emitOutput()},e.prototype.selectMonth=function(e){this.selectedMonth=this.checkMonth=this.datePickerService.nameToMonth(e),this.checkYear=this.selectedYear,this.showDay?this.toggleDayMonthYear("day"):this.emitOutput()},e.prototype.selectYear=function(e){this.selectedYear=this.checkYear=e,this.showMonth||this.showDay?this.showMonth?this.toggleDayMonthYear("month"):this.toggleDayMonthYear("day"):this.emitOutput()},e.prototype.toggleDayMonthYear=function(e){"day"===e?(this.showDateBox=!0,this.showMonthBox=!1,this.showYearBox=!1):"month"===e?(this.showDateBox=!1,this.showMonthBox=!0,this.showYearBox=!1,!this.showMonth&&this.showYear?this.toggleDayMonthYear("year"):this.showMonth||this.showYear||this.toggleDayMonthYear("day")):"year"===e&&this.showYear&&(this.showDateBox=!1,this.showMonthBox=!1,this.showYearBox=!0),this.datePickerService.arrangeDates(this.selectedMonth,this.monthDayMap[this.selectedMonth].numberOfDays,this.selectedYear)},e.prototype.highlightCurrentDate=function(e){new Date;return this.selectedDay===e&&this.selectedMonth===this.checkMonth&&this.selectedYear===this.checkYear},e.prototype.highlightCurrentMonth=function(e){new Date;return this.selectedMonth===this.datePickerService.nameToMonth(e)&&this.selectedYear===this.checkYear},e.prototype.highlightCurrentYear=function(e){return e===this.selectedYear},e.prototype.emitOutput=function(){var e=new Date(this.selectedYear,this.selectedMonth,this.selectedDay),t=this.datePickerService.monthToName(this.selectedMonth),a=this.selectedDay,r=this.selectedMonth,o=this.selectedYear;this.showDay||(a=void 0,e=void 0),this.showMonth||(r=void 0,t=void 0,e=void 0),this.showYear||(o=void 0,e=void 0),this.finalDate.emit(e),this.finalDay.emit(a),this.finalMonth.emit(r),this.finalMonthName.emit(t),this.finalYear.emit(o)},e.ctorParameters=function(){return[{type:n}]},r([t.Input("showDay")],e.prototype,"showDay",void 0),r([t.Input("showMonth")],e.prototype,"showMonth",void 0),r([t.Input("showYear")],e.prototype,"showYear",void 0),r([t.Input("theme")],e.prototype,"themeColor",void 0),r([t.Output("date")],e.prototype,"finalDate",void 0),r([t.Output("day")],e.prototype,"finalDay",void 0),r([t.Output("month")],e.prototype,"finalMonth",void 0),r([t.Output("month_name")],e.prototype,"finalMonthName",void 0),r([t.Output("year")],e.prototype,"finalYear",void 0),e=r([t.Component({selector:"date-picker",template:"<main class='calendar-box' [ngClass]=\"themeColor\">\r\n    <div class='calendar-box-heading-bar'>\r\n        <div class=\"calendar-box-heading-bar-prev\" \r\n            (click)=\"monthYearPrev()\">\r\n            < \r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-month\" \r\n            (click)=\"toggleDayMonthYear('month')\"\r\n            *ngIf='showDateBox && showDay'>\r\n            {{monthDayMap[selectedMonth].month}} - {{selectedYear}}\r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-month\" \r\n            (click)=\"toggleDayMonthYear('year')\"\r\n            *ngIf='showMonthBox && showMonth'>\r\n            {{selectedYear}}\r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-month\"\r\n            *ngIf='showYearBox'>\r\n            {{years[0]}}-{{years[11]}}\r\n        </div>\r\n        <div class=\"calendar-box-heading-bar-next\" \r\n            (click)=\"monthYearNext()\">\r\n            >\r\n        </div>\r\n    </div>\r\n    <div class='calendar-box-days' *ngIf='showDateBox && showDay'>\r\n        <div class='calendar-box-days-name' \r\n            *ngFor=\"let day of ['S', 'M', 'T', 'W', 'T', 'F', 'S']\">\r\n            {{day}}\r\n        </div>\r\n        <div class='calendar-box-days-day' \r\n            *ngFor=\"let day of monthDayMap[selectedMonth].days\"\r\n            (click)='selectDay(day)' \r\n            [class.zero]='day === 0' \r\n            [class.selected]='highlightCurrentDate(day)'>\r\n            {{day}}\r\n        </div>\r\n    </div>\r\n    <div class='calendar-box-months-years' *ngIf='showMonthBox && showMonth'>\r\n        <div class='calendar-box-months-years-month-year' \r\n            *ngFor=\"let month of monthDayMap\"\r\n            (click)='selectMonth(month.month)' \r\n            [class.selected]='highlightCurrentMonth(month.month)'>\r\n            {{month.month.slice(0,3)}}\r\n        </div>\r\n    </div>\r\n    <div class='calendar-box-months-years' *ngIf='showYearBox && showYear'>\r\n        <div class='calendar-box-months-years-month-year' \r\n            *ngFor=\"let year of years\" \r\n            (click)='selectYear(year)'\r\n            [class.selected]='highlightCurrentYear(year)'>\r\n            {{year}}\r\n        </div>\r\n    </div>\r\n</main>",styles:['.calendar-box-heading-bar{cursor:pointer;display:flex}.calendar-box-heading-bar>*{padding:5px;transition:.2s ease-in-out}.theme-default .calendar-box-heading-bar>:hover{background-color:rgba(235,235,235,.377)}.theme-default .calendar-box-heading-bar>:active{background-color:rgba(158,158,158,.377);transition:.2s ease-in-out}.theme-red .calendar-box-heading-bar>:hover{background-color:rgba(255,208,208,.327)}.theme-red .calendar-box-heading-bar>:active{background-color:rgba(255,55,55,.327);transition:.2s ease-in-out}.theme-green .calendar-box-heading-bar>:hover{background-color:rgba(204,255,153,.534)}.theme-green .calendar-box-heading-bar>:active{background-color:rgba(128,255,0,.534);transition:.2s ease-in-out}.theme-yellow .calendar-box-heading-bar>:hover{background-color:rgba(255,255,168,.327)}.theme-yellow .calendar-box-heading-bar>:active{background-color:rgba(255,255,15,.327);transition:.2s ease-in-out}.theme-blue .calendar-box-heading-bar>:hover{background-color:rgba(168,213,255,.327)}.theme-blue .calendar-box-heading-bar>:active{background-color:rgba(15,139,255,.327);transition:.2s ease-in-out}.calendar-box-heading-bar-prev{width:10%;font-weight:700;font-size:18px;text-align:center}.theme-default .calendar-box-heading-bar-prev{border:1.5px solid rgba(82,82,82,.377);color:rgba(82,82,82,.377)}.theme-red .calendar-box-heading-bar-prev{border:1.5px solid rgba(157,0,0,.327);color:rgba(157,0,0,.327)}.theme-green .calendar-box-heading-bar-prev{border:1.5px solid rgba(51,102,0,.534);color:rgba(51,102,0,.534)}.theme-yellow .calendar-box-heading-bar-prev{border:1.5px solid rgba(117,117,0,.327);color:rgba(117,117,0,.327)}.theme-blue .calendar-box-heading-bar-prev{border:1.5px solid rgba(0,60,117,.327);color:rgba(0,60,117,.327)}.calendar-box-heading-bar-month{flex:1 1 auto;text-align:center}.calendar-box-heading-bar-next{width:10%;font-weight:700;font-size:18px;text-align:center}.theme-default .calendar-box-heading-bar-next{border:1.5px solid rgba(82,82,82,.377);color:rgba(82,82,82,.377)}.theme-red .calendar-box-heading-bar-next{border:1.5px solid rgba(157,0,0,.327);color:rgba(157,0,0,.327)}.theme-green .calendar-box-heading-bar-next{border:1.5px solid rgba(51,102,0,.534);color:rgba(51,102,0,.534)}.theme-yellow .calendar-box-heading-bar-next{border:1.5px solid rgba(117,117,0,.327);color:rgba(117,117,0,.327)}.theme-blue .calendar-box-heading-bar-next{border:1.5px solid rgba(0,60,117,.327);color:rgba(0,60,117,.327)}.calendar-box-days{height:200px;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}.calendar-box-days-name{height:100%;width:100%;align-self:center;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:100;cursor:default;color:#979797;border-bottom:.05px solid #c7c7c7}.calendar-box-days-day{height:100%;width:100%;cursor:pointer;align-self:center;display:flex;align-items:center;justify-content:center;font-size:13px}.theme-default .calendar-box-days-day:hover{background-color:rgba(235,235,235,.377)}.theme-default .calendar-box-days-day:active{background-color:rgba(158,158,158,.377);transition:.2s ease-in-out}.theme-red .calendar-box-days-day:hover{background-color:rgba(255,208,208,.327)}.theme-red .calendar-box-days-day:active{background-color:rgba(255,55,55,.327);transition:.2s ease-in-out}.theme-green .calendar-box-days-day:hover{background-color:rgba(204,255,153,.534)}.theme-green .calendar-box-days-day:active{background-color:rgba(128,255,0,.534);transition:.2s ease-in-out}.theme-yellow .calendar-box-days-day:hover{background-color:rgba(255,255,168,.327)}.theme-yellow .calendar-box-days-day:active{background-color:rgba(255,255,15,.327);transition:.2s ease-in-out}.theme-blue .calendar-box-days-day:hover{background-color:rgba(168,213,255,.327)}.theme-blue .calendar-box-days-day:active{background-color:rgba(15,139,255,.327);transition:.2s ease-in-out}.theme-default .calendar-box-days-day.selected{background-color:rgba(158,158,158,.377)}.theme-red .calendar-box-days-day.selected{background-color:rgba(255,55,55,.327)}.theme-green .calendar-box-days-day.selected{background-color:rgba(128,255,0,.534)}.theme-yellow .calendar-box-days-day.selected{background-color:rgba(255,255,15,.327)}.theme-blue .calendar-box-days-day.selected{background-color:rgba(15,139,255,.327)}.calendar-box-days-day.zero{visibility:hidden!important}*{padding:0;margin:0;font-family:"Segoe UI",sans-serif,"Helvetica Neue"}.calendar-box-months-years{height:200px;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}.calendar-box-months-years-month-year{height:100%;width:100%;cursor:pointer;align-self:center;display:flex;align-items:center;justify-content:center;font-size:13px}.theme-default .calendar-box-months-years-month-year:hover{background-color:rgba(235,235,235,.377)}.theme-default .calendar-box-months-years-month-year:active{background-color:rgba(158,158,158,.377);transition:.2s ease-in-out}.theme-red .calendar-box-months-years-month-year:hover{background-color:rgba(255,208,208,.327)}.theme-red .calendar-box-months-years-month-year:active{background-color:rgba(255,55,55,.327);transition:.2s ease-in-out}.theme-green .calendar-box-months-years-month-year:hover{background-color:rgba(204,255,153,.534)}.theme-green .calendar-box-months-years-month-year:active{background-color:rgba(128,255,0,.534);transition:.2s ease-in-out}.theme-yellow .calendar-box-months-years-month-year:hover{background-color:rgba(255,255,168,.327)}.theme-yellow .calendar-box-months-years-month-year:active{background-color:rgba(255,255,15,.327);transition:.2s ease-in-out}.theme-blue .calendar-box-months-years-month-year:hover{background-color:rgba(168,213,255,.327)}.theme-blue .calendar-box-months-years-month-year:active{background-color:rgba(15,139,255,.327);transition:.2s ease-in-out}.theme-default .calendar-box-months-years-month-year.selected{background-color:rgba(158,158,158,.377)}.theme-red .calendar-box-months-years-month-year.selected{background-color:rgba(255,55,55,.327)}.theme-green .calendar-box-months-years-month-year.selected{background-color:rgba(128,255,0,.534)}.theme-yellow .calendar-box-months-years-month-year.selected{background-color:rgba(255,255,15,.327)}.theme-blue .calendar-box-months-years-month-year.selected{background-color:rgba(15,139,255,.327)}.calendar-box{transition:.2s ease-in-out;position:relative;box-shadow:0 1.1px 2.1px -2px rgba(0,0,0,.1),0 4px 17px -8px rgba(0,0,0,.3);width:220px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}']})],e)}(),h=function(){function e(){}return e=r([t.NgModule({declarations:[s],imports:[a.BrowserModule],exports:[s]})],e)}();e.DatePickerComponent=s,e.DatePickerModule=h,e.DatePickerService=n,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=date-picker-custom.umd.min.js.map