ng4-pick-datetime
Version:
Angular 4 Date Time Picker
359 lines (358 loc) • 17.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Optional, Output, ViewChild } from '@angular/core';
import { DateTimeAdapter } from './adapter/date-time-adapter.class';
import { CalendarCell, OwlCalendarBodyComponent } from './calendar-body.component';
import { DOWN_ARROW, END, ENTER, HOME, LEFT_ARROW, PAGE_DOWN, PAGE_UP, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { OwlDateTimeIntl } from './date-time-picker-intl.service';
export var YEARS_PER_ROW = 3;
export var YEAR_ROWS = 7;
var OwlMultiYearViewComponent = (function () {
function OwlMultiYearViewComponent(pickerIntl, dateTimeAdapter) {
this.pickerIntl = pickerIntl;
this.dateTimeAdapter = dateTimeAdapter;
this._selecteds = [];
this.initiated = false;
this.selectedChange = new EventEmitter();
this.pickerMomentChange = new EventEmitter();
this.keyboardEnter = new EventEmitter();
}
Object.defineProperty(OwlMultiYearViewComponent.prototype, "selected", {
get: function () {
return this._selected;
},
set: function (value) {
var oldSelected = this._selected;
value = this.dateTimeAdapter.deserialize(value);
this._selected = this.getValidDate(value);
if (!this.dateTimeAdapter.isSameDay(oldSelected, this._selected)) {
this.setSelectedYears();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "selecteds", {
get: function () {
return this._selecteds;
},
set: function (values) {
var _this = this;
this._selecteds = values.map(function (v) {
v = _this.dateTimeAdapter.deserialize(v);
return _this.getValidDate(v);
});
this.setSelectedYears();
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "pickerMoment", {
get: function () {
return this._pickerMoment;
},
set: function (value) {
var oldMoment = this._pickerMoment;
value = this.dateTimeAdapter.deserialize(value);
this._pickerMoment = this.getValidDate(value) || this.dateTimeAdapter.now();
if (oldMoment && this._pickerMoment &&
!this.isSameYearList(oldMoment, this._pickerMoment)) {
this.generateYearList();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "dateFilter", {
get: function () {
return this._dateFilter;
},
set: function (filter) {
this._dateFilter = filter;
if (this.initiated) {
this.generateYearList();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "minDate", {
get: function () {
return this._minDate;
},
set: function (value) {
value = this.dateTimeAdapter.deserialize(value);
this._minDate = this.getValidDate(value);
if (this.initiated) {
this.generateYearList();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "maxDate", {
get: function () {
return this._maxDate;
},
set: function (value) {
value = this.dateTimeAdapter.deserialize(value);
this._maxDate = this.getValidDate(value);
if (this.initiated) {
this.generateYearList();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "todayYear", {
get: function () {
return this._todayYear;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "years", {
get: function () {
return this._years;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "selectedYears", {
get: function () {
return this._selectedYears;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "isInSingleMode", {
get: function () {
return this.selectMode === 'single';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "isInRangeMode", {
get: function () {
return this.selectMode === 'range' || this.selectMode === 'rangeFrom'
|| this.selectMode === 'rangeTo';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "activeCell", {
get: function () {
if (this._pickerMoment) {
return this.dateTimeAdapter.getYear(this._pickerMoment) % (YEARS_PER_ROW * YEAR_ROWS);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "tableHeader", {
get: function () {
if (this._years && this._years.length > 0) {
return this._years[0][0].displayValue + " ~ " + this._years[YEAR_ROWS - 1][YEARS_PER_ROW - 1].displayValue;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "prevButtonLabel", {
get: function () {
return this.pickerIntl.prevMultiYearLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "nextButtonLabel", {
get: function () {
return this.pickerIntl.nextMultiYearLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "owlDTCalendarView", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlMultiYearViewComponent.prototype, "owlDTCalendarMultiYearView", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
OwlMultiYearViewComponent.prototype.ngOnInit = function () {
};
OwlMultiYearViewComponent.prototype.ngAfterContentInit = function () {
this._todayYear = this.dateTimeAdapter.getYear(this.dateTimeAdapter.now());
this.generateYearList();
this.initiated = true;
};
OwlMultiYearViewComponent.prototype.yearSelected = function (year) {
var firstDateOfMonth = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerMoment), 1);
var daysInMonth = this.dateTimeAdapter.getNumDaysInMonth(firstDateOfMonth);
var selected = this.dateTimeAdapter.createDate(year, this.dateTimeAdapter.getMonth(this.pickerMoment), Math.min(daysInMonth, this.dateTimeAdapter.getDate(this.pickerMoment)), this.dateTimeAdapter.getHours(this.pickerMoment), this.dateTimeAdapter.getMinutes(this.pickerMoment), this.dateTimeAdapter.getSeconds(this.pickerMoment));
this.selectedChange.emit(selected);
};
OwlMultiYearViewComponent.prototype.prevYearList = function (event) {
this._pickerMoment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, -1 * YEAR_ROWS * YEARS_PER_ROW);
this.generateYearList();
event.preventDefault();
};
OwlMultiYearViewComponent.prototype.nextYearList = function (event) {
this._pickerMoment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, YEAR_ROWS * YEARS_PER_ROW);
this.generateYearList();
event.preventDefault();
};
OwlMultiYearViewComponent.prototype.generateYearList = function () {
this._years = [];
var pickerMomentYear = this.dateTimeAdapter.getYear(this._pickerMoment);
var offset = pickerMomentYear % (YEARS_PER_ROW * YEAR_ROWS);
for (var i = 0; i < YEAR_ROWS; i++) {
var row = [];
for (var j = 0; j < YEARS_PER_ROW; j++) {
var year = pickerMomentYear - offset + (j + i * YEARS_PER_ROW);
var yearCell = this.createYearCell(year);
row.push(yearCell);
}
this._years.push(row);
}
return;
};
OwlMultiYearViewComponent.prototype.previousEnabled = function () {
if (!this.minDate) {
return true;
}
return !this.minDate || !this.isSameYearList(this._pickerMoment, this.minDate);
};
OwlMultiYearViewComponent.prototype.nextEnabled = function () {
return !this.maxDate || !this.isSameYearList(this._pickerMoment, this.maxDate);
};
OwlMultiYearViewComponent.prototype.handleCalendarKeydown = function (event) {
var moment;
switch (event.keyCode) {
case LEFT_ARROW:
moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, -1);
this.pickerMomentChange.emit(moment);
break;
case RIGHT_ARROW:
moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, 1);
this.pickerMomentChange.emit(moment);
break;
case UP_ARROW:
moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, -1 * YEARS_PER_ROW);
this.pickerMomentChange.emit(moment);
break;
case DOWN_ARROW:
moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, YEARS_PER_ROW);
this.pickerMomentChange.emit(moment);
break;
case HOME:
moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, -this.dateTimeAdapter.getYear(this._pickerMoment) % (YEARS_PER_ROW * YEAR_ROWS));
this.pickerMomentChange.emit(moment);
break;
case END:
moment = this.dateTimeAdapter.addCalendarYears(this._pickerMoment, (YEARS_PER_ROW * YEAR_ROWS) - this.dateTimeAdapter.getYear(this._pickerMoment) % (YEARS_PER_ROW * YEAR_ROWS) - 1);
this.pickerMomentChange.emit(moment);
break;
case PAGE_UP:
moment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, event.altKey ? -10 * (YEARS_PER_ROW * YEAR_ROWS) : -1 * (YEARS_PER_ROW * YEAR_ROWS));
this.pickerMomentChange.emit(moment);
break;
case PAGE_DOWN:
moment = this.dateTimeAdapter.addCalendarYears(this.pickerMoment, event.altKey ? 10 * (YEARS_PER_ROW * YEAR_ROWS) : (YEARS_PER_ROW * YEAR_ROWS));
this.pickerMomentChange.emit(moment);
break;
case ENTER:
this.yearSelected(this.dateTimeAdapter.getYear(this._pickerMoment));
this.keyboardEnter.emit();
break;
default:
return;
}
this.focusActiveCell();
event.preventDefault();
};
OwlMultiYearViewComponent.prototype.createYearCell = function (year) {
var startDateOfYear = this.dateTimeAdapter.createDate(year, 0, 1);
var ariaLabel = this.dateTimeAdapter.getYearName(startDateOfYear);
return new CalendarCell(year, year.toString(), ariaLabel, this.isYearEnabled(year));
};
OwlMultiYearViewComponent.prototype.setSelectedYears = function () {
var _this = this;
this._selectedYears = [];
if (this.isInSingleMode && this.selected) {
this._selectedYears[0] = this.dateTimeAdapter.getYear(this.selected);
}
if (this.isInRangeMode && this.selecteds) {
this._selectedYears = this.selecteds.map(function (selected) {
if (_this.dateTimeAdapter.isValid(selected)) {
return _this.dateTimeAdapter.getYear(selected);
}
else {
return null;
}
});
}
};
OwlMultiYearViewComponent.prototype.isYearEnabled = function (year) {
if (year === undefined || year === null ||
(this.maxDate && year > this.dateTimeAdapter.getYear(this.maxDate)) ||
(this.minDate && year < this.dateTimeAdapter.getYear(this.minDate))) {
return false;
}
if (!this.dateFilter) {
return true;
}
var firstOfYear = this.dateTimeAdapter.createDate(year, 0, 1);
for (var date = firstOfYear; this.dateTimeAdapter.getYear(date) == year; date = this.dateTimeAdapter.addCalendarDays(date, 1)) {
if (this.dateFilter(date)) {
return true;
}
}
return false;
};
OwlMultiYearViewComponent.prototype.isSameYearList = function (date1, date2) {
return Math.floor(this.dateTimeAdapter.getYear(date1) / (YEARS_PER_ROW * YEAR_ROWS)) ===
Math.floor(this.dateTimeAdapter.getYear(date2) / (YEARS_PER_ROW * YEAR_ROWS));
};
OwlMultiYearViewComponent.prototype.getValidDate = function (obj) {
return (this.dateTimeAdapter.isDateInstance(obj) && this.dateTimeAdapter.isValid(obj)) ? obj : null;
};
OwlMultiYearViewComponent.prototype.focusActiveCell = function () {
this.calendarBodyElm.focusActiveCell();
};
OwlMultiYearViewComponent.decorators = [
{ type: Component, args: [{
selector: 'owl-date-time-multi-year-view',
template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\" [disabled]=\"!previousEnabled()\" [attr.aria-label]=\"prevButtonLabel\" type=\"button\" tabindex=\"0\" (click)=\"prevYearList($event)\"><span class=\"owl-dt-control-button-content\" tabindex=\"-1\"><!-- <editor-fold desc=\"SVG Arrow Left\"> --> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\" width=\"100%\" height=\"100%\"><path style=\"fill-rule: evenodd; clip-rule: evenodd;\" d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546 c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681 l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\"/></svg><!-- </editor-fold> --></span></button><table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\"><thead class=\"owl-dt-calendar-header\"><tr><th colspan=\"3\">{{tableHeader}}</th></tr></thead><tbody owl-date-time-calendar-body role=\"grid\" [allowDisabledCellSelection]=\"true\" [rows]=\"years\" [numCols]=\"3\" [cellRatio]=\"3 / 7\" [activeCell]=\"activeCell\" [todayValue]=\"todayYear\" [selectedValues]=\"selectedYears\" [selectMode]=\"selectMode\" (keydown)=\"handleCalendarKeydown($event)\" (selectedValueChange)=\"yearSelected($event)\"></tbody></table><button class=\"owl-dt-control-button owl-dt-control-arrow-button\" [disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\" type=\"button\" tabindex=\"0\" (click)=\"nextYearList($event)\"><span class=\"owl-dt-control-button-content\" tabindex=\"-1\"><!-- <editor-fold desc=\"SVG Arrow Right\"> --> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250.738 250.738\" style=\"enable-background:new 0 0 250.738 250.738;\" xml:space=\"preserve\"><path style=\"fill-rule:evenodd;clip-rule:evenodd;\" d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n C197.237,120.447,195.534,115.448,191.75,111.689z\"/></svg><!-- </editor-fold> --></span></button>",
styles: [""],
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
},] },
];
OwlMultiYearViewComponent.ctorParameters = function () { return [
{ type: OwlDateTimeIntl, },
{ type: DateTimeAdapter, decorators: [{ type: Optional },] },
]; };
OwlMultiYearViewComponent.propDecorators = {
'selectMode': [{ type: Input },],
'selected': [{ type: Input },],
'selecteds': [{ type: Input },],
'pickerMoment': [{ type: Input },],
'dateFilter': [{ type: Input },],
'minDate': [{ type: Input },],
'maxDate': [{ type: Input },],
'selectedChange': [{ type: Output },],
'pickerMomentChange': [{ type: Output },],
'keyboardEnter': [{ type: Output },],
'calendarBodyElm': [{ type: ViewChild, args: [OwlCalendarBodyComponent,] },],
'owlDTCalendarView': [{ type: HostBinding, args: ['class.owl-dt-calendar-view',] },],
'owlDTCalendarMultiYearView': [{ type: HostBinding, args: ['class.owl-dt-calendar-multi-year-view',] },],
};
return OwlMultiYearViewComponent;
}());
export { OwlMultiYearViewComponent };