ngx-animating-datepicker
Version:
An Animating Datepicker for Angular 2+, for some smooth date picking :).
1,345 lines (1,337 loc) • 244 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-animating-datepicker', ['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
(factory((global['ngx-animating-datepicker'] = {}),global.ng.core,global.ng.forms,global.ng.common));
}(this, (function (exports,core,forms,common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatepickerService = /** @class */ (function () {
function DatepickerService() {
}
/**
* Get the formatted weekdays
*
* @param language
* @param format
* @param start
*/
/**
* Get the formatted weekdays
*
* @param {?} language
* @param {?} format
* @param {?} start
* @return {?}
*/
DatepickerService.getWeekDays = /**
* Get the formatted weekdays
*
* @param {?} language
* @param {?} format
* @param {?} start
* @return {?}
*/
function (language, format, start) {
/** @type {?} */
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
/** @type {?} */
var index = days.indexOf(start.toLowerCase());
if (index < 0) {
throw new Error('Invalid week day start: ' + start);
}
/** @type {?} */
var weekdays = [];
for (var day = 5; day <= 11; day++) {
weekdays.push(new Date(1970, 1 - 1, day + index).toLocaleString(language, { weekday: format }));
}
return weekdays;
};
/**
* Checks if is a value iso code
*
* @param isoCode
*/
/**
* Checks if is a value iso code
*
* @param {?} isoCode
* @return {?}
*/
DatepickerService.isValidIsoCode = /**
* Checks if is a value iso code
*
* @param {?} isoCode
* @return {?}
*/
function (isoCode) {
/** @type {?} */
var pattern = new RegExp(/([a-z]{2})-([A-Z]{2})/);
return pattern.test(isoCode);
};
/**
* Create a week array from the merged day arrays
*
* @param dayArray
*/
/**
* Create a week array from the merged day arrays
*
* @param {?} dayArray
* @return {?}
*/
DatepickerService.createWeekArray = /**
* Create a week array from the merged day arrays
*
* @param {?} dayArray
* @return {?}
*/
function (dayArray) {
/** @type {?} */
var size = 7;
/** @type {?} */
var weeks = [];
while (dayArray.length) {
weeks.push({
days: dayArray.splice(0, size)
});
}
return weeks;
};
/**
* @param {?} year
* @param {?} month
* @return {?}
*/
DatepickerService.getDaysInMonth = /**
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
return [31, DatepickerService.isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
};
/**
* @param {?} value
* @return {?}
*/
DatepickerService.isValidDate = /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var validDate = true;
for (var i = 0; i < value.length; i++) {
if (!DatepickerService.isDate(value[i]) && validDate) {
validDate = false;
}
}
return validDate;
};
/**
* Check if year is a leap year
*
* @param year
*/
/**
* Check if year is a leap year
*
* @param {?} year
* @return {?}
*/
DatepickerService.isLeapYear = /**
* Check if year is a leap year
*
* @param {?} year
* @return {?}
*/
function (year) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
};
/**
* Checks to see if value is a valid date
*
* @param value
*/
/**
* Checks to see if value is a valid date
*
* @param {?} value
* @return {?}
*/
DatepickerService.isDate = /**
* Checks to see if value is a valid date
*
* @param {?} value
* @return {?}
*/
function (value) {
return value instanceof Date;
};
/**
* Get the year of the next month
*
* @param year
* @param month
*/
/**
* Get the year of the next month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
DatepickerService.getYearOfNextMonth = /**
* Get the year of the next month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
return month === 11 ? year + 1 : year;
};
/**
* Get the next month
*
* @param month
*/
/**
* Get the next month
*
* @param {?} month
* @return {?}
*/
DatepickerService.getNextMonth = /**
* Get the next month
*
* @param {?} month
* @return {?}
*/
function (month) {
return month === 11 ? 0 : month + 1;
};
/**
* Get the year of the previous month
*
* @param year
* @param month
*/
/**
* Get the year of the previous month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
DatepickerService.getYearOfPreviousMonth = /**
* Get the year of the previous month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
return month === 0 ? year - 1 : year;
};
/**
* Get previous motnh
*
* @param month
*/
/**
* Get previous motnh
*
* @param {?} month
* @return {?}
*/
DatepickerService.getPreviousMonth = /**
* Get previous motnh
*
* @param {?} month
* @return {?}
*/
function (month) {
return month === 0 ? 11 : month - 1;
};
/**
* Check if a date is later
*
* @param date
* @param compareDate
*/
/**
* Check if a date is later
*
* @param {?} date
* @param {?} compareDate
* @return {?}
*/
DatepickerService.isLater = /**
* Check if a date is later
*
* @param {?} date
* @param {?} compareDate
* @return {?}
*/
function (date, compareDate) {
return date > compareDate;
};
/**
* Check if a date is ealrier
*
* @param date
* @param compareDate
*/
/**
* Check if a date is ealrier
*
* @param {?} date
* @param {?} compareDate
* @return {?}
*/
DatepickerService.isEarlier = /**
* Check if a date is ealrier
*
* @param {?} date
* @param {?} compareDate
* @return {?}
*/
function (date, compareDate) {
return date < compareDate;
};
DatepickerService.decorators = [
{ type: core.Injectable },
];
return DatepickerService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var UtilitiesService = /** @class */ (function () {
function UtilitiesService() {
}
/**
* @private
* @return {?}
*/
UtilitiesService.getScrollOffset = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var x = window.pageXOffset || document.documentElement.scrollLeft;
/** @type {?} */
var y = window.pageYOffset || document.documentElement.scrollTop;
return { x: x, y: y };
};
/**
* @param {?} el
* @return {?}
*/
UtilitiesService.getPageOffset = /**
* @param {?} el
* @return {?}
*/
function (el) {
/** @type {?} */
var scrollOffset = UtilitiesService.getScrollOffset();
/** @type {?} */
var width = el.offsetWidth;
/** @type {?} */
var height = el.offsetHeight;
if (el.getBoundingClientRect) {
/** @type {?} */
var props = el.getBoundingClientRect();
/** @type {?} */
var position = {
top: props.top + scrollOffset.y,
left: props.left + scrollOffset.x,
right: props.left + scrollOffset.x + width,
bottom: props.top + scrollOffset.y + height,
forRight: window.innerWidth - props.left,
forBottom: window.innerHeight - (props.top + scrollOffset.y)
};
return position;
}
};
/**
* @param {?} start
* @param {?} end
* @return {?}
*/
UtilitiesService.prototype.createArray = /**
* @param {?} start
* @param {?} end
* @return {?}
*/
function (start, end) {
return new Array(end - start + 1).fill(1).map(function (_, idx) { return start + idx; });
};
UtilitiesService.decorators = [
{ type: core.Injectable },
];
return UtilitiesService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var DefaultOptions = {
selectMultiple: false,
// Select multiple dates
closeOnSelect: false,
// Close datepicker when date(s) selected
animationSpeed: 400,
// Animation speed in ms
easing: 'ease-in',
// Easing type string
hideRestDays: false,
// Hide the rest days
disableRestDays: true,
// Disable the click on rest days
hideNavigation: false,
// Hide the navigation
range: false,
// Use range functionality
currentDate: new Date(),
// Tne current displayed date (month, year)
timeoutBeforeClosing: 300,
// The timeout / delay before closing
weekdayFormat: 'short',
// "narrow", "short", "long"
weekStart: 'monday' // Set the week start day
};
/** @type {?} */
var DefaultDirectiveOptions = {
appendToBody: true,
// Append Datepicker to body
openDirection: 'bottom',
// The direction it should open to
closeOnBlur: true,
// Close the datepicker onBlur
useAnimatePicker: true // Use the animatepickerComponent
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatepickerComponent = /** @class */ (function () {
function DatepickerComponent(utils, element) {
this.utils = utils;
this.element = element;
/* ==============================================
* Internal Properties
* ============================================== */
this.date = new Date();
this.year = null;
this.month = null;
this.today = this.date;
this.months = null;
this.weekdays = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
this.selectedRange = 'startDate';
this.startDate = null;
this.endDate = null;
this.initialised = false;
this.weekStartArray = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
/* ==============================================
* Initial Options
* ============================================== */
this._options = DefaultOptions;
/* ==============================================
* External Properties
* ============================================== */
/**
* Set the the language manualy. A string with a BCP 47 language tag
* @example nl-NL
*/
this._language = navigator.language;
/**
* Minimal Date: If set the dates before it will be disabled
*/
this._minDate = null;
/**
* Maximal Date: If set the dates after it will be disabled
*/
this._maxDate = null;
/**
* Selected Dates: handles the selected dates array. Can be set both internally and externally
*/
this._selectedDates = [];
this.selectedDatesChange = new core.EventEmitter();
this.theme = '';
this.isOpen = true;
this.asDirective = false;
this.animate = false;
this.topPosition = null;
this.leftPosition = null;
this.bottomPosition = null;
this.rightPosition = null;
}
Object.defineProperty(DatepickerComponent.prototype, "options", {
get: /**
* @return {?}
*/ function () {
return this._options;
},
set: /**
* @param {?} options
* @return {?}
*/ function (options) {
if (options === undefined || !options) {
return;
}
this._options = __assign({}, this._options, options);
if (options.currentDate !== undefined) {
this.date = this.options.currentDate;
}
if (this.initialised) {
this.goToDate();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatepickerComponent.prototype, "language", {
get: /**
* @return {?}
*/ function () {
return this._language;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (!value || value === undefined || !DatepickerService.isValidIsoCode(value)) {
return;
}
this._language = value;
this.renderWeekdays();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatepickerComponent.prototype, "minDate", {
get: /**
* @return {?}
*/ function () {
return this._minDate;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value === undefined || value === this._minDate) {
return;
}
this._minDate = new Date(value);
this.goToDate();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatepickerComponent.prototype, "maxDate", {
get: /**
* @return {?}
*/ function () {
return this._maxDate;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
if (value === undefined || value === this._minDate) {
return;
}
this._maxDate = new Date(value);
this.goToDate();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DatepickerComponent.prototype, "selectedDates", {
get: /**
* @return {?}
*/ function () {
return this._selectedDates;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
/** @type {?} */
var _value = Array.isArray(value) ? value : [value];
if (!DatepickerService.isValidDate(_value)) {
return;
}
this._selectedDates = _value;
if (this.options.range) {
this.resetRange();
}
this.goToDate();
this.selectedDatesChange.emit(this._selectedDates);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
DatepickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initialised = true;
if (!this.month && !this.year) {
this.goToDate(this.options.currentDate);
}
};
/**
* Creates a day array
*
* @param year
* @param month
* @param isRestDays
*/
/**
* Creates a day array
*
* @param {?} year
* @param {?} month
* @param {?=} isRestDays
* @return {?}
*/
DatepickerComponent.prototype.createDayArray = /**
* Creates a day array
*
* @param {?} year
* @param {?} month
* @param {?=} isRestDays
* @return {?}
*/
function (year, month, isRestDays) {
/** @type {?} */
var days = [];
/** @type {?} */
var daysInMonth = DatepickerService.getDaysInMonth(year, month);
for (var index = 0; index < daysInMonth; index++) {
/** @type {?} */
var dayNumber = index + 1;
/** @type {?} */
var date = new Date(year, month, dayNumber);
/** @type {?} */
var day = {
date: date,
dayNumber: dayNumber,
isFirst: dayNumber === 1,
isLast: dayNumber === daysInMonth,
isToday: this.isToday(date),
isSelected: this.isSelected(date),
isRest: isRestDays,
isHidden: isRestDays && this.options.hideRestDays,
isDisabled: ((this.minDate || this.maxDate) && this.isDisabled(date)) ||
(isRestDays && this.options.disableRestDays),
isInRange: this.isInRange(date) ||
((this.isStartDate(date) || this.isEndDate(date)) && this.startDate && this.endDate),
isStartDate: this.isStartDate(date),
isEndDate: this.isEndDate(date)
};
days.push(day);
}
return days;
};
/**
* Get the days from the next month
*
* @param year
* @param month
*/
/**
* Get the days from the next month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
DatepickerComponent.prototype.getNextRestDays = /**
* Get the days from the next month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
/** @type {?} */
var monthLength = DatepickerService.getDaysInMonth(year, month);
/** @type {?} */
var weekStartIndex = this.weekStartArray.indexOf(this.options.weekStart);
// Get the end of the month number minus the week start index
/** @type {?} */
var endOfTheMonth = new Date(year, month, monthLength).getDay() - weekStartIndex;
// Flip minus to plus when the end month number is minus.
// this occurs when there are less rest days then the week start index
/** @type {?} */
var _endOfTheMonth = endOfTheMonth < 0 ? 7 - Math.abs(endOfTheMonth) : endOfTheMonth;
/** @type {?} */
var nextDays = this.createDayArray(DatepickerService.getYearOfNextMonth(year, month), DatepickerService.getNextMonth(month), true).slice(0, 7 - _endOfTheMonth);
return nextDays.length > 6 ? [] : nextDays;
};
/**
* Get the days of the previous month
*
* @param year
* @param month
*/
/**
* Get the days of the previous month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
DatepickerComponent.prototype.getPreviousRestDays = /**
* Get the days of the previous month
*
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
/** @type {?} */
var startOfTheMonth = new Date(year, month, 0).getDay();
/** @type {?} */
var previousDays = this.createDayArray(DatepickerService.getYearOfPreviousMonth(year, month), DatepickerService.getPreviousMonth(month), true);
/** @type {?} */
var weekStartIndex = this.weekStartArray.indexOf(this.options.weekStart);
/** @type {?} */
var _weekStartIndex = weekStartIndex === 0 ? 0 : (7 - weekStartIndex);
/** @type {?} */
var sliceIndex = previousDays.length - startOfTheMonth - _weekStartIndex;
sliceIndex = previousDays.length - sliceIndex >= 7 ? sliceIndex + 7 : sliceIndex;
return previousDays.slice(sliceIndex, previousDays.length);
};
/**
* Merge all the day arrays together
*
* @param year
* @param month
*/
/**
* Merge all the day arrays together
*
* @param {?} year
* @param {?} month
* @return {?}
*/
DatepickerComponent.prototype.getMergedDayArrays = /**
* Merge all the day arrays together
*
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
return __spread(this.getPreviousRestDays(year, month), this.createDayArray(year, month), this.getNextRestDays(year, month));
};
/**
* Create the calendar array from the week arrays
*
* @param year
* @param month
*/
/**
* Create the calendar array from the week arrays
*
* @param {?} year
* @param {?} month
* @return {?}
*/
DatepickerComponent.prototype.createCalendarArray = /**
* Create the calendar array from the week arrays
*
* @param {?} year
* @param {?} month
* @return {?}
*/
function (year, month) {
/** @type {?} */
var dayArray = this.getMergedDayArrays(year, month);
/** @type {?} */
var weeks = DatepickerService.createWeekArray(dayArray);
return [{ weeks: weeks }];
};
/**
* Update value is being triggered
*
* @param date
*/
/**
* Update value is being triggered
*
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.updateValue = /**
* Update value is being triggered
*
* @param {?} date
* @return {?}
*/
function (date) {
if (this.options.range) {
this.selectRange(date);
}
else if (!this.isSelected(date)) {
if (this.options.selectMultiple) {
this.selectDate(date);
}
else {
this.toggleDate(date);
}
if (this.options.closeOnSelect) {
this.close(true);
}
}
else {
this.deselectDate(date);
if (this.options.closeOnSelect) {
this.close(true);
}
}
this.months = this.createCalendarArray(this.year, this.month);
};
/**
* Select range method - contains the logic to select the start- and endrange
*
* @param date
*/
/**
* Select range method - contains the logic to select the start- and endrange
*
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.selectRange = /**
* Select range method - contains the logic to select the start- and endrange
*
* @param {?} date
* @return {?}
*/
function (date) {
if (this.isSelected(date)) {
this.deselectDate(date);
}
else if (DatepickerService.isEarlier(date, this.startDate)) {
if (this.startDate) {
this.toggleDate(date, this.startDate, true);
}
else {
this.selectDate(date);
}
this.startDate = date;
this.selectEndDate();
}
else if (this.endDate && DatepickerService.isLater(date, this.endDate)) {
this.toggleDate(date, this.endDate);
this.endDate = date;
this.selectStartDate();
}
else if (this.selectedRange === 'startDate') {
if (this.startDate) {
this.toggleDate(date, this.startDate, true);
}
else {
this.selectDate(date);
}
this.startDate = date;
this.selectEndDate();
}
else if (this.selectedRange === 'endDate') {
if (this.endDate) {
this.toggleDate(date, this.endDate);
}
else {
this.selectDate(date);
}
this.endDate = date;
this.selectStartDate();
if (this.options.closeOnSelect) {
this.close(true);
}
}
};
/**
* Reset the range if the selected dates change externally
*/
/**
* Reset the range if the selected dates change externally
* @return {?}
*/
DatepickerComponent.prototype.resetRange = /**
* Reset the range if the selected dates change externally
* @return {?}
*/
function () {
if (this._selectedDates.length === 1) {
this.startDate = this._selectedDates[0];
this.endDate = null;
}
else if (this._selectedDates.length === 0) {
this.startDate = null;
this.endDate = null;
}
};
/**
* Toggle a date. One in, on out.
*
* @param date - Date to be toggled on
* @param toggleDate - Optional set specific date to toggle off
* @param unshift - Optional set to unshift in the selectedDates array. is passed to selectDate method
*/
/**
* Toggle a date. One in, on out.
*
* @param {?} date - Date to be toggled on
* @param {?=} toggleDate - Optional set specific date to toggle off
* @param {?=} unshift - Optional set to unshift in the selectedDates array. is passed to selectDate method
* @return {?}
*/
DatepickerComponent.prototype.toggleDate = /**
* Toggle a date. One in, on out.
*
* @param {?} date - Date to be toggled on
* @param {?=} toggleDate - Optional set specific date to toggle off
* @param {?=} unshift - Optional set to unshift in the selectedDates array. is passed to selectDate method
* @return {?}
*/
function (date, toggleDate, unshift) {
if (!toggleDate) {
this.selectedDates = [date];
}
else if (unshift) {
this._selectedDates.unshift(date);
this.selectedDates = this._selectedDates.filter(function (selectedDate) {
return selectedDate.toDateString() !== toggleDate.toDateString();
});
}
else {
this._selectedDates.push(date);
this.selectedDates = this._selectedDates.filter(function (selectedDate) {
return selectedDate.toDateString() !== toggleDate.toDateString();
});
}
};
/**
* Select a date
*
* @param date
* @param unshift - Optional set to unshift instead of push the date in the selectedDates array
*/
/**
* Select a date
*
* @param {?} date
* @param {?=} unshift - Optional set to unshift instead of push the date in the selectedDates array
* @return {?}
*/
DatepickerComponent.prototype.selectDate = /**
* Select a date
*
* @param {?} date
* @param {?=} unshift - Optional set to unshift instead of push the date in the selectedDates array
* @return {?}
*/
function (date, unshift) {
/** @type {?} */
var selectedDates = __spread(this.selectedDates);
if (unshift) {
selectedDates.unshift(date);
}
else {
selectedDates.push(date);
}
this.selectedDates = selectedDates;
};
/**
* Deselect a date
*
* @param date
*/
/**
* Deselect a date
*
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.deselectDate = /**
* Deselect a date
*
* @param {?} date
* @return {?}
*/
function (date) {
this.selectedDates = this._selectedDates.filter(function (selectedDate) {
return selectedDate.toDateString() !== date.toDateString();
});
};
/**
* Go to the next month
*/
/**
* Go to the next month
* @return {?}
*/
DatepickerComponent.prototype.goToNextMonth = /**
* Go to the next month
* @return {?}
*/
function () {
this.year = DatepickerService.getYearOfNextMonth(this.year, this.month);
this.month = DatepickerService.getNextMonth(this.month);
this.totalYearMonth = [{ month: this.month, year: this.year }];
this.months = this.createCalendarArray(this.year, this.month);
};
/**
* Go to the previous month
*/
/**
* Go to the previous month
* @return {?}
*/
DatepickerComponent.prototype.goToPreviousMonth = /**
* Go to the previous month
* @return {?}
*/
function () {
this.year = DatepickerService.getYearOfPreviousMonth(this.year, this.month);
this.month = DatepickerService.getPreviousMonth(this.month);
this.totalYearMonth = [{ month: this.month, year: this.year }];
this.months = this.createCalendarArray(this.year, this.month);
};
/**
* Go to a specific month. Is also used to rerender the datepicker
*
* @param date - default is the current date.
*/
/**
* Go to a specific month. Is also used to rerender the datepicker
*
* @param {?=} date - default is the current date.
* @return {?}
*/
DatepickerComponent.prototype.goToDate = /**
* Go to a specific month. Is also used to rerender the datepicker
*
* @param {?=} date - default is the current date.
* @return {?}
*/
function (date) {
if (date === void 0) {
date = this.date;
}
this.month = date.getMonth();
this.year = date.getFullYear();
this.totalYearMonth = [{ month: this.month, year: this.year }];
this.months = this.createCalendarArray(this.year, this.month);
};
/**
* Render weekdays when options or language changes
*/
/**
* Render weekdays when options or language changes
* @return {?}
*/
DatepickerComponent.prototype.renderWeekdays = /**
* Render weekdays when options or language changes
* @return {?}
*/
function () {
this.weekdays = DatepickerService.getWeekDays(this._language, this.options.weekdayFormat, this.options.weekStart);
};
/**
* Set the open state to true
*/
/**
* Set the open state to true
* @return {?}
*/
DatepickerComponent.prototype.open = /**
* Set the open state to true
* @return {?}
*/
function () {
if (this.isOpen) {
return;
}
this.isOpen = true;
};
/**
* Close the datepicker
*
* @param useTimeout - optional timeout
*/
/**
* Close the datepicker
*
* @param {?=} useTimeout - optional timeout
* @return {?}
*/
DatepickerComponent.prototype.close = /**
* Close the datepicker
*
* @param {?=} useTimeout - optional timeout
* @return {?}
*/
function (useTimeout) {
var _this = this;
if (!this.isOpen) {
return;
}
/** @type {?} */
var timeout = useTimeout ? this.options.timeoutBeforeClosing : 0;
setTimeout(function () {
_this.isOpen = false;
}, timeout);
};
/**
* Select the start date - used for range functionality
*/
/**
* Select the start date - used for range functionality
* @return {?}
*/
DatepickerComponent.prototype.selectStartDate = /**
* Select the start date - used for range functionality
* @return {?}
*/
function () {
this.selectedRange = 'startDate';
};
/**
* Select the end date - used for range functionality
*/
/**
* Select the end date - used for range functionality
* @return {?}
*/
DatepickerComponent.prototype.selectEndDate = /**
* Select the end date - used for range functionality
* @return {?}
*/
function () {
this.selectedRange = 'endDate';
};
// TODO: maybe output the startDate and Endate or just of internal use
/**
* Check if date is the start date
*/
// TODO: maybe output the startDate and Endate or just of internal use
/**
* Check if date is the start date
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.isStartDate =
// TODO: maybe output the startDate and Endate or just of internal use
/**
* Check if date is the start date
* @param {?} date
* @return {?}
*/
function (date) {
return this.startDate && date.toDateString() === this.startDate.toDateString();
};
/**
* Check if date is the end date
*/
/**
* Check if date is the end date
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.isEndDate = /**
* Check if date is the end date
* @param {?} date
* @return {?}
*/
function (date) {
return this.endDate && date.toDateString() === this.endDate.toDateString();
};
/**
* Check if date is today
*/
/**
* Check if date is today
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.isToday = /**
* Check if date is today
* @param {?} date
* @return {?}
*/
function (date) {
return date.toDateString() === this.today.toDateString();
};
/**
* Check if date is selected
*/
/**
* Check if date is selected
* @param {?} dateToCheck
* @return {?}
*/
DatepickerComponent.prototype.isSelected = /**
* Check if date is selected
* @param {?} dateToCheck
* @return {?}
*/
function (dateToCheck) {
return this._selectedDates.map(function (date) { return date.toDateString(); }).indexOf(dateToCheck.toDateString()) !== -1;
};
/**
* Check if date is disabled
*/
/**
* Check if date is disabled
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.isDisabled = /**
* Check if date is disabled
* @param {?} date
* @return {?}
*/
function (date) {
if (!this.minDate) {
return !(date < this.maxDate);
}
if (!this.maxDate) {
return !(date > this.minDate);
}
return !(date < this.maxDate && date > this.minDate);
};
/**
* Check if date is in range
*/
/**
* Check if date is in range
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.isInRange = /**
* Check if date is in range
* @param {?} date
* @return {?}
*/
function (date) {
return this.startDate && this.endDate && this.startDate < date && date < this.endDate;
};
DatepickerComponent.decorators = [
{ type: core.Component, args: [{
selector: 'aa-datepicker',
template: "<div class=\"datepicker__wrapper\">\n\t<div>\n\t\t<aa-navigation\n\t\t\t\t[hideNavigation]=\"options.hideNavigation\"\n (previousClick)=\"goToPreviousMonth()\"\n\t\t\t\t(nextClick)=\"goToNextMonth()\"\n\t\t\t\t[language]=\"language\"\n\t\t\t\t[totalYearMonth]=\"totalYearMonth\"></aa-navigation>\n\t\t<div class=\"datepicker__weekdays-wrapper\">\n\t\t\t<div class=\"datepicker__weekdays-container\">\n\t\t\t\t<table class=\"datepicker__weekdays\">\n\t\t\t\t\t<thead>\n\t\t\t\t\t<td class=\"datepicker__weekday\" *ngFor=\"let weekday of weekdays; index as i\">{{weekday}}</td>\n\t\t\t\t\t</thead>\n\t\t\t\t</table>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"datepicker__calendar-wrapper\">\n\t\t<div *ngFor=\"let month of months;\" class=\"datepicker__calendar-container\">\n\t\t\t<table class=\"datepicker__calendar\">\n\t\t\t\t<tbody>\n\t\t\t\t<tr *ngFor=\"let week of month.weeks; index as i\">\n\t\t\t\t\t<td class=\"datepicker__day\" *ngFor=\"let day of week.days; index as i\" [ngClass]=\"{\n\t\t\t'is-first': day.isFirst,\n\t\t\t'is-last': day.isLast,\n\t\t\t'is-hidden': day.isHidden,\n\t\t\t'is-disabled': day.isDisabled,\n\t\t\t'is-today': day.isToday,\n\t\t\t'is-selected': day.isSelected,\n\t\t\t'is-in-range': day.isInRange,\n\t\t\t'is-start-date': day.isStartDate,\n\t\t\t'is-end-date': day.isEndDate,\n\t\t\t'is-rest': day.isRest\n\t\t\t}\">\n\t\t\t\t\t\t<button class=\"datepicker__button\" [disabled]=\"day.isDisabled || day.isHidden\"\n\t\t\t\t\t\t\t\t(click)=\"updateValue(day.date)\">{{day.dayNumber}}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t</div>\n\t<ng-content></ng-content>\n</div>",
styles: [":host{font-family:Arial,Helvetica,sans-serif;border:1px solid #d9d9d8;width:300px;position:relative;display:inline-block;z-index:2;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.15);overflow:hidden;background-color:#fff;box-sizing:border-box;visibility:hidden}:host *{box-sizing:border-box}:host .datepicker__calendar-container{padding:0 10px 10px}:host .datepicker__footer{position:relative;z-index:1}:host table{width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse}:host td{padding:0}:host .datepicker__weekdays-wrapper::after,:host .datepicker__weekdays-wrapper::before{content:' ';display:table}:host .datepicker__weekdays-wrapper::after{clear:both}:host .datepicker__weekdays-container{padding:10px 10px 0;float:left}:host .datepicker__weekdays{table-layout:fixed;width:100%}:host .datepicker__weekday{color:grey;font-size:12px;height:20px;text-align:center}:host .datepicker__day{position:relative;text-align:center;height:40px;width:auto;border:1px solid #d9d9d8}:host .datepicker__day.is-rest{border:none}:host .datepicker__button{padding:0;background-color:transparent;border:none;outline:0;font-style:inherit;cursor:pointer;color:#8e8d8a;width:100%;height:100%}:host .datepicker__button:hover{border:1px solid transparent;background-color:#f2f2f2;color:#8e8d8a}:host .is-hidden{opacity:0;display:table-cell}:host .is-rest{border:none}:host .is-rest .datepicker__button{color:#c0c0be}:host .is-today .datepicker__button{background-color:#eae7dc}:host .is-in-range .datepicker__button{background-color:#e98074;color:#fff}:host .is-in-range .datepicker__button:hover{background-color:#e66c5e}:host .is-selected .datepicker__button{background-color:#e85a4f;color:#fff;font-weight:700}:host .is-selected .datepicker__button:hover{background-color:#e23022}:host .is-start-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-end-date .datepicker__button{background-color:#e85a4f;color:#fff}:host .is-disabled .datepicker__button{color:#d9d9d8;cursor:default}:host .is-disabled .datepicker__button:hover{background-color:transparent}:host.is-directive{visibility:hidden;position:absolute}:host.is-open{visibility:visible}:host.is-animate{transition:height .2s ease-in;width:300px}:host.is-animate .datepicker__main{transition:height .2s ease-in}:host.is-animate .datepicker__calendar-wrapper{position:absolute;width:200%;left:0}:host.is-animate .datepicker__calendar{float:left;width:100%}:host.is-animate .datepicker__calendar-container{float:left}"]
},] },
];
DatepickerComponent.ctorParameters = function () {
return [
{ type: UtilitiesService },
{ type: core.ElementRef }
];
};
DatepickerComponent.propDecorators = {
options: [{ type: core.Input, args: ['options',] }],
language: [{ type: core.Input }],
minDate: [{ type: core.Input }],
maxDate: [{ type: core.Input }],
selectedDatesChange: [{ type: core.Output }],
selectedDates: [{ type: core.Input }],
calendarContainer: [{ type: core.ViewChild, args: ['calendarContainer',] }],
calendarTopContainer: [{ type: core.ViewChild, args: ['calendarTopContainer',] }],
theme: [{ type: core.HostBinding, args: ['class',] }, { type: core.Input }],
isOpen: [{ type: core.HostBinding, args: ['class.is-open',] }, { type: core.Input }],
asDirective: [{ type: core.HostBinding, args: ['class.is-directive',] }],
animate: [{ type: core.HostBinding, args: ['class.is-animate',] }],
topPosition: [{ type: core.HostBinding, args: ['style.top.px',] }],
leftPosition: [{ type: core.HostBinding, args: ['style.left.px',] }],
bottomPosition: [{ type: core.HostBinding, args: ['style.bottom.px',] }],
rightPosition: [{ type: core.HostBinding, args: ['style.right.px',] }]
};
return DatepickerComponent;
}());
/**
* @fileoverview added by tsickle
* @supp