ionic4-date-picker/dist/components/date-picker-component/date-picker-component.metadata.json

ionic4 date picker module

[{"__symbolic":"module","version":4,"metadata":{"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":120,"character":1},"arguments":[{"selector":"ionic-calendar-date-picker","template":"\n<div  [ngStyle]=\"backgroundStyle\">\n    <ion-item *ngIf=\"showView === 'calendar'\" [ngStyle]=\"backgroundStyle\">\n        <ion-icon name=\"calendar\" slot=\"start\">\n        </ion-icon>\n        <ion-button fill=\"clear\" (click)=\"showMonthView()\" class=\"calendar-button\">\n            {{monthLabels[monthSelected-1]}}\n        </ion-button>\n        <ion-button fill=\"clear\" [disabled]=\"!hasYearSelection()\" (click)=\"showYearView()\" class=\"calendar-button\">\n            {{yearSelected}}\n        </ion-button>\n\n        <span slot=\"end\" *ngIf=\"hasPrevious() || hasNext()\">\n            <ion-button  fill=\"clear\" [disabled]=\"!hasPrevious()\" (click)=\"previous()\">\n                <ion-icon slot=\"icon-only\" name=\"ios-arrow-back\"></ion-icon>\n            </ion-button>\n            <ion-button fill=\"clear\" [disabled]=\"!hasNext()\" (click)=\"next()\">\n                <ion-icon slot=\"icon-only\" name=\"ios-arrow-forward\"></ion-icon>\n            </ion-button>\n        </span>\n    </ion-item>\n\n    <ion-grid *ngIf=\"showView === 'calendar'\">\n        <ion-row>\n            <ion-col *ngFor=\"let daylabel of dayLabels\" text-center [ngStyle]=\"dayLabelsStyle\">\n                {{daylabel}}\n            </ion-col>\n        </ion-row>\n        <ion-row *ngFor=\"let week of weeks\">\n            <ion-col *ngFor=\"let day of week\" (click)=\"selectDay(day)\" [ngStyle]=\"getDayStyle(day)\" text-center>\n                <span [ngStyle]=\"!day.inCalendar && notInCalendarStyle\">\n                   <span [ngStyle]=\"isValidDay(day) && !isOneOfTheValidDates(day) && invalidDateStyle\">{{isValidDay(day) ? day.dayOfMonth : '&nbsp;&nbsp;'}}</span>\n                </span>\n            </ion-col>\n        </ion-row>\n    </ion-grid>\n\n    <ion-grid *ngIf=\"showView === 'month'\">\n        <ion-row justify-content-end>\n            <ion-col text-end>\n                <ion-button fill=\"clear\" (click)=\"resetView()\">\n                    <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n                </ion-button>\n            </ion-col>\n        </ion-row>\n        <ion-row>\n            <ion-col *ngFor=\"let monthLabel of monthLabels; let i = index\" [ngStyle]=\"getMonthStyle(i)\" size=\"3\" (click)=\"selectMonth(i+1)\" text-center>\n                <span [class.invalidMonth]=\"!isValidMonth(i)\">{{monthLabel}}</span>\n            </ion-col>\n        </ion-row>\n    </ion-grid>\n\n    <ion-grid *ngIf=\"showView === 'year'\">\n        <ion-row>\n            <ion-col size=\"10\" text-center>\n                    <div *ngIf=\"hasPreviousYears() || hasNextYears()\">\n                        <ion-button fill=\"clear\" [disabled]=\"!hasPreviousYears()\"  (click)=\"showPreviousYears()\">\n                            <ion-icon slot=\"icon-only\" name=\"ios-arrow-back\"></ion-icon>\n                        </ion-button>\n                        <ion-button fill=\"clear\" [disabled]=\"true\" class=\"year-range\">\n                            {{startYear}} to {{endYear}}\n                        </ion-button>\n                    \n                        <ion-button fill=\"clear\" [disabled]=\"!hasNextYears()\" (click)=\"showNextYears()\">\n                            <ion-icon slot=\"icon-only\" name=\"ios-arrow-forward\"></ion-icon>\n                        </ion-button>\n                    </div>\n            </ion-col>\n            <ion-col size=\"2\" text-center>\n                <ion-button fill=\"clear\" (click)=\"resetView()\">\n                    <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n                </ion-button>\n            </ion-col>\n        </ion-row> \n        <ion-row>\n            <ion-col *ngFor=\"let year of years\" [ngStyle]=\"getYearStyle(year)\" size=\"3\" (click)=\"selectYear(year)\" text-center>\n                {{year}}\n            </ion-col>\n        </ion-row>\n    </ion-grid>\n</div>\n","styles":["\n  .item {\n      .item-inner {\n        border-bottom: none !important;\n      }\n    }\n\n  ion-icon {\n    font-size: 25px;\n  }\n\n  .year-range {\n    font-size: 15px;\n    font-weight: 550;\n    &.button[disabled] {\n      opacity: 1;\n      color: gray !important;\n    }\n  }\n\n  .calendar-button {\n    text-decoration: underline;\n    padding-right: 2px !important;\n    padding-left: 2px !important;\n  }\n\n  .invalidMonth {\n    color: #8b8b8b\n  }\n"]}]}],"members":{"monthLabels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"dayLabels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"date":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"fromDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":3}}]}],"toDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":3}}]}],"validDates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":3}}]}],"dateStyles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":3}}]}],"backgroundStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":3}}]}],"notInCalendarStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3}}]}],"dayLabelsStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3}}]}],"monthLabelsStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":3}}]}],"yearLabelsStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":3}}]}],"itemSelectedStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":3}}]}],"invalidDateStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":3}}]}],"todaysItemStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":3}}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":144,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"initOptions":[{"__symbolic":"method"}],"createCalendarWeeks":[{"__symbolic":"method"}],"hasPrevious":[{"__symbolic":"method"}],"hasNext":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"confirmDay":[{"__symbolic":"method"}],"selectDay":[{"__symbolic":"method"}],"showMonthView":[{"__symbolic":"method"}],"hasYearSelection":[{"__symbolic":"method"}],"showYearView":[{"__symbolic":"method"}],"generateYears":[{"__symbolic":"method"}],"showPreviousYears":[{"__symbolic":"method"}],"showNextYears":[{"__symbolic":"method"}],"hasPreviousYears":[{"__symbolic":"method"}],"hasNextYears":[{"__symbolic":"method"}],"selectMonth":[{"__symbolic":"method"}],"selectYear":[{"__symbolic":"method"}],"resetView":[{"__symbolic":"method"}],"isToday":[{"__symbolic":"method"}],"generateCalendarWeeks":[{"__symbolic":"method"}],"isValidDay":[{"__symbolic":"method"}],"isOneOfTheValidDates":[{"__symbolic":"method"}],"isValidMonth":[{"__symbolic":"method"}],"getDayStyle":[{"__symbolic":"method"}],"getMonthStyle":[{"__symbolic":"method"}],"getYearStyle":[{"__symbolic":"method"}]}}}}]