ng-pick-datetime
Version:
Angular Date Time Picker
378 lines (377 loc) • 20.3 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Inject, Input, NgZone, Optional, Output } from '@angular/core';
import { OwlDateTimeIntl } from './date-time-picker-intl.service';
import { DateTimeAdapter } from './adapter/date-time-adapter.class';
import { OWL_DATE_TIME_FORMATS } from './adapter/date-time-format.class';
import { take } from 'rxjs/operators';
import { Subscription } from 'rxjs';
var OwlCalendarComponent = (function () {
function OwlCalendarComponent(elmRef, pickerIntl, ngZone, cdRef, dateTimeAdapter, dateTimeFormats) {
var _this = this;
this.elmRef = elmRef;
this.pickerIntl = pickerIntl;
this.ngZone = ngZone;
this.cdRef = cdRef;
this.dateTimeAdapter = dateTimeAdapter;
this.dateTimeFormats = dateTimeFormats;
this.firstDayOfWeek = 0;
this._selecteds = [];
this.startView = 'month';
this.pickerMomentChange = new EventEmitter();
this.selectedChange = new EventEmitter();
this.userSelection = new EventEmitter();
this.yearSelected = new EventEmitter();
this.monthSelected = new EventEmitter();
this.dateFilterForViews = function (date) {
return !!date &&
(!_this.dateFilter || _this.dateFilter(date)) &&
(!_this.minDate || _this.dateTimeAdapter.compare(date, _this.minDate) >= 0) &&
(!_this.maxDate || _this.dateTimeAdapter.compare(date, _this.maxDate) <= 0);
};
this.intlChangesSub = Subscription.EMPTY;
this.moveFocusOnNextTick = false;
this.intlChangesSub = this.pickerIntl.changes.subscribe(function () {
_this.cdRef.markForCheck();
});
}
Object.defineProperty(OwlCalendarComponent.prototype, "minDate", {
get: function () {
return this._minDate;
},
set: function (value) {
value = this.dateTimeAdapter.deserialize(value);
value = this.getValidDate(value);
this._minDate = value ?
this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(value), this.dateTimeAdapter.getMonth(value), this.dateTimeAdapter.getDate(value)) : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "maxDate", {
get: function () {
return this._maxDate;
},
set: function (value) {
value = this.dateTimeAdapter.deserialize(value);
value = this.getValidDate(value);
this._maxDate = value ?
this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(value), this.dateTimeAdapter.getMonth(value), this.dateTimeAdapter.getDate(value)) : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "pickerMoment", {
get: function () {
return this._pickerMoment;
},
set: function (value) {
value = this.dateTimeAdapter.deserialize(value);
this._pickerMoment = this.getValidDate(value) || this.dateTimeAdapter.now();
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "selected", {
get: function () {
return this._selected;
},
set: function (value) {
value = this.dateTimeAdapter.deserialize(value);
this._selected = this.getValidDate(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.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);
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "periodButtonText", {
get: function () {
return this.isMonthView ? this.dateTimeAdapter.format(this.pickerMoment, this.dateTimeFormats.monthYearLabel) :
this.dateTimeAdapter.getYearName(this.pickerMoment);
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "periodButtonLabel", {
get: function () {
return this.isMonthView ? this.pickerIntl.switchToMultiYearViewLabel :
this.pickerIntl.switchToMonthViewLabel;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "prevButtonLabel", {
get: function () {
if (this._currentView === 'month') {
return this.pickerIntl.prevMonthLabel;
}
else if (this._currentView === 'year') {
return this.pickerIntl.prevYearLabel;
}
else {
return null;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "nextButtonLabel", {
get: function () {
if (this._currentView === 'month') {
return this.pickerIntl.nextMonthLabel;
}
else if (this._currentView === 'year') {
return this.pickerIntl.nextYearLabel;
}
else {
return null;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "currentView", {
get: function () {
return this._currentView;
},
set: function (view) {
this._currentView = view;
this.moveFocusOnNextTick = true;
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "isInSingleMode", {
get: function () {
return this.selectMode === 'single';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "isInRangeMode", {
get: function () {
return this.selectMode === 'range' || this.selectMode === 'rangeFrom'
|| this.selectMode === 'rangeTo';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "showControlArrows", {
get: function () {
return this._currentView !== 'multi-years';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "isMonthView", {
get: function () {
return this._currentView === 'month';
},
enumerable: true,
configurable: true
});
Object.defineProperty(OwlCalendarComponent.prototype, "owlDTCalendarClass", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
OwlCalendarComponent.prototype.ngOnInit = function () {
};
OwlCalendarComponent.prototype.ngAfterContentInit = function () {
this._currentView = this.startView;
};
OwlCalendarComponent.prototype.ngAfterViewChecked = function () {
if (this.moveFocusOnNextTick) {
this.moveFocusOnNextTick = false;
this.focusActiveCell();
}
};
OwlCalendarComponent.prototype.ngOnDestroy = function () {
this.intlChangesSub.unsubscribe();
};
OwlCalendarComponent.prototype.toggleViews = function () {
this.currentView = this._currentView == 'month' ? 'multi-years' : 'month';
};
OwlCalendarComponent.prototype.previousClicked = function () {
this.pickerMoment = this.isMonthView ?
this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, -1) :
this.dateTimeAdapter.addCalendarYears(this.pickerMoment, -1);
this.pickerMomentChange.emit(this.pickerMoment);
};
OwlCalendarComponent.prototype.nextClicked = function () {
this.pickerMoment = this.isMonthView ?
this.dateTimeAdapter.addCalendarMonths(this.pickerMoment, 1) :
this.dateTimeAdapter.addCalendarYears(this.pickerMoment, 1);
this.pickerMomentChange.emit(this.pickerMoment);
};
OwlCalendarComponent.prototype.dateSelected = function (date) {
if (!this.dateFilterForViews(date)) {
return;
}
this.selectedChange.emit(date);
};
OwlCalendarComponent.prototype.goToDateInView = function (date, view) {
this.handlePickerMomentChange(date);
this.currentView = view;
return;
};
OwlCalendarComponent.prototype.handlePickerMomentChange = function (date) {
this.pickerMoment = this.dateTimeAdapter.clampDate(date, this.minDate, this.maxDate);
this.pickerMomentChange.emit(this.pickerMoment);
return;
};
OwlCalendarComponent.prototype.userSelected = function () {
this.userSelection.emit();
};
OwlCalendarComponent.prototype.prevButtonEnabled = function () {
return !this.minDate || !this.isSameView(this.pickerMoment, this.minDate);
};
OwlCalendarComponent.prototype.nextButtonEnabled = function () {
return !this.maxDate || !this.isSameView(this.pickerMoment, this.maxDate);
};
OwlCalendarComponent.prototype.focusActiveCell = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(function () {
_this.elmRef.nativeElement.querySelector('.owl-dt-calendar-cell-active').focus();
});
});
};
OwlCalendarComponent.prototype.selectYearInMultiYearView = function (normalizedYear) {
this.yearSelected.emit(normalizedYear);
};
OwlCalendarComponent.prototype.selectMonthInYearView = function (normalizedMonth) {
this.monthSelected.emit(normalizedMonth);
};
OwlCalendarComponent.prototype.isSameView = function (date1, date2) {
if (this._currentView === 'month') {
return !!(date1 && date2 &&
this.dateTimeAdapter.getYear(date1) === this.dateTimeAdapter.getYear(date2) &&
this.dateTimeAdapter.getMonth(date1) === this.dateTimeAdapter.getMonth(date2));
}
else if (this._currentView === 'year') {
return !!(date1 && date2 &&
this.dateTimeAdapter.getYear(date1) === this.dateTimeAdapter.getYear(date2));
}
else {
return false;
}
};
OwlCalendarComponent.prototype.getValidDate = function (obj) {
return (this.dateTimeAdapter.isDateInstance(obj) && this.dateTimeAdapter.isValid(obj)) ? obj : null;
};
__decorate([
Input(),
__metadata("design:type", Function)
], OwlCalendarComponent.prototype, "dateFilter", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], OwlCalendarComponent.prototype, "firstDayOfWeek", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], OwlCalendarComponent.prototype, "minDate", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], OwlCalendarComponent.prototype, "maxDate", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], OwlCalendarComponent.prototype, "pickerMoment", null);
__decorate([
Input(),
__metadata("design:type", String)
], OwlCalendarComponent.prototype, "selectMode", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], OwlCalendarComponent.prototype, "selected", null);
__decorate([
Input(),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], OwlCalendarComponent.prototype, "selecteds", null);
__decorate([
Input(),
__metadata("design:type", String)
], OwlCalendarComponent.prototype, "startView", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], OwlCalendarComponent.prototype, "hideOtherMonths", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], OwlCalendarComponent.prototype, "pickerMomentChange", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], OwlCalendarComponent.prototype, "selectedChange", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], OwlCalendarComponent.prototype, "userSelection", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], OwlCalendarComponent.prototype, "yearSelected", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], OwlCalendarComponent.prototype, "monthSelected", void 0);
__decorate([
HostBinding('class.owl-dt-calendar'),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [])
], OwlCalendarComponent.prototype, "owlDTCalendarClass", null);
OwlCalendarComponent = __decorate([
Component({
selector: 'owl-date-time-calendar',
exportAs: 'owlDateTimeCalendar',
template: "<div class=\"owl-dt-calendar-control\"><!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) --> <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\" type=\"button\" tabindex=\"0\" [style.visibility]=\"showControlArrows? 'visible': 'hidden'\" [disabled]=\"!prevButtonEnabled()\" [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\"><span class=\"owl-dt-control-content 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><div class=\"owl-dt-calendar-control-content\"><button class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\" type=\"button\" tabindex=\"0\" [attr.aria-label]=\"periodButtonLabel\" (click)=\"toggleViews()\"><span class=\"owl-dt-control-content owl-dt-control-button-content\" tabindex=\"-1\">{{periodButtonText}} <span class=\"owl-dt-control-button-arrow\" [style.transform]=\"'rotate(' + (isMonthView? 0 : 180) +'deg)'\"><!-- <editor-fold desc=\"SVG Arrow\"> --> <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"50%\" height=\"50%\" viewBox=\"0 0 292.362 292.362\" style=\"enable-background:new 0 0 292.362 292.362;\" xml:space=\"preserve\"><g><path d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\"/></g></svg><!-- </editor-fold> --></span></span></button></div><button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\" type=\"button\" tabindex=\"0\" [style.visibility]=\"showControlArrows? 'visible': 'hidden'\" [disabled]=\"!nextButtonEnabled()\" [attr.aria-label]=\"nextButtonLabel\" (click)=\"nextClicked()\"><span class=\"owl-dt-control-content 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></div><div class=\"owl-dt-calendar-main\" cdkMonitorSubtreeFocus [ngSwitch]=\"currentView\" tabindex=\"-1\"><owl-date-time-month-view *ngSwitchCase=\"'month'\" [pickerMoment]=\"pickerMoment\" [firstDayOfWeek]=\"firstDayOfWeek\" [selected]=\"selected\" [selecteds]=\"selecteds\" [selectMode]=\"selectMode\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [dateFilter]=\"dateFilter\" [hideOtherMonths]=\"hideOtherMonths\" (pickerMomentChange)=\"handlePickerMomentChange($event)\" (selectedChange)=\"dateSelected($event)\" (userSelection)=\"userSelected()\"></owl-date-time-month-view><owl-date-time-year-view *ngSwitchCase=\"'year'\" [pickerMoment]=\"pickerMoment\" [selected]=\"selected\" [selecteds]=\"selecteds\" [selectMode]=\"selectMode\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [dateFilter]=\"dateFilter\" (keyboardEnter)=\"focusActiveCell()\" (pickerMomentChange)=\"handlePickerMomentChange($event)\" (monthSelected)=\"selectMonthInYearView($event)\" (change)=\"goToDateInView($event, 'month')\"></owl-date-time-year-view><owl-date-time-multi-year-view *ngSwitchCase=\"'multi-years'\" [pickerMoment]=\"pickerMoment\" [selected]=\"selected\" [selecteds]=\"selecteds\" [selectMode]=\"selectMode\" [minDate]=\"minDate\" [maxDate]=\"maxDate\" [dateFilter]=\"dateFilter\" (keyboardEnter)=\"focusActiveCell()\" (pickerMomentChange)=\"handlePickerMomentChange($event)\" (yearSelected)=\"selectYearInMultiYearView($event)\" (change)=\"goToDateInView($event, 'year')\"></owl-date-time-multi-year-view></div>",
styles: [""],
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
}),
__param(4, Optional()),
__param(5, Optional()), __param(5, Inject(OWL_DATE_TIME_FORMATS)),
__metadata("design:paramtypes", [ElementRef,
OwlDateTimeIntl,
NgZone,
ChangeDetectorRef,
DateTimeAdapter, Object])
], OwlCalendarComponent);
return OwlCalendarComponent;
}());
export { OwlCalendarComponent };