ng2-datepicker/bundles/ng2-datepicker.umd.min.js

ng2-datepicker is simple and minimal Angular datepicker component. It is fully customizable.

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("ngx-slimscroll"),require("date-fns"),require("date-fns/locale/en-US"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng2-datepicker",["exports","@angular/core","@angular/common","@angular/forms","ngx-slimscroll","date-fns","date-fns/locale/en-US","rxjs","rxjs/operators"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["ng2-datepicker"]={},e.ng.core,e.ng.common,e.ng.forms,e.slimscroll,e.dateFns,e.locale,e.rxjs,e.rxjs.operators)}(this,(function(e,n,a,t,i,r,o,s,c){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(o);
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */Object.create;function p(e,n){var a="function"==typeof Symbol&&e[Symbol.iterator];if(!a)return e;var t,i,r=a.call(e),o=[];try{for(;(void 0===n||n-- >0)&&!(t=r.next()).done;)o.push(t.value)}catch(e){i={error:e}}finally{try{t&&!t.done&&(a=r.return)&&a.call(r)}finally{if(i)throw i.error}}return o}Object.create;var u=new n.InjectionToken("Datepicker config");function y(e){return Object.assign(Object.assign({},h),e)}var h={minDate:null,maxDate:null,minYear:r.getYear(new Date)-30,maxYear:r.getYear(new Date)+30,placeholder:"",format:"LLLL do yyyy",formatTitle:"LLLL yyyy",formatDays:"EEEEE",firstCalendarDay:0,locale:d.default,position:"bottom",inputClass:"",calendarClass:"datepicker-default",scrollBarColor:"#dfe3e9",enableKeyboard:!0},f=function(){function e(e,a,t){this.elementRef=e,this.ref=a,this.options=Object.assign({},h),this.scrollOptions=new i.SlimScrollOptions(this.scrollBarOptions),this.isOpened=!1,this.innerValue=new Date,this.displayValue="",this.view="days",this.date=new Date,this.years=[],this.days=[],this.dayNames=[],this.scrollEvents=new n.EventEmitter,this.sub=new s.Subscription,this.onTouchedCallback=function(){},this.onChangeCallback=function(){},this.doc=t}return Object.defineProperty(e.prototype,"value",{get:function(){return this.innerValue},set:function(e){this.innerValue=e,this.displayValue=r.format(this.innerValue,this.options.format,{locale:this.options.locale}),this.onChangeCallback(this.innerValue)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"title",{get:function(){return r.format(this.date,this.options.formatTitle)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"scrollBarOptions",{get:function(){return{barBackground:this.options&&this.options.scrollBarColor||"#dfe3e9",gridBackground:"transparent",barBorderRadius:"3",gridBorderRadius:"3",barWidth:"6",gridWidth:"6",barMargin:"0",gridMargin:"0"}},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.view="days",this.date=new Date,this.init()},e.prototype.ngOnChanges=function(e){var n=this;"options"in e&&(this.options=y(this.options),this.scrollOptions=new i.SlimScrollOptions(this.scrollBarOptions),this.sub&&this.sub.unsubscribe(),this.options.enableKeyboard&&(this.sub=s.fromEvent(this.doc||document,"keyup").pipe(c.filter((function(){return n.isOpened}))).subscribe((function(e){switch(e.preventDefault(),e.stopPropagation(),e.key){case"Down":case"ArrowDown":n.prevYear();break;case"Up":case"ArrowUp":n.nextYear();break;case"Left":case"ArrowLeft":n.prevMonth();break;case"Right":case"ArrowRight":n.nextMonth();break;case"Esc":case"Escape":case"Enter":n.isOpened=!1;break;default:return}}))))},e.prototype.ngOnDestroy=function(){this.sub.unsubscribe()},e.prototype.toggle=function(){this.isOpened=!this.isOpened,this.isOpened&&(this.view="days",this.date=this.value,this.initDays())},e.prototype.toggleView=function(){this.view="days"===this.view?"years":"days","years"===this.view&&(this.ref.detectChanges(),this.scrollToYear())},e.prototype.nextMonth=function(){this.date=r.addMonths(this.date,1),this.initDays()},e.prototype.prevMonth=function(){this.date=r.subMonths(this.date,1),this.initDays()},e.prototype.nextYear=function(){this.date=r.addYears(this.date,1),this.initDays()},e.prototype.prevYear=function(){this.date=r.subYears(this.date,1),this.initDays()},e.prototype.setDate=function(e){this.date=this.days[e].date,this.value=this.date,this.initDays(),this.isOpened=!1},e.prototype.setYear=function(e){this.date=r.setYear(this.date,this.years[e].year),this.initDays(),this.initYears(),this.view="days"},e.prototype.scrollToYear=function(){var e=this.elementRef.nativeElement.querySelector(".main-calendar-years"),n=this.elementRef.nativeElement.querySelector(".year-unit.is-selected"),a=n.offsetTop-e.clientHeight/2+n.clientHeight/2,t=new i.SlimScrollEvent({type:"scrollTo",y:a,duration:100});this.scrollEvents.emit(t)},e.prototype.init=function(){this.initDayNames(),this.initDays(),this.initYears()},e.prototype.initDays=function(){var e=this,n=this.date||new Date,a=p([r.startOfMonth(n),r.endOfMonth(n)],2),t=a[0],i=a[1];this.days=r.eachDayOfInterval({start:t,end:i}).map((function(n){return e.generateDay(n)}));for(var o=r.getDay(t)-this.options.firstCalendarDay,s=o<0?7-this.options.firstCalendarDay:o,c=1;c<=s;c++){var l=r.subDays(t,c);this.days.unshift(this.generateDay(l,!1))}},e.prototype.initYears=function(){var e=this,n=this.options.maxYear-this.options.minYear+1;this.years=Array.from(new Array(n),(function(n,a){return a+e.options.minYear})).map((function(n){return{year:n,isThisYear:n===r.getYear(e.date)}}))},e.prototype.initDayNames=function(){this.dayNames=[];for(var e=this.options.firstCalendarDay,n=e;n<=6+e;n++){var a=r.setDay(new Date,n);this.dayNames.push(r.format(a,this.options.formatDays,{locale:this.options.locale}))}},e.prototype.generateDay=function(e,n){return void 0===n&&(n=!0),{date:e,day:r.getDate(e),month:r.getMonth(e),year:r.getYear(e),inThisMonth:n,isToday:r.isToday(e),isSelected:r.isSameDay(e,this.innerValue)&&r.isSameMonth(e,this.innerValue)&&r.isSameYear(e,this.innerValue),isSelectable:this.isDateSelectable(e)}},e.prototype.isDateSelectable=function(e){return(!this.options.minDate||!r.isBefore(e,this.options.minDate))&&(!this.options.maxDate||!r.isAfter(e,this.options.maxDate))},e.prototype.writeValue=function(e){e&&(this.innerValue=e,this.displayValue=r.format(this.innerValue,this.options.format,{locale:this.options.locale}),this.init())},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.onBlur=function(e){if(this.isOpened){var n=this.elementRef.nativeElement.querySelector(".datepicker-container > input");if(n&&e.target!==n&&!n.contains(e.target)){var a=this.elementRef.nativeElement.querySelector(".datepicker-container > .calendar-container");!a||a===e.target||a.contains(e.target)||e.target.classList.contains("year-unit")||(this.isOpened=!1)}}},e}();f.decorators=[{type:n.Component,args:[{selector:"ngx-datepicker",template:'<div class="datepicker-container" [class]="options.calendarClass">\n  <input\n    type="text"\n    [(ngModel)]="displayValue"\n    [class]="options.inputClass"\n    [placeholder]="options.placeholder"\n    readonly\n    (click)="toggle()"\n  />\n\n  <div class="calendar-container" *ngIf="isOpened">\n    <div class="top-container">\n      <div class="month-year-container">\n        <span class="month-year-text">\n          <span (click)="toggleView()">{{ title }}</span>\n        </span>\n      </div>\n      <div class="controls">\n        <svg\n          xmlns="http://www.w3.org/2000/svg"\n          class="control prev-month"\n          width="8"\n          height="13"\n          (click)="prevMonth()"\n          *ngIf="view === \'days\'"\n        >\n          <path\n            d="M7.575 1.131a1.063 1.063 0 00-1.502 0l-4.93 4.93c-.42.42-.42 1.099 0 1.518l4.93 4.93a1.063 1.063 0 001.503-1.503L3.388 6.82l4.186-4.186a1.063 1.063 0 000-1.503z"\n          />\n        </svg>\n        <svg\n          xmlns="http://www.w3.org/2000/svg"\n          class="control next-month"\n          width="8"\n          height="13"\n          (click)="nextMonth()"\n          *ngIf="view === \'days\'"\n        >\n          <path\n            d="M1.14 1.131a1.063 1.063 0 011.502 0l4.93 4.93c.42.42.42 1.099 0 1.518l-4.93 4.93a1.063 1.063 0 01-1.503-1.503L5.327 6.82 1.14 2.634a1.063 1.063 0 010-1.503z"\n          />\n        </svg>\n      </div>\n    </div>\n    <div class="main-calendar-container is-days" *ngIf="view === \'days\'">\n      <div class="main-calendar-day-names">\n        <span class="day-name-unit" *ngFor="let day of dayNames">{{ day }}</span>\n      </div>\n      <div class="main-calendar-days">\n        <span\n          class="day-unit"\n          *ngFor="let day of days; let i = index"\n          [ngClass]="{\n            \'is-prev-month\': !day.inThisMonth,\n            \'is-today\': day.isToday,\n            \'is-selected\': day.isSelected,\n            \'is-disabled\': !day.isSelectable\n          }"\n          (click)="day.isSelectable && setDate(i)"\n          >{{ day.day }}</span\n        >\n      </div>\n    </div>\n    <div class="main-calendar-container is-years" *ngIf="view === \'years\'">\n      <div class="main-calendar-years" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents">\n        <span\n          class="year-unit"\n          *ngFor="let year of years; let i = index"\n          [ngClass]="{ \'is-selected\': year.isThisYear }"\n          (click)="setYear(i)"\n          >{{ year.year }}</span\n        >\n      </div>\n    </div>\n  </div>\n</div>\n',providers:[{provide:t.NG_VALUE_ACCESSOR,useExisting:f,multi:!0}],styles:['.datepicker-container{position:relative;display:inline-block;box-sizing:border-box}.datepicker-container *{box-sizing:inherit}.datepicker-container input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.datepicker-container .is-hidden{display:none!important}.datepicker-container .calendar-container{position:absolute;width:320px;border-radius:4px;top:35px;left:0;z-index:10}.datepicker-container .calendar-container .top-container{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;padding:20px;display:flex;justify-content:space-between;align-items:center}.datepicker-container .calendar-container .top-container .month-year-container{height:100%;display:flex;align-items:center;cursor:pointer;position:relative}.datepicker-container .calendar-container .top-container .month-year-container .month-year-text{font-size:16px;width:100%}.datepicker-container .calendar-container .top-container .controls{height:100%;display:flex;justify-content:flex-end;align-items:center}.datepicker-container .calendar-container .top-container .controls .control{cursor:pointer;margin-left:20px}.datepicker-container .calendar-container .main-calendar-container{width:100%;height:100%;font-size:12px;display:block}.datepicker-container .calendar-container .main-calendar-container .main-calendar-day-names{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;height:35px;padding:0 10px}.datepicker-container .calendar-container .main-calendar-container .main-calendar-day-names .day-name-unit{width:calc(100% / 7);text-transform:uppercase;text-align:center}.datepicker-container .calendar-container .main-calendar-container .main-calendar-days,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:10px;width:100%;overflow:hidden;text-align:left;display:inline-block}.datepicker-container .calendar-container .main-calendar-container .main-calendar-days.is-hidden,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years.is-hidden{display:none}.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .day-unit,.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .year-unit,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .day-unit,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .year-unit{width:calc(100% / 7);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:13px;border-radius:50%}.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .day-unit:before,.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .year-unit:before,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .day-unit:before,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .year-unit:before{content:"";float:left;padding-top:calc(100% - 5px)}.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .day-unit.is-disabled,.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .year-unit.is-disabled,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .day-unit.is-disabled,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .year-unit.is-disabled{cursor:not-allowed}.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .day-unit.is-disabled:hover,.datepicker-container .calendar-container .main-calendar-container .main-calendar-days .year-unit.is-disabled:hover,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .day-unit.is-disabled:hover,.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .year-unit.is-disabled:hover{background:transparent}.datepicker-container .calendar-container .main-calendar-container .main-calendar-years{display:block;padding:10px;height:275px}.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .year-unit{width:calc(100% / 4);height:35px;border-radius:20px;margin:8px 0}.datepicker-container .calendar-container .main-calendar-container .main-calendar-years .year-unit:before{padding-top:0}.datepicker-default .calendar-container{background:#fff;border:1px solid #eaedf3;box-shadow:0 4px 12px rgba(0,0,0,.05);top:35px;left:0;font-weight:600}.datepicker-default .month-year-text{color:#010001}.datepicker-default .control path{fill:#aaa8ab}.datepicker-default .control:hover path{fill:#010001}.datepicker-default .main-calendar-day-names{border-bottom:1px solid #eaedf3}.datepicker-default .day-name-unit{color:#aaa8ab}.datepicker-default .day-unit,.datepicker-default .year-unit{color:#010001}.datepicker-default .day-unit.is-prev-month,.datepicker-default .year-unit.is-prev-month{color:#bbbabe}.datepicker-default .day-unit.is-today,.datepicker-default .year-unit.is-today{background:#edeef2}.datepicker-default .day-unit.is-selected,.datepicker-default .day-unit:hover,.datepicker-default .year-unit.is-selected,.datepicker-default .year-unit:hover{background:#010001;color:#fff}.datepicker-default .day-unit.is-disabled,.datepicker-default .year-unit.is-disabled{color:#aaa8ab}.datepicker-default .day-unit.is-disabled:hover,.datepicker-default .year-unit.is-disabled:hover{background:transparent}']}]}],f.ctorParameters=function(){return[{type:n.ElementRef},{type:n.ChangeDetectorRef},{type:void 0,decorators:[{type:n.Inject,args:[a.DOCUMENT]}]}]},f.propDecorators={options:[{type:n.Input}],scrollOptions:[{type:n.Input}],isOpened:[{type:n.Input}],onBlur:[{type:n.HostListener,args:["document:click",["$event"]]}]};var m=function(){function e(){}return e.forRoot=function(n){return{ngModule:e,providers:[{provide:u,useValue:y(n)}]}},e}();m.decorators=[{type:n.NgModule,args:[{imports:[a.CommonModule,t.FormsModule,i.NgSlimScrollModule],declarations:[f],exports:[f,a.CommonModule,t.FormsModule]}]}],e.DATEPICKER_OPTIONS=u,e.DatepickerComponent=f,e.DatepickerModule=m,e.defaultOptions=h,e.mergeDatepickerOptions=y,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng2-datepicker.umd.min.js.map