ionic3-datepicker/components/datepicker.component.metadata.json

A date picker for ionic 3 and 2 framework

[{"__symbolic":"module","version":3,"metadata":{"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"template":"\n        <div class=\"datepicker-wrapper\">\n            <div class=\"datepicker-header\"\n                 [ngClass]=\"config.headerClasses\">\n                <div class=\"weekday-header\">\n                    <div class=\"weekday-title\">{{getSelectedWeekday()}}</div>\n                </div>\n                <div class=\"date-header\">\n                    <div class=\"row\">\n                        <div class=\"col datepicker-month\">\n                            {{limitTo(getSelectedMonth(), 3)}}\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col datepicker-day-of-month \">\n                            {{selectedDate | date: 'd'}}\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col datepicker-year \">\n                            {{selectedDate | date: 'yyyy'}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"datepicker-calendar\"\n                 [ngClass]=\"config.bodyClasses\">\n                <div class=\"row col datepicker-controls\">\n                    <button (click)=\"prevMonth()\" [disabled]=\"previousDisabled\"\n                            ion-button=\"\"\n                            class=\"disable-hover button button-ios button-default button-default-ios\">\n                <span class=\"button-inner\">\n                    <ion-icon name=\"arrow-back\" role=\"img\"\n                              class=\"icon icon-ios ion-ios-arrow-back\" aria-label=\"arrow-back\" ng-reflect-name=\"arrow-back\">\n\n                    </ion-icon></span>\n                        <div class=\"button-effect\"></div>\n                    </button>\n                    <select title=\"Month\" name=\"equiptype\" class=\"form-control\" [formControl]=\"monthChanged\" [(ngModel)]=\"selectedMonth\" required>\n                        <option></option>\n                        <option *ngFor=\"let mon of months\" [ngValue]=\"mon\">{{mon}}</option>\n                    </select>\n                    <select title=\"Month\" name=\"equiptype\" class=\"form-control\" [formControl]=\"yearChanged\" [(ngModel)]=\"selectedYear\" required>\n                        <option></option>\n                        <option *ngFor=\"let yea of yearsMaxMin\" [ngValue]=\"yea\">{{yea}}</option>\n                    </select>\n                    <button (click)=\"nextMonth()\" [disabled]=\"nextDisabled\"\n                            ion-button=\"\"\n                            class=\"disable-hover button button-ios button-default button-default-ios\">\n                <span class=\"button-inner\">\n                    <ion-icon name=\"arrow-forward\" role=\"img\"\n                              class=\"icon icon-ios ion-ios-arrow-forward\" aria-label=\"arrow-forward\" ng-reflect-name=\"arrow-forward\">\n                    </ion-icon></span>\n                        <div class=\"button-effect\"></div>\n                    </button>\n                </div>\n                <div class=\"weekdays-row row\">\n            <span class=\"col calendar-cell\"\n                  *ngFor=\"let dayOfWeek of weekdays\">\n                    {{limitTo(dayOfWeek, 3)}}\n                </span>\n                </div>\n                <div class=\"calendar-wrapper\">\n                    <div class=\"row calendar-row\"\n                         *ngFor=\"let week of rows;let i = index;\">\n                <span class=\"col calendar-cell\"\n                      *ngFor=\"let day of cols;let j=index;\"\n                      [ngClass]=\"{\n                  'datepicker-date-col': getDate(i, j) !== undefined,\n                  'datepicker-selected': isSelectedDate(getDate(i, j)),\n                  'datepicker-current' : isActualDate(getDate(i, j)),\n                  'datepicker-disabled': isDisabled(getDate(i, j)),\n                  'datepicker-mark' : isMark(getDate(i, j))\n                  }\"\n                      (click)=\"selectDate(getDate(i, j))\">\n\t\t\t\t\t{{getDate(i, j) | date:'d'}}\n\t\t\t\t</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"datepicker-footer\">\n                <button (click)=\"onCancel($event)\"\n                        ion-button=\"\"\n                        class=\"button button-clear button-small col-offset-33 disable-hover button button-ios button-default button-default-ios\">\n                    <span class=\"button-inner\">{{config.cancelText || 'Cancel'}}</span>\n                    <div class=\"button-effect\"></div>\n                </button>\n                <button (click)=\"onDone($event)\"\n                        ion-button=\"\"\n                        class=\"button button-clear button-small disable-hover button button-ios button-default button-default-ios\">\n                    <span class=\"button-inner\">{{config.okText || 'OK'}}</span>\n                    <div class=\"button-effect\"></div>\n                </button>\n            </div>\n        </div>\n    ","styles":["\n        ionic2-datepicker .datepicker-wrapper {\n            height: 100%;\n            background-color: white;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header {\n            color: white;\n            background-color: #009688;\n            display: flex;\n            flex-flow: column;\n            height: 35%;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header {\n            display: flex;\n            flex-flow: column;\n            text-align: center;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-day-of-month {\n            font-size: 60px;\n            font-weight: 700;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-year, ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-month {\n            font-size: 14px;\n            margin-top: 10px;\n            margin-bottom: 10px;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header {\n            padding: 8px 10px;\n            background-color: #008d7f;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header .weekday-title {\n            font-weight: bold;\n            text-align: center;\n        }\n\n        ionic2-datepicker .weekdays-row {\n            text-align: center;\n        }\n\n        ionic2-datepicker .datepicker-calendar {\n            height: calc(100% - (35% + 60px));\n        }\n\n        ionic2-datepicker .datepicker-calendar .datepicker-controls {\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper {\n            height: calc(100% - 60px - 40px);\n            display: flex;\n            flex-direction: column;\n            justify-content: space-around;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-mark {\n            background-color: #5b6c6b;\n            border-radius: 20px;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-selected {\n            background-color: #b6d9d6;\n            border-radius: 20px;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-current {\n            color: #3caa9f;\n            border-radius: 20px;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-disabled {\n            color: #aaaaaa;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .calendar-cell {\n            flex-flow: row wrap;\n            text-align: center;\n        }\n\n        ionic2-datepicker .datepicker-footer {\n            display: flex;\n            justify-content: space-between;\n            height: 60px;\n        }\n\n        ionic2-datepicker .datepicker-footer button {\n            width: 100%;\n        }\n\n    "],"selector":"ionic2-datepicker","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"./datepicker.service","name":"DateService"}]}],"initialize":[{"__symbolic":"method"}],"initSelectBoxes":[{"__symbolic":"method"}],"initSelectBoxListener":[{"__symbolic":"method"}],"checkDisableButtons":[{"__symbolic":"method"}],"createDateList":[{"__symbolic":"method"}],"getDate":[{"__symbolic":"method"}],"getDateAsDay":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"isMark":[{"__symbolic":"method"}],"isActualDate":[{"__symbolic":"method"}],"isActualMonth":[{"__symbolic":"method"}],"isActualYear":[{"__symbolic":"method"}],"isSelectedDate":[{"__symbolic":"method"}],"isSelectedMonth":[{"__symbolic":"method"}],"isSelectedYear":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"getSelectedWeekday":[{"__symbolic":"method"}],"getSelectedMonth":[{"__symbolic":"method"}],"getTempMonth":[{"__symbolic":"method"}],"getTempYear":[{"__symbolic":"method"}],"getSelectedDate":[{"__symbolic":"method"}],"getSelectedYear":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"selectMonthOrYear":[{"__symbolic":"method"}],"areEqualDates":[{"__symbolic":"method"}],"limitTo":[{"__symbolic":"method"}],"getMonthRows":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"prevMonth":[{"__symbolic":"method"}],"setDateAfterSelection":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DatePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"template":"\n        <div class=\"datepicker-wrapper\">\n            <div class=\"datepicker-header\"\n                 [ngClass]=\"config.headerClasses\">\n                <div class=\"weekday-header\">\n                    <div class=\"weekday-title\">{{getSelectedWeekday()}}</div>\n                </div>\n                <div class=\"date-header\">\n                    <div class=\"row\">\n                        <div class=\"col datepicker-month\">\n                            {{limitTo(getSelectedMonth(), 3)}}\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col datepicker-day-of-month \">\n                            {{selectedDate | date: 'd'}}\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col datepicker-year \">\n                            {{selectedDate | date: 'yyyy'}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"datepicker-calendar\"\n                 [ngClass]=\"config.bodyClasses\">\n                <div class=\"row col datepicker-controls\">\n                    <button (click)=\"prevMonth()\" [disabled]=\"previousDisabled\"\n                            ion-button=\"\"\n                            class=\"disable-hover button button-ios button-default button-default-ios\">\n                <span class=\"button-inner\">\n                    <ion-icon name=\"arrow-back\" role=\"img\"\n                              class=\"icon icon-ios ion-ios-arrow-back\" aria-label=\"arrow-back\" ng-reflect-name=\"arrow-back\">\n\n                    </ion-icon></span>\n                        <div class=\"button-effect\"></div>\n                    </button>\n                    <select title=\"Month\" name=\"equiptype\" class=\"form-control\" [formControl]=\"monthChanged\" [(ngModel)]=\"selectedMonth\" required>\n                        <option></option>\n                        <option *ngFor=\"let mon of months\" [ngValue]=\"mon\">{{mon}}</option>\n                    </select>\n                    <select title=\"Month\" name=\"equiptype\" class=\"form-control\" [formControl]=\"yearChanged\" [(ngModel)]=\"selectedYear\" required>\n                        <option></option>\n                        <option *ngFor=\"let yea of yearsMaxMin\" [ngValue]=\"yea\">{{yea}}</option>\n                    </select>\n                    <button (click)=\"nextMonth()\" [disabled]=\"nextDisabled\"\n                            ion-button=\"\"\n                            class=\"disable-hover button button-ios button-default button-default-ios\">\n                <span class=\"button-inner\">\n                    <ion-icon name=\"arrow-forward\" role=\"img\"\n                              class=\"icon icon-ios ion-ios-arrow-forward\" aria-label=\"arrow-forward\" ng-reflect-name=\"arrow-forward\">\n                    </ion-icon></span>\n                        <div class=\"button-effect\"></div>\n                    </button>\n                </div>\n                <div class=\"weekdays-row row\">\n            <span class=\"col calendar-cell\"\n                  *ngFor=\"let dayOfWeek of weekdays\">\n                    {{limitTo(dayOfWeek, 3)}}\n                </span>\n                </div>\n                <div class=\"calendar-wrapper\">\n                    <div class=\"row calendar-row\"\n                         *ngFor=\"let week of rows;let i = index;\">\n                <span class=\"col calendar-cell\"\n                      *ngFor=\"let day of cols;let j=index;\"\n                      [ngClass]=\"{\n                  'datepicker-date-col': getDate(i, j) !== undefined,\n                  'datepicker-selected': isSelectedDate(getDate(i, j)),\n                  'datepicker-current' : isActualDate(getDate(i, j)),\n                  'datepicker-disabled': isDisabled(getDate(i, j)),\n                  'datepicker-mark' : isMark(getDate(i, j))\n                  }\"\n                      (click)=\"selectDate(getDate(i, j))\">\n\t\t\t\t\t{{getDate(i, j) | date:'d'}}\n\t\t\t\t</span>\n                    </div>\n                </div>\n            </div>\n            <div class=\"datepicker-footer\">\n                <button (click)=\"onCancel($event)\"\n                        ion-button=\"\"\n                        class=\"button button-clear button-small col-offset-33 disable-hover button button-ios button-default button-default-ios\">\n                    <span class=\"button-inner\">{{config.cancelText || 'Cancel'}}</span>\n                    <div class=\"button-effect\"></div>\n                </button>\n                <button (click)=\"onDone($event)\"\n                        ion-button=\"\"\n                        class=\"button button-clear button-small disable-hover button button-ios button-default button-default-ios\">\n                    <span class=\"button-inner\">{{config.okText || 'OK'}}</span>\n                    <div class=\"button-effect\"></div>\n                </button>\n            </div>\n        </div>\n    ","styles":["\n        ionic2-datepicker .datepicker-wrapper {\n            height: 100%;\n            background-color: white;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header {\n            color: white;\n            background-color: #009688;\n            display: flex;\n            flex-flow: column;\n            height: 35%;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header {\n            display: flex;\n            flex-flow: column;\n            text-align: center;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-day-of-month {\n            font-size: 60px;\n            font-weight: 700;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-year, ionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-month {\n            font-size: 14px;\n            margin-top: 10px;\n            margin-bottom: 10px;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header {\n            padding: 8px 10px;\n            background-color: #008d7f;\n        }\n\n        ionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header .weekday-title {\n            font-weight: bold;\n            text-align: center;\n        }\n\n        ionic2-datepicker .weekdays-row {\n            text-align: center;\n        }\n\n        ionic2-datepicker .datepicker-calendar {\n            height: calc(100% - (35% + 60px));\n        }\n\n        ionic2-datepicker .datepicker-calendar .datepicker-controls {\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper {\n            height: calc(100% - 60px - 40px);\n            display: flex;\n            flex-direction: column;\n            justify-content: space-around;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-mark {\n            background-color: #5b6c6b;\n            border-radius: 20px;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-selected {\n            background-color: #b6d9d6;\n            border-radius: 20px;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-current {\n            color: #3caa9f;\n            border-radius: 20px;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-disabled {\n            color: #aaaaaa;\n        }\n\n        ionic2-datepicker .datepicker-calendar .calendar-wrapper .calendar-cell {\n            flex-flow: row wrap;\n            text-align: center;\n        }\n\n        ionic2-datepicker .datepicker-footer {\n            display: flex;\n            justify-content: space-between;\n            height: 60px;\n        }\n\n        ionic2-datepicker .datepicker-footer button {\n            width: 100%;\n        }\n\n    "],"selector":"ionic2-datepicker","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"ViewController"},{"__symbolic":"reference","module":"ionic-angular","name":"NavParams"},{"__symbolic":"reference","module":"./datepicker.service","name":"DateService"}]}],"initialize":[{"__symbolic":"method"}],"initSelectBoxes":[{"__symbolic":"method"}],"initSelectBoxListener":[{"__symbolic":"method"}],"checkDisableButtons":[{"__symbolic":"method"}],"createDateList":[{"__symbolic":"method"}],"getDate":[{"__symbolic":"method"}],"getDateAsDay":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"isMark":[{"__symbolic":"method"}],"isActualDate":[{"__symbolic":"method"}],"isActualMonth":[{"__symbolic":"method"}],"isActualYear":[{"__symbolic":"method"}],"isSelectedDate":[{"__symbolic":"method"}],"isSelectedMonth":[{"__symbolic":"method"}],"isSelectedYear":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"getSelectedWeekday":[{"__symbolic":"method"}],"getSelectedMonth":[{"__symbolic":"method"}],"getTempMonth":[{"__symbolic":"method"}],"getTempYear":[{"__symbolic":"method"}],"getSelectedDate":[{"__symbolic":"method"}],"getSelectedYear":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"selectMonthOrYear":[{"__symbolic":"method"}],"areEqualDates":[{"__symbolic":"method"}],"limitTo":[{"__symbolic":"method"}],"getMonthRows":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"prevMonth":[{"__symbolic":"method"}],"setDateAfterSelection":[{"__symbolic":"method"}]}}}}]