ion-double-datepicker/components/datepicker.component.metadata.json

A double-date picker for ionic

[{"__symbolic":"module","version":4,"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 (tap)=\"setView(views.Month, getTempMonth(), months.length, yearScroll)\" class=\"col datepicker-month\">\n                    {{monthShort(getTempMonth())}}\n                </div>\n            </div>\n            <div class=\"row\">\n                <div (tap)=\"setView(views.Day, getTempDate(),getDayList().length, dayScroll)\" class=\"col datepicker-day-of-month \">\n                    {{getTempDate()}}\n                </div>\n            </div>\n            <div class=\"row\">\n                <div  (tap)=\"setView(views.Year, getTempYear() - 1901, years.length, yearScroll)\" class=\"col datepicker-year \">\n                    {{ getTempYear()}}\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"datepicker-calendar\" \n    *ngIf=\"view === views.Calendar\"\n        [ngClass]=\"config.bodyClasses\">\n        <div class=\"row col datepicker-controls\">\n            <button (tap)=\"prevMonth()\" ion-button>\n                    <ion-icon name=\"arrow-back\"></ion-icon>\n                </button>            \n                {{getTempMonth()}} {{getTempYear()}}\n            <button (tap)=\"nextMonth()\"ion-button>\n                    <ion-icon name=\"arrow-forward\"></ion-icon>\n            </button>\n        </div>\n        <div class=\"weekdays-row row\">\n            <span class=\"col calendar-cell\"\n                *ngFor=\"let dayOfWeek of weekdays\">\n                    {{dayOfWeekShort(dayOfWeek)}}\n                </span>\n        </div>\n        <div class=\"calendar-wrapper\">\n            <div class=\"row calendar-row\" *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-start': isSelectedStartDate(getDate(i, j)),\n                  'datepicker-end': isSelectedEndDate(getDate(i, j)),\n                  'datepicker-between': isBetweenDates(getDate(i, j)),\n                  'datepicker-current' : isActualDate(getDate(i, j)),\n                  'datepicker-disabled': isDisabled(getDate(i, j)),\n                  'datepicker-temp': isTempDate(getDate(i, j)),\n                  'datepicker-mark' : isMark(getDate(i, j))\n                  }\"\n                    (tap)=\"selectDate(getDate(i, j))\">\n\t\t\t\t\t{{getDateAsDay(i, j)}}\n\t\t\t\t</span>\n            </div>\n        </div>\n    </div>\n    <div [hidden]=\"view !== views.Year\" #yearScroll class=\"datepicker-rows\">\n        <ng-container  *ngFor=\"let year of years\">    \n            <div  *ngIf=\"testYear(year) && view === views.Year\" (tap)=\"setSelectedYear(year, index)\" [class.active]=\"getTempYear() === year\" [class.selected]=\"getSelectedYear() === year\" class=\"row\">\n                {{year}}\n            </div>\n        </ng-container>\n    </div>\n        <div [hidden]=\"view !== views.Month\" #monthScroll class=\"datepicker-rows\">\n        <ng-container *ngFor=\"let month of months;let i = index\">\n            <div  *ngIf=\"testMonth(i)  && view === views.Month\" (tap)=\"setSelectedMonth(i, index)\" [class.active]=\"getTempMonth() === month\" [class.selected]=\"getSelectedMonth() === month\"   class=\"row\">\n                {{month}}\n            </div>\n        </ng-container>\n    </div>\n    <div [hidden]=\"view !== views.Day\" #dayScroll class=\"datepicker-rows\">\n       <ng-container *ngFor=\"let day of getDayList()\">\n            <div class=\"row\" *ngIf=\"testDay(day)  && view === views.Day\" [class.active]=\"getTempDate() === day\" [class.selected]=\"getSelectedDate() === day\" (tap)=\"setSelectedDay(day, index)\" >\n                {{day}}\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"datepicker-footer\">\n        <button (tap)=\"onCancel()\"\n            ion-button>\n            {{config.cancelText || 'Cancel'}}</button>\n        <button (tap)=\"onDone()\"\n            ion-button>\n            {{config.okText || 'OK'}}</button>\n    </div>\n</div>\n    ","styles":["\n    ionic2-datepicker .col {\n        padding: 5px;\n        position: relative;\n        width: 100%;\n        margin: 0;\n        min-height: 1px;\n        -webkit-flex-basis: 0;\n        -ms-flex-preferred-size: 0;\n        flex-basis: 0;\n        -webkit-box-flex: 1;\n        -webkit-flex-grow: 1;\n        -ms-flex-positive: 1;\n        flex-grow: 1;\n        max-width: 100%;\n    }\n    ionic2-datepicker .row {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-flex-wrap: wrap;\n        -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n      }\nionic2-datepicker .datepicker-wrapper {\n  height: 100%;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header {\n  color: white;\n  background-color: #009688;\n  display: flex;\n  flex-flow: column;\n  height: 35%;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .date-header {\n  display: flex;\n  flex-flow: column;\n  text-align: center;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .date-header .datepicker-day-of-month {\n  font-size: 60px;\n  font-weight: 700;\n}\nionic2-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}\nionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header {\n  padding: 8px 10px;\n  background-color: #008d7f;\n}\nionic2-datepicker .datepicker-wrapper .datepicker-header .weekday-header .weekday-title {\n  font-weight: bold;\n  text-align: center;\n}\nionic2-datepicker .weekdays-row {\n  text-align: center;\n}\nionic2-datepicker .datepicker-calendar {\n  height: calc(100% - (35% + 60px));\n}\n\nionic2-datepicker .datepicker-rows {\n    height: calc(100% - (35% + 60px));\n    overflow-y:scroll;\n    display:flex;\n   flex-direction:column;\n    align-items:center;\n}\nionic2-datepicker .datepicker-rows .row {\n    min-height: 30px;\n    display: flex;\n    align-items: center;\n    align-content: center;\n    flex-direction: column;\n    justify-content: center;\n    width: 100%;\n}\n\nionic2-datepicker .datepicker-rows .row.selected {\n    background-color: #b6d9d6;\n    border-radius: 20px;\n}\n\nionic2-datepicker .datepicker-rows .row.active {\n    background-color: #b6c2d9;\n    border-radius: 20px;\n}\n\nionic2-datepicker .datepicker-calendar .datepicker-controls {\n  align-items: center;\n  justify-content: space-between;\n}\nionic2-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\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-mark {\n  background-color:#5b6c6b;\n  border-radius: 20px;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-start {\n  background-color: #2e72e1;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-end {\n  background-color: #2e72e1;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-between {\n  background-color: #c5d2eb;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-start:before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 0;\n    right: -5px;\n    z-index: 1;\n    height: 0;\n    top: 7.2px;\n    border-top: 6px solid transparent;\n    border-left: 6px solid #2D72E1;\n    border-bottom: 6px solid transparent;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-end:before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 0;\n    left: -5px;\n    z-index: 1;\n    height: 0;\n    top: 7.2px;\n    border-top: 6px solid transparent;\n    border-right: 6px solid #2D72E1;\n    border-bottom: 6px solid transparent;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-temp {\n    background-color: #6f90cc;\n    border-radius: 0px;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-current {\n  border-radius: 0px;\n}\nionic2-datepicker .datepicker-calendar .calendar-wrapper .datepicker-disabled {\n  color: #aaaaaa;\n}\n\nionic2-datepicker .datepicker-calendar .calendar-wrapper .calendar-cell {\n  flex-flow: row wrap;\n  text-align: center;\n}\nionic2-datepicker .datepicker-footer {\n  display: flex;\n  justify-content: space-between;\n  height: 60px;\n}\nionic2-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":"../services/datepicker.service","name":"DateService"}]}],"initialize":[{"__symbolic":"method"}],"createDateList":[{"__symbolic":"method"}],"getDate":[{"__symbolic":"method"}],"getDateAsDay":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"testYear":[{"__symbolic":"method"}],"testMonth":[{"__symbolic":"method"}],"testDay":[{"__symbolic":"method"}],"isMark":[{"__symbolic":"method"}],"isActualDate":[{"__symbolic":"method"}],"isSelectedDate":[{"__symbolic":"method"}],"isTempDate":[{"__symbolic":"method"}],"isSelectedStartDate":[{"__symbolic":"method"}],"isSelectedEndDate":[{"__symbolic":"method"}],"isBetweenDates":[{"__symbolic":"method"}],"selectSingleDate":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"getSelectedWeekday":[{"__symbolic":"method"}],"getSelectedMonth":[{"__symbolic":"method"}],"getDayList":[{"__symbolic":"method"}],"getTempMonth":[{"__symbolic":"method"}],"getTempYear":[{"__symbolic":"method"}],"getTempDate":[{"__symbolic":"method"}],"getSelectedDate":[{"__symbolic":"method"}],"getSelectedYear":[{"__symbolic":"method"}],"setSelectedMonth":[{"__symbolic":"method"}],"setSelectedDay":[{"__symbolic":"method"}],"setSelectedYear":[{"__symbolic":"method"}],"setView":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onDone":[{"__symbolic":"method"}],"limitTo":[{"__symbolic":"method"}],"monthShort":[{"__symbolic":"method"}],"dayOfWeekShort":[{"__symbolic":"method"}],"nextMonth":[{"__symbolic":"method"}],"prevMonth":[{"__symbolic":"method"}],"areEqualDates":[{"__symbolic":"method"}],"isInRange":[{"__symbolic":"method"}],"areSelectedDates":[{"__symbolic":"method"}],"getNearestDate":[{"__symbolic":"method"}],"sortDates":[{"__symbolic":"method"}]}}}}]