ng2-bootstrap
Version:
angular2 bootstrap components
54 lines (53 loc) • 4.17 kB
JavaScript
"use strict";
var core_1 = require('/core');
var ng2_bootstrap_config_1 = require('../ng2-bootstrap-config');
var datepicker_inner_component_1 = require('./datepicker-inner.component');
var MonthPickerComponent = (function () {
function MonthPickerComponent(datePicker) {
this.rows = [];
this.datePicker = datePicker;
}
Object.defineProperty(MonthPickerComponent.prototype, "isBS4", {
get: function () {
return ng2_bootstrap_config_1.Ng2BootstrapConfig.theme === ng2_bootstrap_config_1.Ng2BootstrapTheme.BS4;
},
enumerable: true,
configurable: true
});
MonthPickerComponent.prototype.ngOnInit = function () {
var self = this;
this.datePicker.stepMonth = { years: 1 };
this.datePicker.setRefreshViewHandler(function () {
var months = new Array(12);
var year = this.activeDate.getFullYear();
var date;
for (var i = 0; i < 12; i++) {
date = new Date(year, i, 1);
date = this.fixTimeZone(date);
months[i] = this.createDateObject(date, this.formatMonth);
months[i].uid = this.uniqueId + '-' + i;
}
self.title = this.dateFilter(this.activeDate, this.formatMonthTitle);
self.rows = this.split(months, self.datePicker.monthColLimit);
}, 'month');
this.datePicker.setCompareHandler(function (date1, date2) {
var d1 = new Date(date1.getFullYear(), date1.getMonth());
var d2 = new Date(date2.getFullYear(), date2.getMonth());
return d1.getTime() - d2.getTime();
}, 'month');
this.datePicker.refreshView();
};
// todo: key events implementation
MonthPickerComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'monthpicker',
template: "\n<table *ngIf=\"datePicker.datepickerMode==='month'\" role=\"grid\">\n <thead>\n <tr>\n <th>\n <button type=\"button\" class=\"btn btn-default btn-sm pull-left\"\n (click)=\"datePicker.move(-1)\" tabindex=\"-1\">\n <i class=\"glyphicon glyphicon-chevron-left\"></i>\n </button></th>\n <th [attr.colspan]=\"((datePicker.monthColLimit - 2) <= 0) ? 1 : datePicker.monthColLimit - 2\">\n <button [id]=\"datePicker.uniqueId + '-title'\"\n type=\"button\" class=\"btn btn-default btn-sm\"\n (click)=\"datePicker.toggleMode()\"\n [disabled]=\"datePicker.datepickerMode === maxMode\"\n [ngClass]=\"{disabled: datePicker.datepickerMode === maxMode}\" tabindex=\"-1\" style=\"width:100%;\">\n <strong>{{title}}</strong>\n </button>\n </th>\n <th>\n <button type=\"button\" class=\"btn btn-default btn-sm pull-right\"\n (click)=\"datePicker.move(1)\" tabindex=\"-1\">\n <i class=\"glyphicon glyphicon-chevron-right\"></i>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let rowz of rows\">\n <td *ngFor=\"let dtz of rowz\" class=\"text-center\" role=\"gridcell\" id=\"{{dtz.uid}}\" [ngClass]=\"dtz.customClass\">\n <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-default\"\n [ngClass]=\"{'btn-link': isBS4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBS4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBS4 && datePicker.isActive(dtz)}\"\n [disabled]=\"dtz.disabled\"\n (click)=\"datePicker.select(dtz.date)\" tabindex=\"-1\">\n <span [ngClass]=\"{'text-success': isBS4 && dtz.current, 'text-info': !isBS4 && dtz.current}\">{{dtz.label}}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n "
},] },
];
/** @nocollapse */
MonthPickerComponent.ctorParameters = [
{ type: datepicker_inner_component_1.DatePickerInnerComponent, },
];
return MonthPickerComponent;
}());
exports.MonthPickerComponent = MonthPickerComponent;