ng2-datepicker/ng2-datepicker.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"DatepickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":54,"character":1},"arguments":[{"selector":"ngx-datepicker","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":58,"character":25},"useExisting":{"__symbolic":"reference","name":"DatepickerComponent"},"multi":true}],"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","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}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"scrollOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"isOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":86,"character":78},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":86,"character":85}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":86,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":86,"character":58},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"toggleView":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"prevMonth":[{"__symbolic":"method"}],"nextYear":[{"__symbolic":"method"}],"prevYear":[{"__symbolic":"method"}],"setDate":[{"__symbolic":"method"}],"setYear":[{"__symbolic":"method"}],"scrollToYear":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"initDays":[{"__symbolic":"method"}],"initYears":[{"__symbolic":"method"}],"initDayNames":[{"__symbolic":"method"}],"generateDay":[{"__symbolic":"method"}],"isDateSelectable":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":304,"character":3},"arguments":["document:click",["$event"]]}]}]}},"DatepickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26},{"__symbolic":"reference","module":"ngx-slimscroll","name":"NgSlimScrollModule","line":8,"character":39}],"declarations":[{"__symbolic":"reference","name":"DatepickerComponent"}],"exports":[{"__symbolic":"reference","name":"DatepickerComponent"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":33},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":47}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["options"],"value":{"ngModule":{"__symbolic":"reference","name":"DatepickerModule"},"providers":[{"provide":{"__symbolic":"reference","name":"DATEPICKER_OPTIONS"},"useValue":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"mergeDatepickerOptions"},"arguments":[{"__symbolic":"reference","name":"options"}]}}]}}}},"DatepickerOptions":{"__symbolic":"interface"},"DATEPICKER_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":22,"character":38},"arguments":["Datepicker config"]},"mergeDatepickerOptions":{"__symbolic":"function","parameters":["opts"],"value":{}},"defaultOptions":{"minDate":null,"maxDate":null,"minYear":{"__symbolic":"binop","operator":"-","left":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"date-fns","name":"getYear","line":31,"character":11},"arguments":[{"__symbolic":"new","expression":{"__symbolic":"reference","name":"Date"}}]},"right":30},"maxYear":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"date-fns","name":"getYear","line":32,"character":11},"arguments":[{"__symbolic":"new","expression":{"__symbolic":"reference","name":"Date"}}]},"right":30},"placeholder":"","format":"LLLL do yyyy","formatTitle":"LLLL yyyy","formatDays":"EEEEE","firstCalendarDay":0,"position":"bottom","inputClass":"","calendarClass":"datepicker-default","scrollBarColor":"#dfe3e9","enableKeyboard":true}},"origins":{"DatepickerComponent":"./lib/datepicker.component","DatepickerModule":"./lib/datepicker.module","DatepickerOptions":"./lib/datepicker-options.interface","DATEPICKER_OPTIONS":"./lib/datepicker-options.interface","mergeDatepickerOptions":"./lib/datepicker-options.interface","defaultOptions":"./lib/datepicker-options.interface"},"importAs":"ng2-datepicker"}