ng-daterangepicker2
Version:
Angular PayPal Datepicker
335 lines (334 loc) • 12.6 kB
JavaScript
import { Component, HostListener, ElementRef, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as dateFns from 'date-fns';
import * as format from 'date-fns/format';
var locales = {
ar: require('date-fns/locale/ar'),
bg: require('date-fns/locale/bg'),
ca: require('date-fns/locale/ca'),
cs: require('date-fns/locale/cs'),
da: require('date-fns/locale/da'),
de: require('date-fns/locale/de'),
el: require('date-fns/locale/el'),
en: require('date-fns/locale/en'),
eo: require('date-fns/locale/eo'),
es: require('date-fns/locale/es'),
fi: require('date-fns/locale/fi'),
fil: require('date-fns/locale/fil'),
fr: require('date-fns/locale/fr'),
hr: require('date-fns/locale/hr'),
id: require('date-fns/locale/id'),
is: require('date-fns/locale/is'),
it: require('date-fns/locale/it'),
ja: require('date-fns/locale/ja'),
ko: require('date-fns/locale/ko'),
mk: require('date-fns/locale/mk'),
nb: require('date-fns/locale/nb'),
nl: require('date-fns/locale/nl'),
pl: require('date-fns/locale/pl'),
pt: require('date-fns/locale/pt'),
ro: require('date-fns/locale/ro'),
ru: require('date-fns/locale/ru'),
sk: require('date-fns/locale/sk'),
sv: require('date-fns/locale/sv'),
th: require('date-fns/locale/th'),
tr: require('date-fns/locale/tr')
};
export var DATERANGEPICKER_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return NgDateRangePickerComponent; }),
multi: true
};
var NgDateRangePickerComponent = /** @class */ (function () {
function NgDateRangePickerComponent(elementRef) {
this.elementRef = elementRef;
this.defaultOptions = {
theme: 'default',
range: 'tm',
dayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
presetNames: ['This Month', 'Last Month', 'This Week', 'Last Week', 'This Year', 'Last Year', 'Today', 'Start', 'End'],
dateFormat: 'yMd',
outputFormat: 'DD/MM/YYYY',
startOfWeek: 0,
locale: 'en'
};
this.onTouchedCallback = function () { };
this.onChangeCallback = function () { };
}
Object.defineProperty(NgDateRangePickerComponent.prototype, "value", {
get: function () {
return this.modelValue;
},
set: function (value) {
if (!value) {
return;
}
this.modelValue = value;
this.onChangeCallback(value);
},
enumerable: true,
configurable: true
});
NgDateRangePickerComponent.prototype.writeValue = function (value) {
if (!value) {
return;
}
this.modelValue = value;
};
NgDateRangePickerComponent.prototype.registerOnChange = function (fn) {
this.onChangeCallback = fn;
};
NgDateRangePickerComponent.prototype.registerOnTouched = function (fn) {
this.onTouchedCallback = fn;
};
NgDateRangePickerComponent.prototype.getLocale = function () {
switch (this.options.locale) {
case 'ar':
this.locale = locales.ar;
break;
case 'bg':
this.locale = locales.bg;
break;
case 'ca':
this.locale = locales.ca;
break;
case 'cs':
this.locale = locales.cs;
break;
case 'da':
this.locale = locales.da;
break;
case 'de':
this.locale = locales.de;
break;
case 'el':
this.locale = locales.el;
break;
case 'en':
this.locale = locales.en;
break;
case 'eo':
this.locale = locales.eo;
break;
case 'es':
this.locale = locales.es;
break;
case 'fi':
this.locale = locales.fi;
break;
case 'fil':
this.locale = locales.fil;
break;
case 'fr':
this.locale = locales.fr;
break;
case 'hr':
this.locale = locales.hr;
break;
case 'id':
this.locale = locales.id;
break;
case 'is':
this.locale = locales.is;
break;
case 'it':
this.locale = locales.it;
break;
case 'ja':
this.locale = locales.ja;
break;
case 'ko':
this.locale = locales.ko;
break;
case 'mk':
this.locale = locales.mk;
break;
case 'nb':
this.locale = locales.nb;
break;
case 'nl':
this.locale = locales.nl;
break;
case 'pl':
this.locale = locales.pl;
break;
case 'pt':
this.locale = locales.pt;
break;
case 'ro':
this.locale = locales.ro;
break;
case 'ru':
this.locale = locales.ru;
break;
case 'sk':
this.locale = locales.sk;
break;
case 'sv':
this.locale = locales.sv;
break;
case 'th':
this.locale = locales.th;
break;
case 'tr':
this.locale = locales.tr;
break;
}
};
NgDateRangePickerComponent.prototype.ngOnInit = function () {
this.getLocale();
this.opened = false;
this.date = dateFns.startOfDay(new Date());
this.dateFormat = format(this.date, 'MMMM YYYY', { locale: this.locale });
this.options = this.options || this.defaultOptions;
this.initNames();
this.selectRange(this.options.range);
};
NgDateRangePickerComponent.prototype.ngOnChanges = function (changes) {
this.options = this.options || this.defaultOptions;
};
NgDateRangePickerComponent.prototype.initNames = function () {
this.dayNames = this.options.dayNames;
};
NgDateRangePickerComponent.prototype.generateCalendar = function () {
var _this = this;
this.days = [];
var start = dateFns.startOfMonth(this.date);
var end = dateFns.endOfMonth(this.date);
var days = dateFns.eachDay(start, end).map(function (d) {
return {
date: d,
day: dateFns.getDate(d),
weekday: dateFns.getDay(d),
today: dateFns.isToday(d),
firstMonthDay: dateFns.isFirstDayOfMonth(d),
lastMonthDay: dateFns.isLastDayOfMonth(d),
visible: true,
from: dateFns.isSameDay(_this.dateFrom, d),
to: dateFns.isSameDay(_this.dateTo, d),
isWithinRange: dateFns.isWithinRange(d, _this.dateFrom, _this.dateTo)
};
});
var prevMonthDayNum = dateFns.getDay(start) - 1;
var prevMonthDays = [];
if (prevMonthDayNum > 0) {
prevMonthDays = Array.from(Array(prevMonthDayNum).keys()).map(function (i) {
var d = dateFns.subDays(start, prevMonthDayNum - i);
return {
date: d,
day: dateFns.getDate(d),
weekday: dateFns.getDay(d),
firstMonthDay: dateFns.isFirstDayOfMonth(d),
lastMonthDay: dateFns.isLastDayOfMonth(d),
today: false,
visible: false,
from: false,
to: false,
isWithinRange: false
};
});
}
this.days = prevMonthDays.concat(days);
this.value = dateFns.format(this.dateFrom, this.options.outputFormat) + "-" + dateFns.format(this.dateTo, this.options.outputFormat);
};
NgDateRangePickerComponent.prototype.toggleCalendar = function (e, selection) {
if (this.opened && this.opened !== selection) {
this.opened = selection;
}
else {
this.opened = this.opened ? false : selection;
}
};
NgDateRangePickerComponent.prototype.closeCalendar = function (e) {
this.opened = false;
};
NgDateRangePickerComponent.prototype.selectDate = function (e, index) {
e.preventDefault();
var selectedDate = this.days[index].date;
if ((this.opened === 'from' && dateFns.isAfter(selectedDate, this.dateTo)) ||
(this.opened === 'to' && dateFns.isBefore(selectedDate, this.dateFrom))) {
return;
}
if (this.opened === 'from') {
this.dateFrom = selectedDate;
this.opened = 'to';
}
else if (this.opened === 'to') {
this.dateTo = selectedDate;
this.opened = 'from';
}
this.generateCalendar();
};
NgDateRangePickerComponent.prototype.prevMonth = function () {
this.date = dateFns.subMonths(this.date, 1);
this.dateFormat = format(this.date, 'MMMM YYYY ', { locale: this.locale });
this.generateCalendar();
};
NgDateRangePickerComponent.prototype.nextMonth = function () {
this.date = dateFns.addMonths(this.date, 1);
this.dateFormat = format(this.date, 'MMMM YYYY ', { locale: this.locale });
this.generateCalendar();
};
NgDateRangePickerComponent.prototype.selectRange = function (range) {
var today = dateFns.startOfDay(new Date());
switch (range) {
case 'tm':
this.dateFrom = dateFns.startOfMonth(today);
this.dateTo = dateFns.endOfMonth(today);
break;
case 'lm':
today = dateFns.subMonths(today, 1);
this.dateFrom = dateFns.startOfMonth(today);
this.dateTo = dateFns.endOfMonth(today);
break;
case 'lw':
today = dateFns.subWeeks(today, 1);
this.dateFrom = dateFns.startOfWeek(today, { weekStartsOn: this.options.startOfWeek });
this.dateTo = dateFns.endOfWeek(today, { weekStartsOn: this.options.startOfWeek });
break;
case 'tw':
this.dateFrom = dateFns.startOfWeek(today, { weekStartsOn: this.options.startOfWeek });
this.dateTo = dateFns.endOfWeek(today, { weekStartsOn: this.options.startOfWeek });
break;
case 'ty':
this.dateFrom = dateFns.startOfYear(today);
this.dateTo = dateFns.endOfYear(today);
break;
case 'ly':
today = dateFns.subYears(today, 1);
this.dateFrom = dateFns.startOfYear(today);
this.dateTo = dateFns.endOfYear(today);
break;
case 'td':
this.dateFrom = dateFns.startOfToday();
this.dateTo = dateFns.endOfToday();
break;
}
this.range = range;
this.generateCalendar();
};
NgDateRangePickerComponent.prototype.handleBlurClick = function (e) {
var target = e.srcElement || e.target;
if (!this.elementRef.nativeElement.contains(e.target) && !target.classList.contains('day-num')) {
this.opened = false;
}
};
NgDateRangePickerComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-daterangepicker',
templateUrl: 'ng-daterangepicker.component.html',
styleUrls: ['ng-daterangepicker.sass'],
providers: [DATERANGEPICKER_VALUE_ACCESSOR]
},] },
];
/** @nocollapse */
NgDateRangePickerComponent.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
NgDateRangePickerComponent.propDecorators = {
'options': [{ type: Input },],
'handleBlurClick': [{ type: HostListener, args: ['document:click', ['$event'],] },],
};
return NgDateRangePickerComponent;
}());
export { NgDateRangePickerComponent };