diff --git a/.gitignore b/.gitignore index 429bcfc6..ccf2fe0e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,6 @@ node_modules npm-debug.log .vscode .coveralls.yml -dist/* example/demo.js example/demo.js.map test/unit/coverage diff --git a/dist/locale/index.js b/dist/locale/index.js new file mode 100644 index 00000000..65687a2a --- /dev/null +++ b/dist/locale/index.js @@ -0,0 +1 @@ +!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((e=e||self).vdp_translation_index={})}(this,function(e){"use strict";function r(e,r){for(var a=0;a 0 ? this.utils.getDay(dObj) - 1 : 6; + } + + return this.utils.getDay(dObj); + }, + + /** + * @return {Object[]} + */ + days: function days() { + var d = this.pageDate; + var days = []; // set up a new date object to the beginning of the current 'page' + + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + var daysInMonth = this.utils.daysInMonth(this.utils.getFullYear(dObj), this.utils.getMonth(dObj)); + + for (var i = 0; i < daysInMonth; i++) { + days.push({ + date: this.utils.getDate(dObj), + timestamp: dObj.getTime(), + isSelected: this.isSelectedDate(dObj), + isDisabled: this.isDisabledDate(dObj), + isHighlighted: this.isHighlightedDate(dObj), + isHighlightStart: this.isHighlightStart(dObj), + isHighlightEnd: this.isHighlightEnd(dObj), + isToday: this.utils.compareDates(dObj, new Date()), + isWeekend: this.utils.getDay(dObj) === 0 || this.utils.getDay(dObj) === 6, + isSaturday: this.utils.getDay(dObj) === 6, + isSunday: this.utils.getDay(dObj) === 0 + }); + this.utils.setDate(dObj, this.utils.getDate(dObj) + 1); + } + + return days; + }, + + /** + * Gets the name of the month the current page is on + * @return {String} + */ + currMonthName: function currMonthName() { + var monthName = this.fullMonthName ? this.translation.months : this.translation.monthsAbbr; + return this.utils.getMonthNameAbbr(this.utils.getMonth(this.pageDate), monthName); + }, + + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + currYearName: function currYearName() { + var yearSuffix = this.translation.yearSuffix; + return "".concat(this.utils.getFullYear(this.pageDate)).concat(yearSuffix); + }, + + /** + * Is this translation using year/month/day format? + * @return {Boolean} + */ + isYmd: function isYmd() { + return this.translation.ymd && this.translation.ymd === true; + }, + + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextMonthDisabled(this.pageTimestamp) : this.isPreviousMonthDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousMonthDisabled(this.pageTimestamp) : this.isNextMonthDisabled(this.pageTimestamp); + } + }, + methods: { + selectDate: function selectDate(date) { + if (date.isDisabled) { + this.$emit('selectedDisabled', date); + return false; + } + + this.$emit('selectDate', date); + }, + + /** + * @return {Number} + */ + getPageMonth: function getPageMonth() { + return this.utils.getMonth(this.pageDate); + }, + + /** + * Emit an event to show the month picker + */ + showMonthCalendar: function showMonthCalendar() { + this.$emit('showMonthCalendar'); + }, + + /** + * Change the page month + * @param {Number} incrementBy + */ + changeMonth: function changeMonth(incrementBy) { + var date = this.pageDate; + this.utils.setMonth(date, this.utils.getMonth(date) + incrementBy); + this.$emit('changedMonth', date); + }, + + /** + * Decrement the page month + */ + previousMonth: function previousMonth() { + if (!this.isPreviousMonthDisabled()) { + this.changeMonth(-1); + } + }, + + /** + * Is the previous month disabled? + * @return {Boolean} + */ + isPreviousMonthDisabled: function isPreviousMonthDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + var d = this.pageDate; + return this.utils.getMonth(this.disabledDates.to) >= this.utils.getMonth(d) && this.utils.getFullYear(this.disabledDates.to) >= this.utils.getFullYear(d); + }, + + /** + * Increment the current page month + */ + nextMonth: function nextMonth() { + if (!this.isNextMonthDisabled()) { + this.changeMonth(+1); + } + }, + + /** + * Is the next month disabled? + * @return {Boolean} + */ + isNextMonthDisabled: function isNextMonthDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + var d = this.pageDate; + return this.utils.getMonth(this.disabledDates.from) <= this.utils.getMonth(d) && this.utils.getFullYear(this.disabledDates.from) <= this.utils.getFullYear(d); + }, + + /** + * Whether a day is selected + * @param {Date} + * @return {Boolean} + */ + isSelectedDate: function isSelectedDate(dObj) { + return this.selectedDate && this.utils.compareDates(this.selectedDate, dObj); + }, + + /** + * Whether a day is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledDate: function isDisabledDate(date) { + var _this = this; + + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined') { + return false; + } + + if (typeof this.disabledDates.dates !== 'undefined') { + this.disabledDates.dates.forEach(function (d) { + if (_this.utils.compareDates(date, d)) { + disabledDates = true; + return true; + } + }); + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to && date < this.disabledDates.to) { + disabledDates = true; + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from && date > this.disabledDates.from) { + disabledDates = true; + } + + if (typeof this.disabledDates.ranges !== 'undefined') { + this.disabledDates.ranges.forEach(function (range) { + if (typeof range.from !== 'undefined' && range.from && typeof range.to !== 'undefined' && range.to) { + if (date < range.to && date > range.from) { + disabledDates = true; + return true; + } + } + }); + } + + if (typeof this.disabledDates.days !== 'undefined' && this.disabledDates.days.indexOf(this.utils.getDay(date)) !== -1) { + disabledDates = true; + } + + if (typeof this.disabledDates.daysOfMonth !== 'undefined' && this.disabledDates.daysOfMonth.indexOf(this.utils.getDate(date)) !== -1) { + disabledDates = true; + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + }, + + /** + * Whether a day is highlighted (only if it is not disabled already except when highlighted.includeDisabled is true) + * @param {Date} + * @return {Boolean} + */ + isHighlightedDate: function isHighlightedDate(date) { + var _this2 = this; + + if (!(this.highlighted && this.highlighted.includeDisabled) && this.isDisabledDate(date)) { + return false; + } + + var highlighted = false; + + if (typeof this.highlighted === 'undefined') { + return false; + } + + if (typeof this.highlighted.dates !== 'undefined') { + this.highlighted.dates.forEach(function (d) { + if (_this2.utils.compareDates(date, d)) { + highlighted = true; + return true; + } + }); + } + + if (this.isDefined(this.highlighted.from) && this.isDefined(this.highlighted.to)) { + highlighted = date >= this.highlighted.from && date <= this.highlighted.to; + } + + if (typeof this.highlighted.days !== 'undefined' && this.highlighted.days.indexOf(this.utils.getDay(date)) !== -1) { + highlighted = true; + } + + if (typeof this.highlighted.daysOfMonth !== 'undefined' && this.highlighted.daysOfMonth.indexOf(this.utils.getDate(date)) !== -1) { + highlighted = true; + } + + if (typeof this.highlighted.customPredictor === 'function' && this.highlighted.customPredictor(date)) { + highlighted = true; + } + + return highlighted; + }, + dayClasses: function dayClasses(day) { + return { + 'selected': day.isSelected, + 'disabled': day.isDisabled, + 'highlighted': day.isHighlighted, + 'today': day.isToday, + 'weekend': day.isWeekend, + 'sat': day.isSaturday, + 'sun': day.isSunday, + 'highlight-start': day.isHighlightStart, + 'highlight-end': day.isHighlightEnd + }; + }, + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + isHighlightStart: function isHighlightStart(date) { + return this.isHighlightedDate(date) && this.highlighted.from instanceof Date && this.utils.getFullYear(this.highlighted.from) === this.utils.getFullYear(date) && this.utils.getMonth(this.highlighted.from) === this.utils.getMonth(date) && this.utils.getDate(this.highlighted.from) === this.utils.getDate(date); + }, + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + isHighlightEnd: function isHighlightEnd(date) { + return this.isHighlightedDate(date) && this.highlighted.to instanceof Date && this.utils.getFullYear(this.highlighted.to) === this.utils.getFullYear(date) && this.utils.getMonth(this.highlighted.to) === this.utils.getMonth(date) && this.utils.getDate(this.highlighted.to) === this.utils.getDate(date); + }, + + /** + * Helper + * @param {mixed} prop + * @return {Boolean} + */ + isDefined: function isDefined(prop) { + return typeof prop !== 'undefined' && prop; + } + } // eslint-disable-next-line + +}; + +/* script */ +const __vue_script__$1 = script$1; + +/* template */ +var __vue_render__$1 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showDayView, + expression: "showDayView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextMonth() : _vm.previousMonth(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "day__month_btn", + class: _vm.allowedToShowView("month") ? "up" : "", + on: { click: _vm.showMonthCalendar } + }, + [ + _vm._v( + _vm._s(_vm.isYmd ? _vm.currYearName : _vm.currMonthName) + + " " + + _vm._s(_vm.isYmd ? _vm.currMonthName : _vm.currYearName) + ) + ] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousMonth() : _vm.nextMonth(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _c( + "div", + { class: _vm.isRtl ? "flex-rtl" : "" }, + [ + _vm._l(_vm.daysOfWeek, function(d) { + return _c( + "span", + { key: d.timestamp, staticClass: "cell day-header" }, + [_vm._v(_vm._s(d))] + ) + }), + _vm._v(" "), + _vm.blankDays > 0 + ? _vm._l(_vm.blankDays, function(d) { + return _c("span", { + key: d.timestamp, + staticClass: "cell day blank" + }) + }) + : _vm._e(), + _vm._l(_vm.days, function(day) { + return _c("span", { + key: day.timestamp, + staticClass: "cell day", + class: _vm.dayClasses(day), + domProps: { innerHTML: _vm._s(_vm.dayCellContent(day)) }, + on: { + click: function($event) { + return _vm.selectDate(day) + } + } + }) + }) + ], + 2 + ) + ], + 2 + ) +}; +var __vue_staticRenderFns__$1 = []; +__vue_render__$1._withStripped = true; + + /* style */ + const __vue_inject_styles__$1 = undefined; + /* scoped */ + const __vue_scope_id__$1 = undefined; + /* module identifier */ + const __vue_module_identifier__$1 = undefined; + /* functional template */ + const __vue_is_functional_template__$1 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerDay = normalizeComponent_1( + { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, + __vue_inject_styles__$1, + __vue_script__$1, + __vue_scope_id__$1, + __vue_is_functional_template__$1, + __vue_module_identifier__$1, + undefined, + undefined + ); + +// +var script$2 = { + props: { + showMonthView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + disabledDates: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + allowedToShowView: Function, + useUtc: Boolean + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + computed: { + months: function months() { + var d = this.pageDate; + var months = []; // set up a new date object to the beginning of the current 'page' + + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), 0, d.getUTCDate())) : new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 12; i++) { + months.push({ + month: this.utils.getMonthName(i, this.translation.months), + timestamp: dObj.getTime(), + isSelected: this.isSelectedMonth(dObj), + isDisabled: this.isDisabledMonth(dObj) + }); + this.utils.setMonth(dObj, this.utils.getMonth(dObj) + 1); + } + + return months; + }, + + /** + * Get year name on current page. + * @return {String} + */ + pageYearName: function pageYearName() { + var yearSuffix = this.translation.yearSuffix; + return "".concat(this.utils.getFullYear(this.pageDate)).concat(yearSuffix); + }, + + /** + * Is the left hand navigation disabled + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextYearDisabled(this.pageTimestamp) : this.isPreviousYearDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation disabled + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousYearDisabled(this.pageTimestamp) : this.isNextYearDisabled(this.pageTimestamp); + } + }, + methods: { + /** + * Emits a selectMonth event + * @param {Object} month + */ + selectMonth: function selectMonth(month) { + if (month.isDisabled) { + return false; + } + + this.$emit('selectMonth', month); + }, + + /** + * Changes the year up or down + * @param {Number} incrementBy + */ + changeYear: function changeYear(incrementBy) { + var date = this.pageDate; + this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy); + this.$emit('changedYear', date); + }, + + /** + * Decrements the year + */ + previousYear: function previousYear() { + if (!this.isPreviousYearDisabled()) { + this.changeYear(-1); + } + }, + + /** + * Checks if the previous year is disabled or not + * @return {Boolean} + */ + isPreviousYearDisabled: function isPreviousYearDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + return this.utils.getFullYear(this.disabledDates.to) >= this.utils.getFullYear(this.pageDate); + }, + + /** + * Increments the year + */ + nextYear: function nextYear() { + if (!this.isNextYearDisabled()) { + this.changeYear(1); + } + }, + + /** + * Checks if the next year is disabled or not + * @return {Boolean} + */ + isNextYearDisabled: function isNextYearDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + return this.utils.getFullYear(this.disabledDates.from) <= this.utils.getFullYear(this.pageDate); + }, + + /** + * Emits an event that shows the year calendar + */ + showYearCalendar: function showYearCalendar() { + this.$emit('showYearCalendar'); + }, + + /** + * Whether the selected date is in this month + * @param {Date} + * @return {Boolean} + */ + isSelectedMonth: function isSelectedMonth(date) { + return this.selectedDate && this.utils.getFullYear(this.selectedDate) === this.utils.getFullYear(date) && this.utils.getMonth(this.selectedDate) === this.utils.getMonth(date); + }, + + /** + * Whether a month is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledMonth: function isDisabledMonth(date) { + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined') { + return false; + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to) { + if (this.utils.getMonth(date) < this.utils.getMonth(this.disabledDates.to) && this.utils.getFullYear(date) <= this.utils.getFullYear(this.disabledDates.to) || this.utils.getFullYear(date) < this.utils.getFullYear(this.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from) { + if (this.utils.getMonth(date) > this.utils.getMonth(this.disabledDates.from) && this.utils.getFullYear(date) >= this.utils.getFullYear(this.disabledDates.from) || this.utils.getFullYear(date) > this.utils.getFullYear(this.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + } // eslint-disable-next-line + +}; + +/* script */ +const __vue_script__$2 = script$2; + +/* template */ +var __vue_render__$2 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showMonthView, + expression: "showMonthView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextYear() : _vm.previousYear(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "month__year_btn", + class: _vm.allowedToShowView("year") ? "up" : "", + on: { click: _vm.showYearCalendar } + }, + [_vm._v(_vm._s(_vm.pageYearName))] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousYear() : _vm.nextYear(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _vm._l(_vm.months, function(month) { + return _c( + "span", + { + key: month.timestamp, + staticClass: "cell month", + class: { selected: month.isSelected, disabled: month.isDisabled }, + on: { + click: function($event) { + $event.stopPropagation(); + return _vm.selectMonth(month) + } + } + }, + [_vm._v(_vm._s(month.month))] + ) + }) + ], + 2 + ) +}; +var __vue_staticRenderFns__$2 = []; +__vue_render__$2._withStripped = true; + + /* style */ + const __vue_inject_styles__$2 = undefined; + /* scoped */ + const __vue_scope_id__$2 = undefined; + /* module identifier */ + const __vue_module_identifier__$2 = undefined; + /* functional template */ + const __vue_is_functional_template__$2 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerMonth = normalizeComponent_1( + { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, + __vue_inject_styles__$2, + __vue_script__$2, + __vue_scope_id__$2, + __vue_is_functional_template__$2, + __vue_module_identifier__$2, + undefined, + undefined + ); + +// +var script$3 = { + props: { + showYearView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + disabledDates: Object, + highlighted: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + allowedToShowView: Function, + useUtc: Boolean + }, + computed: { + years: function years() { + var d = this.pageDate; + var years = []; // set up a new date object to the beginning of the current 'page'7 + + var dObj = this.useUtc ? new Date(Date.UTC(Math.floor(d.getUTCFullYear() / 10) * 10, d.getUTCMonth(), d.getUTCDate())) : new Date(Math.floor(d.getFullYear() / 10) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 10; i++) { + years.push({ + year: this.utils.getFullYear(dObj), + timestamp: dObj.getTime(), + isSelected: this.isSelectedYear(dObj), + isDisabled: this.isDisabledYear(dObj) + }); + this.utils.setFullYear(dObj, this.utils.getFullYear(dObj) + 1); + } + + return years; + }, + + /** + * @return {String} + */ + getPageDecade: function getPageDecade() { + var decadeStart = Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10; + var decadeEnd = decadeStart + 9; + var yearSuffix = this.translation.yearSuffix; + return "".concat(decadeStart, " - ").concat(decadeEnd).concat(yearSuffix); + }, + + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextDecadeDisabled(this.pageTimestamp) : this.isPreviousDecadeDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousDecadeDisabled(this.pageTimestamp) : this.isNextDecadeDisabled(this.pageTimestamp); + } + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + methods: { + selectYear: function selectYear(year) { + if (year.isDisabled) { + return false; + } + + this.$emit('selectYear', year); + }, + changeYear: function changeYear(incrementBy) { + var date = this.pageDate; + this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy); + this.$emit('changedDecade', date); + }, + previousDecade: function previousDecade() { + if (this.isPreviousDecadeDisabled()) { + return false; + } + + this.changeYear(-10); + }, + isPreviousDecadeDisabled: function isPreviousDecadeDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + var disabledYear = this.utils.getFullYear(this.disabledDates.to); + var lastYearInPreviousPage = Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10 - 1; + return disabledYear > lastYearInPreviousPage; + }, + nextDecade: function nextDecade() { + if (this.isNextDecadeDisabled()) { + return false; + } + + this.changeYear(10); + }, + isNextDecadeDisabled: function isNextDecadeDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + var disabledYear = this.utils.getFullYear(this.disabledDates.from); + var firstYearInNextPage = Math.ceil(this.utils.getFullYear(this.pageDate) / 10) * 10; + return disabledYear < firstYearInNextPage; + }, + + /** + * Whether the selected date is in this year + * @param {Date} + * @return {Boolean} + */ + isSelectedYear: function isSelectedYear(date) { + return this.selectedDate && this.utils.getFullYear(this.selectedDate) === this.utils.getFullYear(date); + }, + + /** + * Whether a year is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledYear: function isDisabledYear(date) { + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined' || !this.disabledDates) { + return false; + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to) { + if (this.utils.getFullYear(date) < this.utils.getFullYear(this.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from) { + if (this.utils.getFullYear(date) > this.utils.getFullYear(this.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + } // eslint-disable-next-line + +}; + +/* script */ +const __vue_script__$3 = script$3; + +/* template */ +var __vue_render__$3 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showYearView, + expression: "showYearView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextDecade() : _vm.previousDecade(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c("span", [_vm._v(_vm._s(_vm.getPageDecade))]), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousDecade() : _vm.nextDecade(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _vm._l(_vm.years, function(year) { + return _c( + "span", + { + key: year.timestamp, + staticClass: "cell year", + class: { selected: year.isSelected, disabled: year.isDisabled }, + on: { + click: function($event) { + $event.stopPropagation(); + return _vm.selectYear(year) + } + } + }, + [_vm._v(_vm._s(year.year))] + ) + }) + ], + 2 + ) +}; +var __vue_staticRenderFns__$3 = []; +__vue_render__$3._withStripped = true; + + /* style */ + const __vue_inject_styles__$3 = undefined; + /* scoped */ + const __vue_scope_id__$3 = undefined; + /* module identifier */ + const __vue_module_identifier__$3 = undefined; + /* functional template */ + const __vue_is_functional_template__$3 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerYear = normalizeComponent_1( + { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, + __vue_inject_styles__$3, + __vue_script__$3, + __vue_scope_id__$3, + __vue_is_functional_template__$3, + __vue_module_identifier__$3, + undefined, + undefined + ); + +// +var script$4 = { + components: { + DateInput: DateInput, + PickerDay: PickerDay, + PickerMonth: PickerMonth, + PickerYear: PickerYear + }, + props: { + value: { + validator: function validator(val) { + return utils$1.validateDateInput(val); + } + }, + name: String, + refName: String, + id: String, + format: { + type: [String, Function], + "default": 'dd MMM yyyy' + }, + language: { + type: Object, + "default": function _default() { + return en; + } + }, + openDate: { + validator: function validator(val) { + return utils$1.validateDateInput(val); + } + }, + dayCellContent: Function, + fullMonthName: Boolean, + disabledDates: Object, + highlighted: Object, + placeholder: String, + inline: Boolean, + calendarClass: [String, Object, Array], + inputClass: [String, Object, Array], + wrapperClass: [String, Object, Array], + mondayFirst: Boolean, + clearButton: Boolean, + clearButtonLabel: String, + clearButtonClass: String, + calendarButton: Boolean, + calendarButtonIcon: String, + calendarButtonIconContent: String, + bootstrapStyling: Boolean, + initialView: String, + disabled: Boolean, + required: Boolean, + typeable: Boolean, + useUtc: Boolean, + minimumView: { + type: String, + "default": 'day' + }, + maximumView: { + type: String, + "default": 'year' + } + }, + data: function data() { + var startDate = this.openDate ? new Date(this.openDate) : new Date(); + var constructedDateUtils = makeDateUtils(this.useUtc); + var pageTimestamp = constructedDateUtils.setDate(startDate, 1); + return { + /* + * Vue cannot observe changes to a Date Object so date must be stored as a timestamp + * This represents the first day of the current viewing month + * {Number} + */ + pageTimestamp: pageTimestamp, + + /* + * Selected Date + * {Date} + */ + selectedDate: null, + + /* + * Flags to show calendar views + * {Boolean} + */ + showDayView: false, + showMonthView: false, + showYearView: false, + + /* + * Positioning + */ + calendarHeight: 0, + resetTypedDate: new Date(), + utils: constructedDateUtils + }; + }, + watch: { + value: function value(_value) { + this.setValue(_value); + }, + openDate: function openDate() { + this.setPageDate(); + }, + initialView: function initialView() { + this.setInitialView(); + } + }, + computed: { + computedInitialView: function computedInitialView() { + if (!this.initialView) { + return this.minimumView; + } + + return this.initialView; + }, + pageDate: function pageDate() { + return new Date(this.pageTimestamp); + }, + translation: function translation() { + return this.language; + }, + calendarStyle: function calendarStyle() { + return { + position: this.isInline ? 'static' : undefined + }; + }, + isOpen: function isOpen() { + return this.showDayView || this.showMonthView || this.showYearView; + }, + isInline: function isInline() { + return !!this.inline; + }, + isRtl: function isRtl() { + return this.translation.rtl === true; + } + }, + methods: { + /** + * Called in the event that the user navigates to date pages and + * closes the picker without selecting a date. + */ + resetDefaultPageDate: function resetDefaultPageDate() { + if (this.selectedDate === null) { + this.setPageDate(); + return; + } + + this.setPageDate(this.selectedDate); + }, + + /** + * Effectively a toggle to show/hide the calendar + * @return {mixed} + */ + showCalendar: function showCalendar() { + if (this.disabled || this.isInline) { + return false; + } + + if (this.isOpen) { + return this.close(true); + } + + this.setInitialView(); + }, + + /** + * Sets the initial picker page view: day, month or year + */ + setInitialView: function setInitialView() { + var initialView = this.computedInitialView; + + if (!this.allowedToShowView(initialView)) { + throw new Error("initialView '".concat(this.initialView, "' cannot be rendered based on minimum '").concat(this.minimumView, "' and maximum '").concat(this.maximumView, "'")); + } + + switch (initialView) { + case 'year': + this.showYearCalendar(); + break; + + case 'month': + this.showMonthCalendar(); + break; + + default: + this.showDayCalendar(); + break; + } + }, + + /** + * Are we allowed to show a specific picker view? + * @param {String} view + * @return {Boolean} + */ + allowedToShowView: function allowedToShowView(view) { + var views = ['day', 'month', 'year']; + var minimumViewIndex = views.indexOf(this.minimumView); + var maximumViewIndex = views.indexOf(this.maximumView); + var viewIndex = views.indexOf(view); + return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex; + }, + + /** + * Show the day picker + * @return {Boolean} + */ + showDayCalendar: function showDayCalendar() { + if (!this.allowedToShowView('day')) { + return false; + } + + this.close(); + this.showDayView = true; + return true; + }, + + /** + * Show the month picker + * @return {Boolean} + */ + showMonthCalendar: function showMonthCalendar() { + if (!this.allowedToShowView('month')) { + return false; + } + + this.close(); + this.showMonthView = true; + return true; + }, + + /** + * Show the year picker + * @return {Boolean} + */ + showYearCalendar: function showYearCalendar() { + if (!this.allowedToShowView('year')) { + return false; + } + + this.close(); + this.showYearView = true; + return true; + }, + + /** + * Set the selected date + * @param {Number} timestamp + */ + setDate: function setDate(timestamp) { + var date = new Date(timestamp); + this.selectedDate = date; + this.setPageDate(date); + this.$emit('selected', date); + this.$emit('input', date); + }, + + /** + * Clear the selected date + */ + clearDate: function clearDate() { + this.selectedDate = null; + this.setPageDate(); + this.$emit('selected', null); + this.$emit('input', null); + this.$emit('cleared'); + }, + + /** + * @param {Object} date + */ + selectDate: function selectDate(date) { + this.setDate(date.timestamp); + + if (!this.isInline) { + this.close(true); + } + + this.resetTypedDate = new Date(); + }, + + /** + * @param {Object} date + */ + selectDisabledDate: function selectDisabledDate(date) { + this.$emit('selectedDisabled', date); + }, + + /** + * @param {Object} month + */ + selectMonth: function selectMonth(month) { + var date = new Date(month.timestamp); + + if (this.allowedToShowView('day')) { + this.setPageDate(date); + this.$emit('changedMonth', month); + this.showDayCalendar(); + } else { + this.selectDate(month); + } + }, + + /** + * @param {Object} year + */ + selectYear: function selectYear(year) { + var date = new Date(year.timestamp); + + if (this.allowedToShowView('month')) { + this.setPageDate(date); + this.$emit('changedYear', year); + this.showMonthCalendar(); + } else { + this.selectDate(year); + } + }, + + /** + * Set the datepicker value + * @param {Date|String|Number|null} date + */ + setValue: function setValue(date) { + if (typeof date === 'string' || typeof date === 'number') { + var parsed = new Date(date); + date = isNaN(parsed.valueOf()) ? null : parsed; + } + + if (!date) { + this.setPageDate(); + this.selectedDate = null; + return; + } + + this.selectedDate = date; + this.setPageDate(date); + }, + + /** + * Sets the date that the calendar should open on + */ + setPageDate: function setPageDate(date) { + if (!date) { + if (this.openDate) { + date = new Date(this.openDate); + } else { + date = new Date(); + } + } + + this.pageTimestamp = this.utils.setDate(new Date(date), 1); + }, + + /** + * Handles a month change from the day picker + */ + handleChangedMonthFromDayPicker: function handleChangedMonthFromDayPicker(date) { + this.setPageDate(date); + this.$emit('changedMonth', date); + }, + + /** + * Set the date from a typedDate event + */ + setTypedDate: function setTypedDate(date) { + this.setDate(date.getTime()); + }, + + /** + * Close all calendar layers + * @param {Boolean} emitEvent - emit close event + */ + close: function close(emitEvent) { + this.showDayView = this.showMonthView = this.showYearView = false; + + if (!this.isInline) { + if (emitEvent) { + this.$emit('closed'); + } + + document.removeEventListener('click', this.clickOutside, false); + } + }, + + /** + * Initiate the component + */ + init: function init() { + if (this.value) { + this.setValue(this.value); + } + + if (this.isInline) { + this.setInitialView(); + } + } + }, + mounted: function mounted() { + this.init(); + } +} // eslint-disable-next-line +; + +var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); +function createInjector(context) { + return function (id, style) { + return addStyle(id, style); + }; +} +var HEAD = document.head || document.getElementsByTagName('head')[0]; +var styles = {}; + +function addStyle(id, css) { + var group = isOldIE ? css.media || 'default' : id; + var style = styles[group] || (styles[group] = { + ids: new Set(), + styles: [] + }); + + if (!style.ids.has(id)) { + style.ids.add(id); + var code = css.source; + + if (css.map) { + // https://developer.chrome.com/devtools/docs/javascript-debugging + // this makes source maps inside style tags work properly in Chrome + code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 + + code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; + } + + if (!style.element) { + style.element = document.createElement('style'); + style.element.type = 'text/css'; + if (css.media) style.element.setAttribute('media', css.media); + HEAD.appendChild(style.element); + } + + if ('styleSheet' in style.element) { + style.styles.push(code); + style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); + } else { + var index = style.ids.size - 1; + var textNode = document.createTextNode(code); + var nodes = style.element.childNodes; + if (nodes[index]) style.element.removeChild(nodes[index]); + if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); + } + } +} + +var browser = createInjector; + +/* script */ +const __vue_script__$4 = script$4; + +/* template */ +var __vue_render__$4 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + staticClass: "vdp-datepicker", + class: [_vm.wrapperClass, _vm.isRtl ? "rtl" : ""] + }, + [ + _c( + "date-input", + { + ref: "dateInput", + attrs: { + selectedDate: _vm.selectedDate, + resetTypedDate: _vm.resetTypedDate, + format: _vm.format, + translation: _vm.translation, + inline: _vm.inline, + id: _vm.id, + name: _vm.name, + refName: _vm.refName, + openDate: _vm.openDate, + placeholder: _vm.placeholder, + inputClass: _vm.inputClass, + typeable: _vm.typeable, + clearButton: _vm.clearButton, + clearButtonLabel: _vm.clearButtonLabel, + clearButtonClass: _vm.clearButtonClass, + calendarButton: _vm.calendarButton, + calendarButtonIcon: _vm.calendarButtonIcon, + calendarButtonIconContent: _vm.calendarButtonIconContent, + disabled: _vm.disabled, + required: _vm.required, + bootstrapStyling: _vm.bootstrapStyling, + "use-utc": _vm.useUtc + }, + on: { + showCalendar: _vm.showCalendar, + closeCalendar: _vm.close, + typedDate: _vm.setTypedDate, + clearDate: _vm.clearDate + } + }, + [_vm._t("afterDateInput", null, { slot: "afterDateInput" })], + 2 + ), + _vm._v(" "), + _vm.allowedToShowView("day") + ? _c( + "picker-day", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showDayView: _vm.showDayView, + fullMonthName: _vm.fullMonthName, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + highlighted: _vm.highlighted, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + pageTimestamp: _vm.pageTimestamp, + isRtl: _vm.isRtl, + mondayFirst: _vm.mondayFirst, + dayCellContent: _vm.dayCellContent, + "use-utc": _vm.useUtc + }, + on: { + changedMonth: _vm.handleChangedMonthFromDayPicker, + selectDate: _vm.selectDate, + showMonthCalendar: _vm.showMonthCalendar, + selectedDisabled: _vm.selectDisabledDate + } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e(), + _vm._v(" "), + _vm.allowedToShowView("month") + ? _c( + "picker-month", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showMonthView: _vm.showMonthView, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + isRtl: _vm.isRtl, + "use-utc": _vm.useUtc + }, + on: { + selectMonth: _vm.selectMonth, + showYearCalendar: _vm.showYearCalendar, + changedYear: _vm.setPageDate + } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e(), + _vm._v(" "), + _vm.allowedToShowView("year") + ? _c( + "picker-year", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showYearView: _vm.showYearView, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + isRtl: _vm.isRtl, + "use-utc": _vm.useUtc + }, + on: { selectYear: _vm.selectYear, changedDecade: _vm.setPageDate } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e() + ], + 1 + ) +}; +var __vue_staticRenderFns__$4 = []; +__vue_render__$4._withStripped = true; + + /* style */ + const __vue_inject_styles__$4 = function (inject) { + if (!inject) return + inject("data-v-e02edcec_0", { source: ".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n", map: {"version":3,"sources":["Datepicker.vue"],"names":[],"mappings":"AAAA;EACE,cAAc;AAChB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,sBAAsB;AACxB;AACA;EACE,cAAc;EACd,iBAAiB;AACnB;AACA;EACE,qBAAqB;EACrB,kBAAkB;EAClB,yBAAyB;EACzB,WAAW;AACb;AACA;;EAEE,0BAA0B;EAC1B,WAAW;EACX,qBAAqB;EACrB,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,4CAA4C;EAC5C,6BAA6B;AAC/B;AACA;EACE,6BAA6B;EAC7B,iBAAiB;AACnB;AACA;EACE,6BAA6B;AAC/B;AACA;EACE,4BAA4B;EAC5B,gBAAgB;AAClB;AACA;EACE,4BAA4B;AAC9B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,gBAAgB;AAClB;AACA;EACE,WAAW;EACX,eAAe;AACjB;AACA;EACE,aAAa;EACb,cAAc;EACd,eAAe;AACjB;AACA;EACE,qBAAqB;EACrB,cAAc;EACd,0BAA0B;EAC1B,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,sBAAsB;EACtB,6BAA6B;AAC/B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,sBAAsB;AACxB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;AAChB;AACA;EACE,WAAW;AACb;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;EACd,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,mBAAmB;AACrB;AACA;;EAEE,cAAc;AAChB;AACA;;EAEE,eAAe;EACf,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,eAAe;AACjB","file":"Datepicker.vue","sourcesContent":[".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n"]}, media: undefined }); + + }; + /* scoped */ + const __vue_scope_id__$4 = undefined; + /* module identifier */ + const __vue_module_identifier__$4 = undefined; + /* functional template */ + const __vue_is_functional_template__$4 = false; + /* style inject SSR */ + + + + var Datepicker = normalizeComponent_1( + { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, + __vue_inject_styles__$4, + __vue_script__$4, + __vue_scope_id__$4, + __vue_is_functional_template__$4, + __vue_module_identifier__$4, + browser, + undefined + ); + +module.exports = Datepicker; diff --git a/dist/vuejs-datepicker.esm.js b/dist/vuejs-datepicker.esm.js new file mode 100644 index 00000000..6efbfdd7 --- /dev/null +++ b/dist/vuejs-datepicker.esm.js @@ -0,0 +1,2429 @@ +function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); +} + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} + +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + var ownKeys = Object.keys(source); + + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + })); + } + + ownKeys.forEach(function (key) { + _defineProperty(target, key, source[key]); + }); + } + + return target; +} + +var Language = +/*#__PURE__*/ +function () { + function Language(language, months, monthsAbbr, days) { + _classCallCheck(this, Language); + + this.language = language; + this.months = months; + this.monthsAbbr = monthsAbbr; + this.days = days; + this.rtl = false; + this.ymd = false; + this.yearSuffix = ''; + } + + _createClass(Language, [{ + key: "language", + get: function get() { + return this._language; + }, + set: function set(language) { + if (typeof language !== 'string') { + throw new TypeError('Language must be a string'); + } + + this._language = language; + } + }, { + key: "months", + get: function get() { + return this._months; + }, + set: function set(months) { + if (months.length !== 12) { + throw new RangeError("There must be 12 months for ".concat(this.language, " language")); + } + + this._months = months; + } + }, { + key: "monthsAbbr", + get: function get() { + return this._monthsAbbr; + }, + set: function set(monthsAbbr) { + if (monthsAbbr.length !== 12) { + throw new RangeError("There must be 12 abbreviated months for ".concat(this.language, " language")); + } + + this._monthsAbbr = monthsAbbr; + } + }, { + key: "days", + get: function get() { + return this._days; + }, + set: function set(days) { + if (days.length !== 7) { + throw new RangeError("There must be 7 days for ".concat(this.language, " language")); + } + + this._days = days; + } + }]); + + return Language; +}(); // eslint-disable-next-line + +var en = new Language('English', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']) // eslint-disable-next-line +; + +var utils = { + /** + * @type {Boolean} + */ + useUtc: false, + + /** + * Returns the full year, using UTC or not + * @param {Date} date + */ + getFullYear: function getFullYear(date) { + return this.useUtc ? date.getUTCFullYear() : date.getFullYear(); + }, + + /** + * Returns the month, using UTC or not + * @param {Date} date + */ + getMonth: function getMonth(date) { + return this.useUtc ? date.getUTCMonth() : date.getMonth(); + }, + + /** + * Returns the date, using UTC or not + * @param {Date} date + */ + getDate: function getDate(date) { + return this.useUtc ? date.getUTCDate() : date.getDate(); + }, + + /** + * Returns the day, using UTC or not + * @param {Date} date + */ + getDay: function getDay(date) { + return this.useUtc ? date.getUTCDay() : date.getDay(); + }, + + /** + * Returns the hours, using UTC or not + * @param {Date} date + */ + getHours: function getHours(date) { + return this.useUtc ? date.getUTCHours() : date.getHours(); + }, + + /** + * Returns the minutes, using UTC or not + * @param {Date} date + */ + getMinutes: function getMinutes(date) { + return this.useUtc ? date.getUTCMinutes() : date.getMinutes(); + }, + + /** + * Sets the full year, using UTC or not + * @param {Date} date + */ + setFullYear: function setFullYear(date, value, useUtc) { + return this.useUtc ? date.setUTCFullYear(value) : date.setFullYear(value); + }, + + /** + * Sets the month, using UTC or not + * @param {Date} date + */ + setMonth: function setMonth(date, value, useUtc) { + return this.useUtc ? date.setUTCMonth(value) : date.setMonth(value); + }, + + /** + * Sets the date, using UTC or not + * @param {Date} date + * @param {Number} value + */ + setDate: function setDate(date, value, useUtc) { + return this.useUtc ? date.setUTCDate(value) : date.setDate(value); + }, + + /** + * Check if date1 is equivalent to date2, without comparing the time + * @see https://stackoverflow.com/a/6202196/4455925 + * @param {Date} date1 + * @param {Date} date2 + */ + compareDates: function compareDates(date1, date2) { + var d1 = new Date(date1.getTime()); + var d2 = new Date(date2.getTime()); + + if (this.useUtc) { + d1.setUTCHours(0, 0, 0, 0); + d2.setUTCHours(0, 0, 0, 0); + } else { + d1.setHours(0, 0, 0, 0); + d2.setHours(0, 0, 0, 0); + } + + return d1.getTime() === d2.getTime(); + }, + + /** + * Validates a date object + * @param {Date} date - an object instantiated with the new Date constructor + * @return {Boolean} + */ + isValidDate: function isValidDate(date) { + if (Object.prototype.toString.call(date) !== '[object Date]') { + return false; + } + + return !isNaN(date.getTime()); + }, + + /** + * Return abbreviated week day name + * @param {Date} + * @param {Array} + * @return {String} + */ + getDayNameAbbr: function getDayNameAbbr(date, days) { + if (_typeof(date) !== 'object') { + throw TypeError('Invalid Type'); + } + + return days[this.getDay(date)]; + }, + + /** + * Return name of the month + * @param {Number|Date} + * @param {Array} + * @return {String} + */ + getMonthName: function getMonthName(month, months) { + if (!months) { + throw Error('missing 2nd parameter Months array'); + } + + if (_typeof(month) === 'object') { + return months[this.getMonth(month)]; + } + + if (typeof month === 'number') { + return months[month]; + } + + throw TypeError('Invalid type'); + }, + + /** + * Return an abbreviated version of the month + * @param {Number|Date} + * @return {String} + */ + getMonthNameAbbr: function getMonthNameAbbr(month, monthsAbbr) { + if (!monthsAbbr) { + throw Error('missing 2nd paramter Months array'); + } + + if (_typeof(month) === 'object') { + return monthsAbbr[this.getMonth(month)]; + } + + if (typeof month === 'number') { + return monthsAbbr[month]; + } + + throw TypeError('Invalid type'); + }, + + /** + * Alternative get total number of days in month + * @param {Number} year + * @param {Number} m + * @return {Number} + */ + daysInMonth: function daysInMonth(year, month) { + return /8|3|5|10/.test(month) ? 30 : month === 1 ? !(year % 4) && year % 100 || !(year % 400) ? 29 : 28 : 31; + }, + + /** + * Get nth suffix for date + * @param {Number} day + * @return {String} + */ + getNthSuffix: function getNthSuffix(day) { + switch (day) { + case 1: + case 21: + case 31: + return 'st'; + + case 2: + case 22: + return 'nd'; + + case 3: + case 23: + return 'rd'; + + default: + return 'th'; + } + }, + + /** + * Formats date object + * @param {Date} + * @param {String} + * @param {Object} + * @return {String} + */ + formatDate: function formatDate(date, format, translation) { + translation = !translation ? en : translation; + var year = this.getFullYear(date); + var month = this.getMonth(date) + 1; + var day = this.getDate(date); + var str = format.replace(/dd/, ('0' + day).slice(-2)).replace(/d/, day).replace(/yyyy/, year).replace(/yy/, String(year).slice(2)).replace(/MMMM/, this.getMonthName(this.getMonth(date), translation.months)).replace(/MMM/, this.getMonthNameAbbr(this.getMonth(date), translation.monthsAbbr)).replace(/MM/, ('0' + month).slice(-2)).replace(/M(?!a|ä|e)/, month).replace(/su/, this.getNthSuffix(this.getDate(date))).replace(/D(?!e|é|i)/, this.getDayNameAbbr(date, translation.days)); + return str; + }, + + /** + * Creates an array of dates for each day in between two dates. + * @param {Date} start + * @param {Date} end + * @return {Array} + */ + createDateArray: function createDateArray(start, end) { + var dates = []; + + while (start <= end) { + dates.push(new Date(start)); + start = this.setDate(new Date(start), this.getDate(new Date(start)) + 1); + } + + return dates; + }, + + /** + * method used as a prop validator for input values + * @param {*} val + * @return {Boolean} + */ + validateDateInput: function validateDateInput(val) { + return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number'; + } +}; +var makeDateUtils = function makeDateUtils(useUtc) { + return _objectSpread({}, utils, { + useUtc: useUtc + }); +}; +var utils$1 = _objectSpread({}, utils) // eslint-disable-next-line +; + +var script = { + props: { + selectedDate: Date, + resetTypedDate: [Date], + format: [String, Function], + translation: Object, + inline: Boolean, + id: String, + name: String, + refName: String, + openDate: Date, + placeholder: String, + inputClass: [String, Object, Array], + clearButton: Boolean, + clearButtonLabel: String, + clearButtonClass: String, + calendarButton: Boolean, + calendarButtonIcon: String, + calendarButtonIconContent: String, + disabled: Boolean, + required: Boolean, + typeable: Boolean, + bootstrapStyling: Boolean, + useUtc: Boolean + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + input: null, + typedDate: false, + utils: constructedDateUtils + }; + }, + computed: { + formattedValue: function formattedValue() { + if (!this.selectedDate) { + return null; + } + + if (this.typedDate) { + return this.typedDate; + } + + return typeof this.format === 'function' ? this.format(this.selectedDate) : this.utils.formatDate(new Date(this.selectedDate), this.format, this.translation); + }, + computedInputClass: function computedInputClass() { + if (this.bootstrapStyling) { + if (typeof this.inputClass === 'string') { + return [this.inputClass, 'form-control'].join(' '); + } + + return _objectSpread({ + 'form-control': true + }, this.inputClass); + } + + return this.inputClass; + } + }, + watch: { + resetTypedDate: function resetTypedDate() { + this.typedDate = false; + } + }, + methods: { + showCalendar: function showCalendar() { + this.$emit('showCalendar'); + }, + + /** + * Attempt to parse a typed date + * @param {Event} event + */ + parseTypedDate: function parseTypedDate(event) { + // close calendar if escape or enter are pressed + if ([27, // escape + 13 // enter + ].includes(event.keyCode)) { + this.input.blur(); + } + + if (this.typeable) { + var typedDate = Date.parse(this.input.value); + + if (!isNaN(typedDate)) { + this.typedDate = this.input.value; + this.$emit('typedDate', new Date(this.typedDate)); + } + } + }, + + /** + * nullify the typed date to defer to regular formatting + * called once the input is blurred + */ + inputBlurred: function inputBlurred() { + if (this.typeable && isNaN(Date.parse(this.input.value))) { + this.clearDate(); + this.input.value = null; + this.typedDate = null; + } + + this.$emit('closeCalendar'); + }, + + /** + * emit a clearDate event + */ + clearDate: function clearDate() { + this.$emit('clearDate'); + } + }, + mounted: function mounted() { + this.input = this.$el.querySelector('input'); + } +} // eslint-disable-next-line +; + +function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier +/* server only */ +, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { + if (typeof shadowMode !== 'boolean') { + createInjectorSSR = createInjector; + createInjector = shadowMode; + shadowMode = false; + } // Vue.extend constructor export interop. + + + var options = typeof script === 'function' ? script.options : script; // render functions + + if (template && template.render) { + options.render = template.render; + options.staticRenderFns = template.staticRenderFns; + options._compiled = true; // functional template + + if (isFunctionalTemplate) { + options.functional = true; + } + } // scopedId + + + if (scopeId) { + options._scopeId = scopeId; + } + + var hook; + + if (moduleIdentifier) { + // server build + hook = function hook(context) { + // 2.3 injection + context = context || // cached call + this.$vnode && this.$vnode.ssrContext || // stateful + this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional + // 2.2 with runInNewContext: true + + if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { + context = __VUE_SSR_CONTEXT__; + } // inject component styles + + + if (style) { + style.call(this, createInjectorSSR(context)); + } // register component module identifier for async chunk inference + + + if (context && context._registeredComponents) { + context._registeredComponents.add(moduleIdentifier); + } + }; // used by ssr in case component is cached and beforeCreate + // never gets called + + + options._ssrRegister = hook; + } else if (style) { + hook = shadowMode ? function () { + style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); + } : function (context) { + style.call(this, createInjector(context)); + }; + } + + if (hook) { + if (options.functional) { + // register for functional component in vue file + var originalRender = options.render; + + options.render = function renderWithStyleInjection(h, context) { + hook.call(context); + return originalRender(h, context); + }; + } else { + // inject component registration as beforeCreate hook + var existing = options.beforeCreate; + options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; + } + } + + return script; +} + +var normalizeComponent_1 = normalizeComponent; + +/* script */ +const __vue_script__ = script; + +/* template */ +var __vue_render__ = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c("div", [ + _c( + "div", + { class: { "input-group": _vm.bootstrapStyling } }, + [ + _vm.calendarButton + ? _c( + "span", + { + staticClass: "vdp-datepicker__calendar-button", + class: { "input-group-addon": _vm.bootstrapStyling }, + style: { "cursor:not-allowed;": _vm.disabled }, + on: { click: _vm.showCalendar } + }, + [ + _c( + "span", + { class: { "input-group-text": _vm.bootstrapStyling } }, + [ + _c("i", { class: _vm.calendarButtonIcon }, [ + _vm._v( + "\n " + + _vm._s(_vm.calendarButtonIconContent) + + "\n " + ), + !_vm.calendarButtonIcon + ? _c("span", [_vm._v("…")]) + : _vm._e() + ]) + ] + ) + ] + ) + : _vm._e(), + _vm._v(" "), + _c("input", { + ref: _vm.refName, + class: _vm.computedInputClass, + attrs: { + type: _vm.inline ? "hidden" : "text", + name: _vm.name, + id: _vm.id, + "open-date": _vm.openDate, + placeholder: _vm.placeholder, + "clear-button": _vm.clearButton, + disabled: _vm.disabled, + required: _vm.required, + readonly: !_vm.typeable, + autocomplete: "off" + }, + domProps: { value: _vm.formattedValue }, + on: { + click: _vm.showCalendar, + keyup: _vm.parseTypedDate, + blur: _vm.inputBlurred + } + }), + _vm._v(" "), + _vm._t("afterDateInput") + ], + 2 + ), + _vm._v(" "), + _vm.clearButton && _vm.clearButtonClass && _vm.clearButtonLabel + ? _c("div", { + class: _vm.clearButtonClass, + domProps: { textContent: _vm._s(_vm.clearButtonLabel) }, + on: { + click: function($event) { + return _vm.clearDate() + } + } + }) + : _vm._e() + ]) +}; +var __vue_staticRenderFns__ = []; +__vue_render__._withStripped = true; + + /* style */ + const __vue_inject_styles__ = undefined; + /* scoped */ + const __vue_scope_id__ = undefined; + /* module identifier */ + const __vue_module_identifier__ = undefined; + /* functional template */ + const __vue_is_functional_template__ = false; + /* style inject */ + + /* style inject SSR */ + + + + var DateInput = normalizeComponent_1( + { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, + __vue_inject_styles__, + __vue_script__, + __vue_scope_id__, + __vue_is_functional_template__, + __vue_module_identifier__, + undefined, + undefined + ); + +// +var script$1 = { + props: { + showDayView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + fullMonthName: Boolean, + allowedToShowView: Function, + dayCellContent: { + type: Function, + "default": function _default(day) { + return day.date; + } + }, + disabledDates: Object, + highlighted: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + mondayFirst: Boolean, + useUtc: Boolean + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + computed: { + /** + * Returns an array of day names + * @return {String[]} + */ + daysOfWeek: function daysOfWeek() { + if (this.mondayFirst) { + var tempDays = this.translation.days.slice(); + tempDays.push(tempDays.shift()); + return tempDays; + } + + return this.translation.days; + }, + + /** + * Returns the day number of the week less one for the first of the current month + * Used to show amount of empty cells before the first in the day calendar layout + * @return {Number} + */ + blankDays: function blankDays() { + var d = this.pageDate; + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + + if (this.mondayFirst) { + return this.utils.getDay(dObj) > 0 ? this.utils.getDay(dObj) - 1 : 6; + } + + return this.utils.getDay(dObj); + }, + + /** + * @return {Object[]} + */ + days: function days() { + var d = this.pageDate; + var days = []; // set up a new date object to the beginning of the current 'page' + + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + var daysInMonth = this.utils.daysInMonth(this.utils.getFullYear(dObj), this.utils.getMonth(dObj)); + + for (var i = 0; i < daysInMonth; i++) { + days.push({ + date: this.utils.getDate(dObj), + timestamp: dObj.getTime(), + isSelected: this.isSelectedDate(dObj), + isDisabled: this.isDisabledDate(dObj), + isHighlighted: this.isHighlightedDate(dObj), + isHighlightStart: this.isHighlightStart(dObj), + isHighlightEnd: this.isHighlightEnd(dObj), + isToday: this.utils.compareDates(dObj, new Date()), + isWeekend: this.utils.getDay(dObj) === 0 || this.utils.getDay(dObj) === 6, + isSaturday: this.utils.getDay(dObj) === 6, + isSunday: this.utils.getDay(dObj) === 0 + }); + this.utils.setDate(dObj, this.utils.getDate(dObj) + 1); + } + + return days; + }, + + /** + * Gets the name of the month the current page is on + * @return {String} + */ + currMonthName: function currMonthName() { + var monthName = this.fullMonthName ? this.translation.months : this.translation.monthsAbbr; + return this.utils.getMonthNameAbbr(this.utils.getMonth(this.pageDate), monthName); + }, + + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + currYearName: function currYearName() { + var yearSuffix = this.translation.yearSuffix; + return "".concat(this.utils.getFullYear(this.pageDate)).concat(yearSuffix); + }, + + /** + * Is this translation using year/month/day format? + * @return {Boolean} + */ + isYmd: function isYmd() { + return this.translation.ymd && this.translation.ymd === true; + }, + + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextMonthDisabled(this.pageTimestamp) : this.isPreviousMonthDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousMonthDisabled(this.pageTimestamp) : this.isNextMonthDisabled(this.pageTimestamp); + } + }, + methods: { + selectDate: function selectDate(date) { + if (date.isDisabled) { + this.$emit('selectedDisabled', date); + return false; + } + + this.$emit('selectDate', date); + }, + + /** + * @return {Number} + */ + getPageMonth: function getPageMonth() { + return this.utils.getMonth(this.pageDate); + }, + + /** + * Emit an event to show the month picker + */ + showMonthCalendar: function showMonthCalendar() { + this.$emit('showMonthCalendar'); + }, + + /** + * Change the page month + * @param {Number} incrementBy + */ + changeMonth: function changeMonth(incrementBy) { + var date = this.pageDate; + this.utils.setMonth(date, this.utils.getMonth(date) + incrementBy); + this.$emit('changedMonth', date); + }, + + /** + * Decrement the page month + */ + previousMonth: function previousMonth() { + if (!this.isPreviousMonthDisabled()) { + this.changeMonth(-1); + } + }, + + /** + * Is the previous month disabled? + * @return {Boolean} + */ + isPreviousMonthDisabled: function isPreviousMonthDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + var d = this.pageDate; + return this.utils.getMonth(this.disabledDates.to) >= this.utils.getMonth(d) && this.utils.getFullYear(this.disabledDates.to) >= this.utils.getFullYear(d); + }, + + /** + * Increment the current page month + */ + nextMonth: function nextMonth() { + if (!this.isNextMonthDisabled()) { + this.changeMonth(+1); + } + }, + + /** + * Is the next month disabled? + * @return {Boolean} + */ + isNextMonthDisabled: function isNextMonthDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + var d = this.pageDate; + return this.utils.getMonth(this.disabledDates.from) <= this.utils.getMonth(d) && this.utils.getFullYear(this.disabledDates.from) <= this.utils.getFullYear(d); + }, + + /** + * Whether a day is selected + * @param {Date} + * @return {Boolean} + */ + isSelectedDate: function isSelectedDate(dObj) { + return this.selectedDate && this.utils.compareDates(this.selectedDate, dObj); + }, + + /** + * Whether a day is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledDate: function isDisabledDate(date) { + var _this = this; + + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined') { + return false; + } + + if (typeof this.disabledDates.dates !== 'undefined') { + this.disabledDates.dates.forEach(function (d) { + if (_this.utils.compareDates(date, d)) { + disabledDates = true; + return true; + } + }); + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to && date < this.disabledDates.to) { + disabledDates = true; + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from && date > this.disabledDates.from) { + disabledDates = true; + } + + if (typeof this.disabledDates.ranges !== 'undefined') { + this.disabledDates.ranges.forEach(function (range) { + if (typeof range.from !== 'undefined' && range.from && typeof range.to !== 'undefined' && range.to) { + if (date < range.to && date > range.from) { + disabledDates = true; + return true; + } + } + }); + } + + if (typeof this.disabledDates.days !== 'undefined' && this.disabledDates.days.indexOf(this.utils.getDay(date)) !== -1) { + disabledDates = true; + } + + if (typeof this.disabledDates.daysOfMonth !== 'undefined' && this.disabledDates.daysOfMonth.indexOf(this.utils.getDate(date)) !== -1) { + disabledDates = true; + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + }, + + /** + * Whether a day is highlighted (only if it is not disabled already except when highlighted.includeDisabled is true) + * @param {Date} + * @return {Boolean} + */ + isHighlightedDate: function isHighlightedDate(date) { + var _this2 = this; + + if (!(this.highlighted && this.highlighted.includeDisabled) && this.isDisabledDate(date)) { + return false; + } + + var highlighted = false; + + if (typeof this.highlighted === 'undefined') { + return false; + } + + if (typeof this.highlighted.dates !== 'undefined') { + this.highlighted.dates.forEach(function (d) { + if (_this2.utils.compareDates(date, d)) { + highlighted = true; + return true; + } + }); + } + + if (this.isDefined(this.highlighted.from) && this.isDefined(this.highlighted.to)) { + highlighted = date >= this.highlighted.from && date <= this.highlighted.to; + } + + if (typeof this.highlighted.days !== 'undefined' && this.highlighted.days.indexOf(this.utils.getDay(date)) !== -1) { + highlighted = true; + } + + if (typeof this.highlighted.daysOfMonth !== 'undefined' && this.highlighted.daysOfMonth.indexOf(this.utils.getDate(date)) !== -1) { + highlighted = true; + } + + if (typeof this.highlighted.customPredictor === 'function' && this.highlighted.customPredictor(date)) { + highlighted = true; + } + + return highlighted; + }, + dayClasses: function dayClasses(day) { + return { + 'selected': day.isSelected, + 'disabled': day.isDisabled, + 'highlighted': day.isHighlighted, + 'today': day.isToday, + 'weekend': day.isWeekend, + 'sat': day.isSaturday, + 'sun': day.isSunday, + 'highlight-start': day.isHighlightStart, + 'highlight-end': day.isHighlightEnd + }; + }, + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + isHighlightStart: function isHighlightStart(date) { + return this.isHighlightedDate(date) && this.highlighted.from instanceof Date && this.utils.getFullYear(this.highlighted.from) === this.utils.getFullYear(date) && this.utils.getMonth(this.highlighted.from) === this.utils.getMonth(date) && this.utils.getDate(this.highlighted.from) === this.utils.getDate(date); + }, + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + isHighlightEnd: function isHighlightEnd(date) { + return this.isHighlightedDate(date) && this.highlighted.to instanceof Date && this.utils.getFullYear(this.highlighted.to) === this.utils.getFullYear(date) && this.utils.getMonth(this.highlighted.to) === this.utils.getMonth(date) && this.utils.getDate(this.highlighted.to) === this.utils.getDate(date); + }, + + /** + * Helper + * @param {mixed} prop + * @return {Boolean} + */ + isDefined: function isDefined(prop) { + return typeof prop !== 'undefined' && prop; + } + } // eslint-disable-next-line + +}; + +/* script */ +const __vue_script__$1 = script$1; + +/* template */ +var __vue_render__$1 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showDayView, + expression: "showDayView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextMonth() : _vm.previousMonth(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "day__month_btn", + class: _vm.allowedToShowView("month") ? "up" : "", + on: { click: _vm.showMonthCalendar } + }, + [ + _vm._v( + _vm._s(_vm.isYmd ? _vm.currYearName : _vm.currMonthName) + + " " + + _vm._s(_vm.isYmd ? _vm.currMonthName : _vm.currYearName) + ) + ] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousMonth() : _vm.nextMonth(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _c( + "div", + { class: _vm.isRtl ? "flex-rtl" : "" }, + [ + _vm._l(_vm.daysOfWeek, function(d) { + return _c( + "span", + { key: d.timestamp, staticClass: "cell day-header" }, + [_vm._v(_vm._s(d))] + ) + }), + _vm._v(" "), + _vm.blankDays > 0 + ? _vm._l(_vm.blankDays, function(d) { + return _c("span", { + key: d.timestamp, + staticClass: "cell day blank" + }) + }) + : _vm._e(), + _vm._l(_vm.days, function(day) { + return _c("span", { + key: day.timestamp, + staticClass: "cell day", + class: _vm.dayClasses(day), + domProps: { innerHTML: _vm._s(_vm.dayCellContent(day)) }, + on: { + click: function($event) { + return _vm.selectDate(day) + } + } + }) + }) + ], + 2 + ) + ], + 2 + ) +}; +var __vue_staticRenderFns__$1 = []; +__vue_render__$1._withStripped = true; + + /* style */ + const __vue_inject_styles__$1 = undefined; + /* scoped */ + const __vue_scope_id__$1 = undefined; + /* module identifier */ + const __vue_module_identifier__$1 = undefined; + /* functional template */ + const __vue_is_functional_template__$1 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerDay = normalizeComponent_1( + { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, + __vue_inject_styles__$1, + __vue_script__$1, + __vue_scope_id__$1, + __vue_is_functional_template__$1, + __vue_module_identifier__$1, + undefined, + undefined + ); + +// +var script$2 = { + props: { + showMonthView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + disabledDates: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + allowedToShowView: Function, + useUtc: Boolean + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + computed: { + months: function months() { + var d = this.pageDate; + var months = []; // set up a new date object to the beginning of the current 'page' + + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), 0, d.getUTCDate())) : new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 12; i++) { + months.push({ + month: this.utils.getMonthName(i, this.translation.months), + timestamp: dObj.getTime(), + isSelected: this.isSelectedMonth(dObj), + isDisabled: this.isDisabledMonth(dObj) + }); + this.utils.setMonth(dObj, this.utils.getMonth(dObj) + 1); + } + + return months; + }, + + /** + * Get year name on current page. + * @return {String} + */ + pageYearName: function pageYearName() { + var yearSuffix = this.translation.yearSuffix; + return "".concat(this.utils.getFullYear(this.pageDate)).concat(yearSuffix); + }, + + /** + * Is the left hand navigation disabled + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextYearDisabled(this.pageTimestamp) : this.isPreviousYearDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation disabled + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousYearDisabled(this.pageTimestamp) : this.isNextYearDisabled(this.pageTimestamp); + } + }, + methods: { + /** + * Emits a selectMonth event + * @param {Object} month + */ + selectMonth: function selectMonth(month) { + if (month.isDisabled) { + return false; + } + + this.$emit('selectMonth', month); + }, + + /** + * Changes the year up or down + * @param {Number} incrementBy + */ + changeYear: function changeYear(incrementBy) { + var date = this.pageDate; + this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy); + this.$emit('changedYear', date); + }, + + /** + * Decrements the year + */ + previousYear: function previousYear() { + if (!this.isPreviousYearDisabled()) { + this.changeYear(-1); + } + }, + + /** + * Checks if the previous year is disabled or not + * @return {Boolean} + */ + isPreviousYearDisabled: function isPreviousYearDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + return this.utils.getFullYear(this.disabledDates.to) >= this.utils.getFullYear(this.pageDate); + }, + + /** + * Increments the year + */ + nextYear: function nextYear() { + if (!this.isNextYearDisabled()) { + this.changeYear(1); + } + }, + + /** + * Checks if the next year is disabled or not + * @return {Boolean} + */ + isNextYearDisabled: function isNextYearDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + return this.utils.getFullYear(this.disabledDates.from) <= this.utils.getFullYear(this.pageDate); + }, + + /** + * Emits an event that shows the year calendar + */ + showYearCalendar: function showYearCalendar() { + this.$emit('showYearCalendar'); + }, + + /** + * Whether the selected date is in this month + * @param {Date} + * @return {Boolean} + */ + isSelectedMonth: function isSelectedMonth(date) { + return this.selectedDate && this.utils.getFullYear(this.selectedDate) === this.utils.getFullYear(date) && this.utils.getMonth(this.selectedDate) === this.utils.getMonth(date); + }, + + /** + * Whether a month is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledMonth: function isDisabledMonth(date) { + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined') { + return false; + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to) { + if (this.utils.getMonth(date) < this.utils.getMonth(this.disabledDates.to) && this.utils.getFullYear(date) <= this.utils.getFullYear(this.disabledDates.to) || this.utils.getFullYear(date) < this.utils.getFullYear(this.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from) { + if (this.utils.getMonth(date) > this.utils.getMonth(this.disabledDates.from) && this.utils.getFullYear(date) >= this.utils.getFullYear(this.disabledDates.from) || this.utils.getFullYear(date) > this.utils.getFullYear(this.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + } // eslint-disable-next-line + +}; + +/* script */ +const __vue_script__$2 = script$2; + +/* template */ +var __vue_render__$2 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showMonthView, + expression: "showMonthView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextYear() : _vm.previousYear(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "month__year_btn", + class: _vm.allowedToShowView("year") ? "up" : "", + on: { click: _vm.showYearCalendar } + }, + [_vm._v(_vm._s(_vm.pageYearName))] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousYear() : _vm.nextYear(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _vm._l(_vm.months, function(month) { + return _c( + "span", + { + key: month.timestamp, + staticClass: "cell month", + class: { selected: month.isSelected, disabled: month.isDisabled }, + on: { + click: function($event) { + $event.stopPropagation(); + return _vm.selectMonth(month) + } + } + }, + [_vm._v(_vm._s(month.month))] + ) + }) + ], + 2 + ) +}; +var __vue_staticRenderFns__$2 = []; +__vue_render__$2._withStripped = true; + + /* style */ + const __vue_inject_styles__$2 = undefined; + /* scoped */ + const __vue_scope_id__$2 = undefined; + /* module identifier */ + const __vue_module_identifier__$2 = undefined; + /* functional template */ + const __vue_is_functional_template__$2 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerMonth = normalizeComponent_1( + { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, + __vue_inject_styles__$2, + __vue_script__$2, + __vue_scope_id__$2, + __vue_is_functional_template__$2, + __vue_module_identifier__$2, + undefined, + undefined + ); + +// +var script$3 = { + props: { + showYearView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + disabledDates: Object, + highlighted: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + allowedToShowView: Function, + useUtc: Boolean + }, + computed: { + years: function years() { + var d = this.pageDate; + var years = []; // set up a new date object to the beginning of the current 'page'7 + + var dObj = this.useUtc ? new Date(Date.UTC(Math.floor(d.getUTCFullYear() / 10) * 10, d.getUTCMonth(), d.getUTCDate())) : new Date(Math.floor(d.getFullYear() / 10) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 10; i++) { + years.push({ + year: this.utils.getFullYear(dObj), + timestamp: dObj.getTime(), + isSelected: this.isSelectedYear(dObj), + isDisabled: this.isDisabledYear(dObj) + }); + this.utils.setFullYear(dObj, this.utils.getFullYear(dObj) + 1); + } + + return years; + }, + + /** + * @return {String} + */ + getPageDecade: function getPageDecade() { + var decadeStart = Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10; + var decadeEnd = decadeStart + 9; + var yearSuffix = this.translation.yearSuffix; + return "".concat(decadeStart, " - ").concat(decadeEnd).concat(yearSuffix); + }, + + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextDecadeDisabled(this.pageTimestamp) : this.isPreviousDecadeDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousDecadeDisabled(this.pageTimestamp) : this.isNextDecadeDisabled(this.pageTimestamp); + } + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + methods: { + selectYear: function selectYear(year) { + if (year.isDisabled) { + return false; + } + + this.$emit('selectYear', year); + }, + changeYear: function changeYear(incrementBy) { + var date = this.pageDate; + this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy); + this.$emit('changedDecade', date); + }, + previousDecade: function previousDecade() { + if (this.isPreviousDecadeDisabled()) { + return false; + } + + this.changeYear(-10); + }, + isPreviousDecadeDisabled: function isPreviousDecadeDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + var disabledYear = this.utils.getFullYear(this.disabledDates.to); + var lastYearInPreviousPage = Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10 - 1; + return disabledYear > lastYearInPreviousPage; + }, + nextDecade: function nextDecade() { + if (this.isNextDecadeDisabled()) { + return false; + } + + this.changeYear(10); + }, + isNextDecadeDisabled: function isNextDecadeDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + var disabledYear = this.utils.getFullYear(this.disabledDates.from); + var firstYearInNextPage = Math.ceil(this.utils.getFullYear(this.pageDate) / 10) * 10; + return disabledYear < firstYearInNextPage; + }, + + /** + * Whether the selected date is in this year + * @param {Date} + * @return {Boolean} + */ + isSelectedYear: function isSelectedYear(date) { + return this.selectedDate && this.utils.getFullYear(this.selectedDate) === this.utils.getFullYear(date); + }, + + /** + * Whether a year is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledYear: function isDisabledYear(date) { + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined' || !this.disabledDates) { + return false; + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to) { + if (this.utils.getFullYear(date) < this.utils.getFullYear(this.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from) { + if (this.utils.getFullYear(date) > this.utils.getFullYear(this.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + } // eslint-disable-next-line + +}; + +/* script */ +const __vue_script__$3 = script$3; + +/* template */ +var __vue_render__$3 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showYearView, + expression: "showYearView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextDecade() : _vm.previousDecade(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c("span", [_vm._v(_vm._s(_vm.getPageDecade))]), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousDecade() : _vm.nextDecade(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _vm._l(_vm.years, function(year) { + return _c( + "span", + { + key: year.timestamp, + staticClass: "cell year", + class: { selected: year.isSelected, disabled: year.isDisabled }, + on: { + click: function($event) { + $event.stopPropagation(); + return _vm.selectYear(year) + } + } + }, + [_vm._v(_vm._s(year.year))] + ) + }) + ], + 2 + ) +}; +var __vue_staticRenderFns__$3 = []; +__vue_render__$3._withStripped = true; + + /* style */ + const __vue_inject_styles__$3 = undefined; + /* scoped */ + const __vue_scope_id__$3 = undefined; + /* module identifier */ + const __vue_module_identifier__$3 = undefined; + /* functional template */ + const __vue_is_functional_template__$3 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerYear = normalizeComponent_1( + { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, + __vue_inject_styles__$3, + __vue_script__$3, + __vue_scope_id__$3, + __vue_is_functional_template__$3, + __vue_module_identifier__$3, + undefined, + undefined + ); + +// +var script$4 = { + components: { + DateInput: DateInput, + PickerDay: PickerDay, + PickerMonth: PickerMonth, + PickerYear: PickerYear + }, + props: { + value: { + validator: function validator(val) { + return utils$1.validateDateInput(val); + } + }, + name: String, + refName: String, + id: String, + format: { + type: [String, Function], + "default": 'dd MMM yyyy' + }, + language: { + type: Object, + "default": function _default() { + return en; + } + }, + openDate: { + validator: function validator(val) { + return utils$1.validateDateInput(val); + } + }, + dayCellContent: Function, + fullMonthName: Boolean, + disabledDates: Object, + highlighted: Object, + placeholder: String, + inline: Boolean, + calendarClass: [String, Object, Array], + inputClass: [String, Object, Array], + wrapperClass: [String, Object, Array], + mondayFirst: Boolean, + clearButton: Boolean, + clearButtonLabel: String, + clearButtonClass: String, + calendarButton: Boolean, + calendarButtonIcon: String, + calendarButtonIconContent: String, + bootstrapStyling: Boolean, + initialView: String, + disabled: Boolean, + required: Boolean, + typeable: Boolean, + useUtc: Boolean, + minimumView: { + type: String, + "default": 'day' + }, + maximumView: { + type: String, + "default": 'year' + } + }, + data: function data() { + var startDate = this.openDate ? new Date(this.openDate) : new Date(); + var constructedDateUtils = makeDateUtils(this.useUtc); + var pageTimestamp = constructedDateUtils.setDate(startDate, 1); + return { + /* + * Vue cannot observe changes to a Date Object so date must be stored as a timestamp + * This represents the first day of the current viewing month + * {Number} + */ + pageTimestamp: pageTimestamp, + + /* + * Selected Date + * {Date} + */ + selectedDate: null, + + /* + * Flags to show calendar views + * {Boolean} + */ + showDayView: false, + showMonthView: false, + showYearView: false, + + /* + * Positioning + */ + calendarHeight: 0, + resetTypedDate: new Date(), + utils: constructedDateUtils + }; + }, + watch: { + value: function value(_value) { + this.setValue(_value); + }, + openDate: function openDate() { + this.setPageDate(); + }, + initialView: function initialView() { + this.setInitialView(); + } + }, + computed: { + computedInitialView: function computedInitialView() { + if (!this.initialView) { + return this.minimumView; + } + + return this.initialView; + }, + pageDate: function pageDate() { + return new Date(this.pageTimestamp); + }, + translation: function translation() { + return this.language; + }, + calendarStyle: function calendarStyle() { + return { + position: this.isInline ? 'static' : undefined + }; + }, + isOpen: function isOpen() { + return this.showDayView || this.showMonthView || this.showYearView; + }, + isInline: function isInline() { + return !!this.inline; + }, + isRtl: function isRtl() { + return this.translation.rtl === true; + } + }, + methods: { + /** + * Called in the event that the user navigates to date pages and + * closes the picker without selecting a date. + */ + resetDefaultPageDate: function resetDefaultPageDate() { + if (this.selectedDate === null) { + this.setPageDate(); + return; + } + + this.setPageDate(this.selectedDate); + }, + + /** + * Effectively a toggle to show/hide the calendar + * @return {mixed} + */ + showCalendar: function showCalendar() { + if (this.disabled || this.isInline) { + return false; + } + + if (this.isOpen) { + return this.close(true); + } + + this.setInitialView(); + }, + + /** + * Sets the initial picker page view: day, month or year + */ + setInitialView: function setInitialView() { + var initialView = this.computedInitialView; + + if (!this.allowedToShowView(initialView)) { + throw new Error("initialView '".concat(this.initialView, "' cannot be rendered based on minimum '").concat(this.minimumView, "' and maximum '").concat(this.maximumView, "'")); + } + + switch (initialView) { + case 'year': + this.showYearCalendar(); + break; + + case 'month': + this.showMonthCalendar(); + break; + + default: + this.showDayCalendar(); + break; + } + }, + + /** + * Are we allowed to show a specific picker view? + * @param {String} view + * @return {Boolean} + */ + allowedToShowView: function allowedToShowView(view) { + var views = ['day', 'month', 'year']; + var minimumViewIndex = views.indexOf(this.minimumView); + var maximumViewIndex = views.indexOf(this.maximumView); + var viewIndex = views.indexOf(view); + return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex; + }, + + /** + * Show the day picker + * @return {Boolean} + */ + showDayCalendar: function showDayCalendar() { + if (!this.allowedToShowView('day')) { + return false; + } + + this.close(); + this.showDayView = true; + return true; + }, + + /** + * Show the month picker + * @return {Boolean} + */ + showMonthCalendar: function showMonthCalendar() { + if (!this.allowedToShowView('month')) { + return false; + } + + this.close(); + this.showMonthView = true; + return true; + }, + + /** + * Show the year picker + * @return {Boolean} + */ + showYearCalendar: function showYearCalendar() { + if (!this.allowedToShowView('year')) { + return false; + } + + this.close(); + this.showYearView = true; + return true; + }, + + /** + * Set the selected date + * @param {Number} timestamp + */ + setDate: function setDate(timestamp) { + var date = new Date(timestamp); + this.selectedDate = date; + this.setPageDate(date); + this.$emit('selected', date); + this.$emit('input', date); + }, + + /** + * Clear the selected date + */ + clearDate: function clearDate() { + this.selectedDate = null; + this.setPageDate(); + this.$emit('selected', null); + this.$emit('input', null); + this.$emit('cleared'); + }, + + /** + * @param {Object} date + */ + selectDate: function selectDate(date) { + this.setDate(date.timestamp); + + if (!this.isInline) { + this.close(true); + } + + this.resetTypedDate = new Date(); + }, + + /** + * @param {Object} date + */ + selectDisabledDate: function selectDisabledDate(date) { + this.$emit('selectedDisabled', date); + }, + + /** + * @param {Object} month + */ + selectMonth: function selectMonth(month) { + var date = new Date(month.timestamp); + + if (this.allowedToShowView('day')) { + this.setPageDate(date); + this.$emit('changedMonth', month); + this.showDayCalendar(); + } else { + this.selectDate(month); + } + }, + + /** + * @param {Object} year + */ + selectYear: function selectYear(year) { + var date = new Date(year.timestamp); + + if (this.allowedToShowView('month')) { + this.setPageDate(date); + this.$emit('changedYear', year); + this.showMonthCalendar(); + } else { + this.selectDate(year); + } + }, + + /** + * Set the datepicker value + * @param {Date|String|Number|null} date + */ + setValue: function setValue(date) { + if (typeof date === 'string' || typeof date === 'number') { + var parsed = new Date(date); + date = isNaN(parsed.valueOf()) ? null : parsed; + } + + if (!date) { + this.setPageDate(); + this.selectedDate = null; + return; + } + + this.selectedDate = date; + this.setPageDate(date); + }, + + /** + * Sets the date that the calendar should open on + */ + setPageDate: function setPageDate(date) { + if (!date) { + if (this.openDate) { + date = new Date(this.openDate); + } else { + date = new Date(); + } + } + + this.pageTimestamp = this.utils.setDate(new Date(date), 1); + }, + + /** + * Handles a month change from the day picker + */ + handleChangedMonthFromDayPicker: function handleChangedMonthFromDayPicker(date) { + this.setPageDate(date); + this.$emit('changedMonth', date); + }, + + /** + * Set the date from a typedDate event + */ + setTypedDate: function setTypedDate(date) { + this.setDate(date.getTime()); + }, + + /** + * Close all calendar layers + * @param {Boolean} emitEvent - emit close event + */ + close: function close(emitEvent) { + this.showDayView = this.showMonthView = this.showYearView = false; + + if (!this.isInline) { + if (emitEvent) { + this.$emit('closed'); + } + + document.removeEventListener('click', this.clickOutside, false); + } + }, + + /** + * Initiate the component + */ + init: function init() { + if (this.value) { + this.setValue(this.value); + } + + if (this.isInline) { + this.setInitialView(); + } + } + }, + mounted: function mounted() { + this.init(); + } +} // eslint-disable-next-line +; + +var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); +function createInjector(context) { + return function (id, style) { + return addStyle(id, style); + }; +} +var HEAD = document.head || document.getElementsByTagName('head')[0]; +var styles = {}; + +function addStyle(id, css) { + var group = isOldIE ? css.media || 'default' : id; + var style = styles[group] || (styles[group] = { + ids: new Set(), + styles: [] + }); + + if (!style.ids.has(id)) { + style.ids.add(id); + var code = css.source; + + if (css.map) { + // https://developer.chrome.com/devtools/docs/javascript-debugging + // this makes source maps inside style tags work properly in Chrome + code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 + + code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; + } + + if (!style.element) { + style.element = document.createElement('style'); + style.element.type = 'text/css'; + if (css.media) style.element.setAttribute('media', css.media); + HEAD.appendChild(style.element); + } + + if ('styleSheet' in style.element) { + style.styles.push(code); + style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); + } else { + var index = style.ids.size - 1; + var textNode = document.createTextNode(code); + var nodes = style.element.childNodes; + if (nodes[index]) style.element.removeChild(nodes[index]); + if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); + } + } +} + +var browser = createInjector; + +/* script */ +const __vue_script__$4 = script$4; + +/* template */ +var __vue_render__$4 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + staticClass: "vdp-datepicker", + class: [_vm.wrapperClass, _vm.isRtl ? "rtl" : ""] + }, + [ + _c( + "date-input", + { + ref: "dateInput", + attrs: { + selectedDate: _vm.selectedDate, + resetTypedDate: _vm.resetTypedDate, + format: _vm.format, + translation: _vm.translation, + inline: _vm.inline, + id: _vm.id, + name: _vm.name, + refName: _vm.refName, + openDate: _vm.openDate, + placeholder: _vm.placeholder, + inputClass: _vm.inputClass, + typeable: _vm.typeable, + clearButton: _vm.clearButton, + clearButtonLabel: _vm.clearButtonLabel, + clearButtonClass: _vm.clearButtonClass, + calendarButton: _vm.calendarButton, + calendarButtonIcon: _vm.calendarButtonIcon, + calendarButtonIconContent: _vm.calendarButtonIconContent, + disabled: _vm.disabled, + required: _vm.required, + bootstrapStyling: _vm.bootstrapStyling, + "use-utc": _vm.useUtc + }, + on: { + showCalendar: _vm.showCalendar, + closeCalendar: _vm.close, + typedDate: _vm.setTypedDate, + clearDate: _vm.clearDate + } + }, + [_vm._t("afterDateInput", null, { slot: "afterDateInput" })], + 2 + ), + _vm._v(" "), + _vm.allowedToShowView("day") + ? _c( + "picker-day", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showDayView: _vm.showDayView, + fullMonthName: _vm.fullMonthName, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + highlighted: _vm.highlighted, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + pageTimestamp: _vm.pageTimestamp, + isRtl: _vm.isRtl, + mondayFirst: _vm.mondayFirst, + dayCellContent: _vm.dayCellContent, + "use-utc": _vm.useUtc + }, + on: { + changedMonth: _vm.handleChangedMonthFromDayPicker, + selectDate: _vm.selectDate, + showMonthCalendar: _vm.showMonthCalendar, + selectedDisabled: _vm.selectDisabledDate + } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e(), + _vm._v(" "), + _vm.allowedToShowView("month") + ? _c( + "picker-month", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showMonthView: _vm.showMonthView, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + isRtl: _vm.isRtl, + "use-utc": _vm.useUtc + }, + on: { + selectMonth: _vm.selectMonth, + showYearCalendar: _vm.showYearCalendar, + changedYear: _vm.setPageDate + } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e(), + _vm._v(" "), + _vm.allowedToShowView("year") + ? _c( + "picker-year", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showYearView: _vm.showYearView, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + isRtl: _vm.isRtl, + "use-utc": _vm.useUtc + }, + on: { selectYear: _vm.selectYear, changedDecade: _vm.setPageDate } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e() + ], + 1 + ) +}; +var __vue_staticRenderFns__$4 = []; +__vue_render__$4._withStripped = true; + + /* style */ + const __vue_inject_styles__$4 = function (inject) { + if (!inject) return + inject("data-v-e02edcec_0", { source: ".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n", map: {"version":3,"sources":["Datepicker.vue"],"names":[],"mappings":"AAAA;EACE,cAAc;AAChB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,sBAAsB;AACxB;AACA;EACE,cAAc;EACd,iBAAiB;AACnB;AACA;EACE,qBAAqB;EACrB,kBAAkB;EAClB,yBAAyB;EACzB,WAAW;AACb;AACA;;EAEE,0BAA0B;EAC1B,WAAW;EACX,qBAAqB;EACrB,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,4CAA4C;EAC5C,6BAA6B;AAC/B;AACA;EACE,6BAA6B;EAC7B,iBAAiB;AACnB;AACA;EACE,6BAA6B;AAC/B;AACA;EACE,4BAA4B;EAC5B,gBAAgB;AAClB;AACA;EACE,4BAA4B;AAC9B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,gBAAgB;AAClB;AACA;EACE,WAAW;EACX,eAAe;AACjB;AACA;EACE,aAAa;EACb,cAAc;EACd,eAAe;AACjB;AACA;EACE,qBAAqB;EACrB,cAAc;EACd,0BAA0B;EAC1B,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,sBAAsB;EACtB,6BAA6B;AAC/B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,sBAAsB;AACxB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;AAChB;AACA;EACE,WAAW;AACb;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;EACd,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,mBAAmB;AACrB;AACA;;EAEE,cAAc;AAChB;AACA;;EAEE,eAAe;EACf,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,eAAe;AACjB","file":"Datepicker.vue","sourcesContent":[".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n"]}, media: undefined }); + + }; + /* scoped */ + const __vue_scope_id__$4 = undefined; + /* module identifier */ + const __vue_module_identifier__$4 = undefined; + /* functional template */ + const __vue_is_functional_template__$4 = false; + /* style inject SSR */ + + + + var Datepicker = normalizeComponent_1( + { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, + __vue_inject_styles__$4, + __vue_script__$4, + __vue_scope_id__$4, + __vue_is_functional_template__$4, + __vue_module_identifier__$4, + browser, + undefined + ); + +export default Datepicker; diff --git a/dist/vuejs-datepicker.js b/dist/vuejs-datepicker.js new file mode 100644 index 00000000..b8dffa87 --- /dev/null +++ b/dist/vuejs-datepicker.js @@ -0,0 +1,2437 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.vuejsDatepicker = factory()); +}(this, function () { 'use strict'; + + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; + } + + function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + var ownKeys = Object.keys(source); + + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + })); + } + + ownKeys.forEach(function (key) { + _defineProperty(target, key, source[key]); + }); + } + + return target; + } + + var Language = + /*#__PURE__*/ + function () { + function Language(language, months, monthsAbbr, days) { + _classCallCheck(this, Language); + + this.language = language; + this.months = months; + this.monthsAbbr = monthsAbbr; + this.days = days; + this.rtl = false; + this.ymd = false; + this.yearSuffix = ''; + } + + _createClass(Language, [{ + key: "language", + get: function get() { + return this._language; + }, + set: function set(language) { + if (typeof language !== 'string') { + throw new TypeError('Language must be a string'); + } + + this._language = language; + } + }, { + key: "months", + get: function get() { + return this._months; + }, + set: function set(months) { + if (months.length !== 12) { + throw new RangeError("There must be 12 months for ".concat(this.language, " language")); + } + + this._months = months; + } + }, { + key: "monthsAbbr", + get: function get() { + return this._monthsAbbr; + }, + set: function set(monthsAbbr) { + if (monthsAbbr.length !== 12) { + throw new RangeError("There must be 12 abbreviated months for ".concat(this.language, " language")); + } + + this._monthsAbbr = monthsAbbr; + } + }, { + key: "days", + get: function get() { + return this._days; + }, + set: function set(days) { + if (days.length !== 7) { + throw new RangeError("There must be 7 days for ".concat(this.language, " language")); + } + + this._days = days; + } + }]); + + return Language; + }(); // eslint-disable-next-line + + var en = new Language('English', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']) // eslint-disable-next-line + ; + + var utils = { + /** + * @type {Boolean} + */ + useUtc: false, + + /** + * Returns the full year, using UTC or not + * @param {Date} date + */ + getFullYear: function getFullYear(date) { + return this.useUtc ? date.getUTCFullYear() : date.getFullYear(); + }, + + /** + * Returns the month, using UTC or not + * @param {Date} date + */ + getMonth: function getMonth(date) { + return this.useUtc ? date.getUTCMonth() : date.getMonth(); + }, + + /** + * Returns the date, using UTC or not + * @param {Date} date + */ + getDate: function getDate(date) { + return this.useUtc ? date.getUTCDate() : date.getDate(); + }, + + /** + * Returns the day, using UTC or not + * @param {Date} date + */ + getDay: function getDay(date) { + return this.useUtc ? date.getUTCDay() : date.getDay(); + }, + + /** + * Returns the hours, using UTC or not + * @param {Date} date + */ + getHours: function getHours(date) { + return this.useUtc ? date.getUTCHours() : date.getHours(); + }, + + /** + * Returns the minutes, using UTC or not + * @param {Date} date + */ + getMinutes: function getMinutes(date) { + return this.useUtc ? date.getUTCMinutes() : date.getMinutes(); + }, + + /** + * Sets the full year, using UTC or not + * @param {Date} date + */ + setFullYear: function setFullYear(date, value, useUtc) { + return this.useUtc ? date.setUTCFullYear(value) : date.setFullYear(value); + }, + + /** + * Sets the month, using UTC or not + * @param {Date} date + */ + setMonth: function setMonth(date, value, useUtc) { + return this.useUtc ? date.setUTCMonth(value) : date.setMonth(value); + }, + + /** + * Sets the date, using UTC or not + * @param {Date} date + * @param {Number} value + */ + setDate: function setDate(date, value, useUtc) { + return this.useUtc ? date.setUTCDate(value) : date.setDate(value); + }, + + /** + * Check if date1 is equivalent to date2, without comparing the time + * @see https://stackoverflow.com/a/6202196/4455925 + * @param {Date} date1 + * @param {Date} date2 + */ + compareDates: function compareDates(date1, date2) { + var d1 = new Date(date1.getTime()); + var d2 = new Date(date2.getTime()); + + if (this.useUtc) { + d1.setUTCHours(0, 0, 0, 0); + d2.setUTCHours(0, 0, 0, 0); + } else { + d1.setHours(0, 0, 0, 0); + d2.setHours(0, 0, 0, 0); + } + + return d1.getTime() === d2.getTime(); + }, + + /** + * Validates a date object + * @param {Date} date - an object instantiated with the new Date constructor + * @return {Boolean} + */ + isValidDate: function isValidDate(date) { + if (Object.prototype.toString.call(date) !== '[object Date]') { + return false; + } + + return !isNaN(date.getTime()); + }, + + /** + * Return abbreviated week day name + * @param {Date} + * @param {Array} + * @return {String} + */ + getDayNameAbbr: function getDayNameAbbr(date, days) { + if (_typeof(date) !== 'object') { + throw TypeError('Invalid Type'); + } + + return days[this.getDay(date)]; + }, + + /** + * Return name of the month + * @param {Number|Date} + * @param {Array} + * @return {String} + */ + getMonthName: function getMonthName(month, months) { + if (!months) { + throw Error('missing 2nd parameter Months array'); + } + + if (_typeof(month) === 'object') { + return months[this.getMonth(month)]; + } + + if (typeof month === 'number') { + return months[month]; + } + + throw TypeError('Invalid type'); + }, + + /** + * Return an abbreviated version of the month + * @param {Number|Date} + * @return {String} + */ + getMonthNameAbbr: function getMonthNameAbbr(month, monthsAbbr) { + if (!monthsAbbr) { + throw Error('missing 2nd paramter Months array'); + } + + if (_typeof(month) === 'object') { + return monthsAbbr[this.getMonth(month)]; + } + + if (typeof month === 'number') { + return monthsAbbr[month]; + } + + throw TypeError('Invalid type'); + }, + + /** + * Alternative get total number of days in month + * @param {Number} year + * @param {Number} m + * @return {Number} + */ + daysInMonth: function daysInMonth(year, month) { + return /8|3|5|10/.test(month) ? 30 : month === 1 ? !(year % 4) && year % 100 || !(year % 400) ? 29 : 28 : 31; + }, + + /** + * Get nth suffix for date + * @param {Number} day + * @return {String} + */ + getNthSuffix: function getNthSuffix(day) { + switch (day) { + case 1: + case 21: + case 31: + return 'st'; + + case 2: + case 22: + return 'nd'; + + case 3: + case 23: + return 'rd'; + + default: + return 'th'; + } + }, + + /** + * Formats date object + * @param {Date} + * @param {String} + * @param {Object} + * @return {String} + */ + formatDate: function formatDate(date, format, translation) { + translation = !translation ? en : translation; + var year = this.getFullYear(date); + var month = this.getMonth(date) + 1; + var day = this.getDate(date); + var str = format.replace(/dd/, ('0' + day).slice(-2)).replace(/d/, day).replace(/yyyy/, year).replace(/yy/, String(year).slice(2)).replace(/MMMM/, this.getMonthName(this.getMonth(date), translation.months)).replace(/MMM/, this.getMonthNameAbbr(this.getMonth(date), translation.monthsAbbr)).replace(/MM/, ('0' + month).slice(-2)).replace(/M(?!a|ä|e)/, month).replace(/su/, this.getNthSuffix(this.getDate(date))).replace(/D(?!e|é|i)/, this.getDayNameAbbr(date, translation.days)); + return str; + }, + + /** + * Creates an array of dates for each day in between two dates. + * @param {Date} start + * @param {Date} end + * @return {Array} + */ + createDateArray: function createDateArray(start, end) { + var dates = []; + + while (start <= end) { + dates.push(new Date(start)); + start = this.setDate(new Date(start), this.getDate(new Date(start)) + 1); + } + + return dates; + }, + + /** + * method used as a prop validator for input values + * @param {*} val + * @return {Boolean} + */ + validateDateInput: function validateDateInput(val) { + return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number'; + } + }; + var makeDateUtils = function makeDateUtils(useUtc) { + return _objectSpread({}, utils, { + useUtc: useUtc + }); + }; + var utils$1 = _objectSpread({}, utils) // eslint-disable-next-line + ; + + var script = { + props: { + selectedDate: Date, + resetTypedDate: [Date], + format: [String, Function], + translation: Object, + inline: Boolean, + id: String, + name: String, + refName: String, + openDate: Date, + placeholder: String, + inputClass: [String, Object, Array], + clearButton: Boolean, + clearButtonLabel: String, + clearButtonClass: String, + calendarButton: Boolean, + calendarButtonIcon: String, + calendarButtonIconContent: String, + disabled: Boolean, + required: Boolean, + typeable: Boolean, + bootstrapStyling: Boolean, + useUtc: Boolean + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + input: null, + typedDate: false, + utils: constructedDateUtils + }; + }, + computed: { + formattedValue: function formattedValue() { + if (!this.selectedDate) { + return null; + } + + if (this.typedDate) { + return this.typedDate; + } + + return typeof this.format === 'function' ? this.format(this.selectedDate) : this.utils.formatDate(new Date(this.selectedDate), this.format, this.translation); + }, + computedInputClass: function computedInputClass() { + if (this.bootstrapStyling) { + if (typeof this.inputClass === 'string') { + return [this.inputClass, 'form-control'].join(' '); + } + + return _objectSpread({ + 'form-control': true + }, this.inputClass); + } + + return this.inputClass; + } + }, + watch: { + resetTypedDate: function resetTypedDate() { + this.typedDate = false; + } + }, + methods: { + showCalendar: function showCalendar() { + this.$emit('showCalendar'); + }, + + /** + * Attempt to parse a typed date + * @param {Event} event + */ + parseTypedDate: function parseTypedDate(event) { + // close calendar if escape or enter are pressed + if ([27, // escape + 13 // enter + ].includes(event.keyCode)) { + this.input.blur(); + } + + if (this.typeable) { + var typedDate = Date.parse(this.input.value); + + if (!isNaN(typedDate)) { + this.typedDate = this.input.value; + this.$emit('typedDate', new Date(this.typedDate)); + } + } + }, + + /** + * nullify the typed date to defer to regular formatting + * called once the input is blurred + */ + inputBlurred: function inputBlurred() { + if (this.typeable && isNaN(Date.parse(this.input.value))) { + this.clearDate(); + this.input.value = null; + this.typedDate = null; + } + + this.$emit('closeCalendar'); + }, + + /** + * emit a clearDate event + */ + clearDate: function clearDate() { + this.$emit('clearDate'); + } + }, + mounted: function mounted() { + this.input = this.$el.querySelector('input'); + } + } // eslint-disable-next-line + ; + + function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier + /* server only */ + , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { + if (typeof shadowMode !== 'boolean') { + createInjectorSSR = createInjector; + createInjector = shadowMode; + shadowMode = false; + } // Vue.extend constructor export interop. + + + var options = typeof script === 'function' ? script.options : script; // render functions + + if (template && template.render) { + options.render = template.render; + options.staticRenderFns = template.staticRenderFns; + options._compiled = true; // functional template + + if (isFunctionalTemplate) { + options.functional = true; + } + } // scopedId + + + if (scopeId) { + options._scopeId = scopeId; + } + + var hook; + + if (moduleIdentifier) { + // server build + hook = function hook(context) { + // 2.3 injection + context = context || // cached call + this.$vnode && this.$vnode.ssrContext || // stateful + this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional + // 2.2 with runInNewContext: true + + if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { + context = __VUE_SSR_CONTEXT__; + } // inject component styles + + + if (style) { + style.call(this, createInjectorSSR(context)); + } // register component module identifier for async chunk inference + + + if (context && context._registeredComponents) { + context._registeredComponents.add(moduleIdentifier); + } + }; // used by ssr in case component is cached and beforeCreate + // never gets called + + + options._ssrRegister = hook; + } else if (style) { + hook = shadowMode ? function () { + style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); + } : function (context) { + style.call(this, createInjector(context)); + }; + } + + if (hook) { + if (options.functional) { + // register for functional component in vue file + var originalRender = options.render; + + options.render = function renderWithStyleInjection(h, context) { + hook.call(context); + return originalRender(h, context); + }; + } else { + // inject component registration as beforeCreate hook + var existing = options.beforeCreate; + options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; + } + } + + return script; + } + + var normalizeComponent_1 = normalizeComponent; + + /* script */ + const __vue_script__ = script; + + /* template */ + var __vue_render__ = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c("div", [ + _c( + "div", + { class: { "input-group": _vm.bootstrapStyling } }, + [ + _vm.calendarButton + ? _c( + "span", + { + staticClass: "vdp-datepicker__calendar-button", + class: { "input-group-addon": _vm.bootstrapStyling }, + style: { "cursor:not-allowed;": _vm.disabled }, + on: { click: _vm.showCalendar } + }, + [ + _c( + "span", + { class: { "input-group-text": _vm.bootstrapStyling } }, + [ + _c("i", { class: _vm.calendarButtonIcon }, [ + _vm._v( + "\n " + + _vm._s(_vm.calendarButtonIconContent) + + "\n " + ), + !_vm.calendarButtonIcon + ? _c("span", [_vm._v("…")]) + : _vm._e() + ]) + ] + ) + ] + ) + : _vm._e(), + _vm._v(" "), + _c("input", { + ref: _vm.refName, + class: _vm.computedInputClass, + attrs: { + type: _vm.inline ? "hidden" : "text", + name: _vm.name, + id: _vm.id, + "open-date": _vm.openDate, + placeholder: _vm.placeholder, + "clear-button": _vm.clearButton, + disabled: _vm.disabled, + required: _vm.required, + readonly: !_vm.typeable, + autocomplete: "off" + }, + domProps: { value: _vm.formattedValue }, + on: { + click: _vm.showCalendar, + keyup: _vm.parseTypedDate, + blur: _vm.inputBlurred + } + }), + _vm._v(" "), + _vm._t("afterDateInput") + ], + 2 + ), + _vm._v(" "), + _vm.clearButton && _vm.clearButtonClass && _vm.clearButtonLabel + ? _c("div", { + class: _vm.clearButtonClass, + domProps: { textContent: _vm._s(_vm.clearButtonLabel) }, + on: { + click: function($event) { + return _vm.clearDate() + } + } + }) + : _vm._e() + ]) + }; + var __vue_staticRenderFns__ = []; + __vue_render__._withStripped = true; + + /* style */ + const __vue_inject_styles__ = undefined; + /* scoped */ + const __vue_scope_id__ = undefined; + /* module identifier */ + const __vue_module_identifier__ = undefined; + /* functional template */ + const __vue_is_functional_template__ = false; + /* style inject */ + + /* style inject SSR */ + + + + var DateInput = normalizeComponent_1( + { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, + __vue_inject_styles__, + __vue_script__, + __vue_scope_id__, + __vue_is_functional_template__, + __vue_module_identifier__, + undefined, + undefined + ); + + // + var script$1 = { + props: { + showDayView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + fullMonthName: Boolean, + allowedToShowView: Function, + dayCellContent: { + type: Function, + "default": function _default(day) { + return day.date; + } + }, + disabledDates: Object, + highlighted: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + mondayFirst: Boolean, + useUtc: Boolean + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + computed: { + /** + * Returns an array of day names + * @return {String[]} + */ + daysOfWeek: function daysOfWeek() { + if (this.mondayFirst) { + var tempDays = this.translation.days.slice(); + tempDays.push(tempDays.shift()); + return tempDays; + } + + return this.translation.days; + }, + + /** + * Returns the day number of the week less one for the first of the current month + * Used to show amount of empty cells before the first in the day calendar layout + * @return {Number} + */ + blankDays: function blankDays() { + var d = this.pageDate; + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + + if (this.mondayFirst) { + return this.utils.getDay(dObj) > 0 ? this.utils.getDay(dObj) - 1 : 6; + } + + return this.utils.getDay(dObj); + }, + + /** + * @return {Object[]} + */ + days: function days() { + var d = this.pageDate; + var days = []; // set up a new date object to the beginning of the current 'page' + + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + var daysInMonth = this.utils.daysInMonth(this.utils.getFullYear(dObj), this.utils.getMonth(dObj)); + + for (var i = 0; i < daysInMonth; i++) { + days.push({ + date: this.utils.getDate(dObj), + timestamp: dObj.getTime(), + isSelected: this.isSelectedDate(dObj), + isDisabled: this.isDisabledDate(dObj), + isHighlighted: this.isHighlightedDate(dObj), + isHighlightStart: this.isHighlightStart(dObj), + isHighlightEnd: this.isHighlightEnd(dObj), + isToday: this.utils.compareDates(dObj, new Date()), + isWeekend: this.utils.getDay(dObj) === 0 || this.utils.getDay(dObj) === 6, + isSaturday: this.utils.getDay(dObj) === 6, + isSunday: this.utils.getDay(dObj) === 0 + }); + this.utils.setDate(dObj, this.utils.getDate(dObj) + 1); + } + + return days; + }, + + /** + * Gets the name of the month the current page is on + * @return {String} + */ + currMonthName: function currMonthName() { + var monthName = this.fullMonthName ? this.translation.months : this.translation.monthsAbbr; + return this.utils.getMonthNameAbbr(this.utils.getMonth(this.pageDate), monthName); + }, + + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + currYearName: function currYearName() { + var yearSuffix = this.translation.yearSuffix; + return "".concat(this.utils.getFullYear(this.pageDate)).concat(yearSuffix); + }, + + /** + * Is this translation using year/month/day format? + * @return {Boolean} + */ + isYmd: function isYmd() { + return this.translation.ymd && this.translation.ymd === true; + }, + + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextMonthDisabled(this.pageTimestamp) : this.isPreviousMonthDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousMonthDisabled(this.pageTimestamp) : this.isNextMonthDisabled(this.pageTimestamp); + } + }, + methods: { + selectDate: function selectDate(date) { + if (date.isDisabled) { + this.$emit('selectedDisabled', date); + return false; + } + + this.$emit('selectDate', date); + }, + + /** + * @return {Number} + */ + getPageMonth: function getPageMonth() { + return this.utils.getMonth(this.pageDate); + }, + + /** + * Emit an event to show the month picker + */ + showMonthCalendar: function showMonthCalendar() { + this.$emit('showMonthCalendar'); + }, + + /** + * Change the page month + * @param {Number} incrementBy + */ + changeMonth: function changeMonth(incrementBy) { + var date = this.pageDate; + this.utils.setMonth(date, this.utils.getMonth(date) + incrementBy); + this.$emit('changedMonth', date); + }, + + /** + * Decrement the page month + */ + previousMonth: function previousMonth() { + if (!this.isPreviousMonthDisabled()) { + this.changeMonth(-1); + } + }, + + /** + * Is the previous month disabled? + * @return {Boolean} + */ + isPreviousMonthDisabled: function isPreviousMonthDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + var d = this.pageDate; + return this.utils.getMonth(this.disabledDates.to) >= this.utils.getMonth(d) && this.utils.getFullYear(this.disabledDates.to) >= this.utils.getFullYear(d); + }, + + /** + * Increment the current page month + */ + nextMonth: function nextMonth() { + if (!this.isNextMonthDisabled()) { + this.changeMonth(+1); + } + }, + + /** + * Is the next month disabled? + * @return {Boolean} + */ + isNextMonthDisabled: function isNextMonthDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + var d = this.pageDate; + return this.utils.getMonth(this.disabledDates.from) <= this.utils.getMonth(d) && this.utils.getFullYear(this.disabledDates.from) <= this.utils.getFullYear(d); + }, + + /** + * Whether a day is selected + * @param {Date} + * @return {Boolean} + */ + isSelectedDate: function isSelectedDate(dObj) { + return this.selectedDate && this.utils.compareDates(this.selectedDate, dObj); + }, + + /** + * Whether a day is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledDate: function isDisabledDate(date) { + var _this = this; + + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined') { + return false; + } + + if (typeof this.disabledDates.dates !== 'undefined') { + this.disabledDates.dates.forEach(function (d) { + if (_this.utils.compareDates(date, d)) { + disabledDates = true; + return true; + } + }); + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to && date < this.disabledDates.to) { + disabledDates = true; + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from && date > this.disabledDates.from) { + disabledDates = true; + } + + if (typeof this.disabledDates.ranges !== 'undefined') { + this.disabledDates.ranges.forEach(function (range) { + if (typeof range.from !== 'undefined' && range.from && typeof range.to !== 'undefined' && range.to) { + if (date < range.to && date > range.from) { + disabledDates = true; + return true; + } + } + }); + } + + if (typeof this.disabledDates.days !== 'undefined' && this.disabledDates.days.indexOf(this.utils.getDay(date)) !== -1) { + disabledDates = true; + } + + if (typeof this.disabledDates.daysOfMonth !== 'undefined' && this.disabledDates.daysOfMonth.indexOf(this.utils.getDate(date)) !== -1) { + disabledDates = true; + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + }, + + /** + * Whether a day is highlighted (only if it is not disabled already except when highlighted.includeDisabled is true) + * @param {Date} + * @return {Boolean} + */ + isHighlightedDate: function isHighlightedDate(date) { + var _this2 = this; + + if (!(this.highlighted && this.highlighted.includeDisabled) && this.isDisabledDate(date)) { + return false; + } + + var highlighted = false; + + if (typeof this.highlighted === 'undefined') { + return false; + } + + if (typeof this.highlighted.dates !== 'undefined') { + this.highlighted.dates.forEach(function (d) { + if (_this2.utils.compareDates(date, d)) { + highlighted = true; + return true; + } + }); + } + + if (this.isDefined(this.highlighted.from) && this.isDefined(this.highlighted.to)) { + highlighted = date >= this.highlighted.from && date <= this.highlighted.to; + } + + if (typeof this.highlighted.days !== 'undefined' && this.highlighted.days.indexOf(this.utils.getDay(date)) !== -1) { + highlighted = true; + } + + if (typeof this.highlighted.daysOfMonth !== 'undefined' && this.highlighted.daysOfMonth.indexOf(this.utils.getDate(date)) !== -1) { + highlighted = true; + } + + if (typeof this.highlighted.customPredictor === 'function' && this.highlighted.customPredictor(date)) { + highlighted = true; + } + + return highlighted; + }, + dayClasses: function dayClasses(day) { + return { + 'selected': day.isSelected, + 'disabled': day.isDisabled, + 'highlighted': day.isHighlighted, + 'today': day.isToday, + 'weekend': day.isWeekend, + 'sat': day.isSaturday, + 'sun': day.isSunday, + 'highlight-start': day.isHighlightStart, + 'highlight-end': day.isHighlightEnd + }; + }, + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + isHighlightStart: function isHighlightStart(date) { + return this.isHighlightedDate(date) && this.highlighted.from instanceof Date && this.utils.getFullYear(this.highlighted.from) === this.utils.getFullYear(date) && this.utils.getMonth(this.highlighted.from) === this.utils.getMonth(date) && this.utils.getDate(this.highlighted.from) === this.utils.getDate(date); + }, + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + isHighlightEnd: function isHighlightEnd(date) { + return this.isHighlightedDate(date) && this.highlighted.to instanceof Date && this.utils.getFullYear(this.highlighted.to) === this.utils.getFullYear(date) && this.utils.getMonth(this.highlighted.to) === this.utils.getMonth(date) && this.utils.getDate(this.highlighted.to) === this.utils.getDate(date); + }, + + /** + * Helper + * @param {mixed} prop + * @return {Boolean} + */ + isDefined: function isDefined(prop) { + return typeof prop !== 'undefined' && prop; + } + } // eslint-disable-next-line + + }; + + /* script */ + const __vue_script__$1 = script$1; + + /* template */ + var __vue_render__$1 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showDayView, + expression: "showDayView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextMonth() : _vm.previousMonth(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "day__month_btn", + class: _vm.allowedToShowView("month") ? "up" : "", + on: { click: _vm.showMonthCalendar } + }, + [ + _vm._v( + _vm._s(_vm.isYmd ? _vm.currYearName : _vm.currMonthName) + + " " + + _vm._s(_vm.isYmd ? _vm.currMonthName : _vm.currYearName) + ) + ] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousMonth() : _vm.nextMonth(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _c( + "div", + { class: _vm.isRtl ? "flex-rtl" : "" }, + [ + _vm._l(_vm.daysOfWeek, function(d) { + return _c( + "span", + { key: d.timestamp, staticClass: "cell day-header" }, + [_vm._v(_vm._s(d))] + ) + }), + _vm._v(" "), + _vm.blankDays > 0 + ? _vm._l(_vm.blankDays, function(d) { + return _c("span", { + key: d.timestamp, + staticClass: "cell day blank" + }) + }) + : _vm._e(), + _vm._l(_vm.days, function(day) { + return _c("span", { + key: day.timestamp, + staticClass: "cell day", + class: _vm.dayClasses(day), + domProps: { innerHTML: _vm._s(_vm.dayCellContent(day)) }, + on: { + click: function($event) { + return _vm.selectDate(day) + } + } + }) + }) + ], + 2 + ) + ], + 2 + ) + }; + var __vue_staticRenderFns__$1 = []; + __vue_render__$1._withStripped = true; + + /* style */ + const __vue_inject_styles__$1 = undefined; + /* scoped */ + const __vue_scope_id__$1 = undefined; + /* module identifier */ + const __vue_module_identifier__$1 = undefined; + /* functional template */ + const __vue_is_functional_template__$1 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerDay = normalizeComponent_1( + { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, + __vue_inject_styles__$1, + __vue_script__$1, + __vue_scope_id__$1, + __vue_is_functional_template__$1, + __vue_module_identifier__$1, + undefined, + undefined + ); + + // + var script$2 = { + props: { + showMonthView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + disabledDates: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + allowedToShowView: Function, + useUtc: Boolean + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + computed: { + months: function months() { + var d = this.pageDate; + var months = []; // set up a new date object to the beginning of the current 'page' + + var dObj = this.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), 0, d.getUTCDate())) : new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 12; i++) { + months.push({ + month: this.utils.getMonthName(i, this.translation.months), + timestamp: dObj.getTime(), + isSelected: this.isSelectedMonth(dObj), + isDisabled: this.isDisabledMonth(dObj) + }); + this.utils.setMonth(dObj, this.utils.getMonth(dObj) + 1); + } + + return months; + }, + + /** + * Get year name on current page. + * @return {String} + */ + pageYearName: function pageYearName() { + var yearSuffix = this.translation.yearSuffix; + return "".concat(this.utils.getFullYear(this.pageDate)).concat(yearSuffix); + }, + + /** + * Is the left hand navigation disabled + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextYearDisabled(this.pageTimestamp) : this.isPreviousYearDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation disabled + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousYearDisabled(this.pageTimestamp) : this.isNextYearDisabled(this.pageTimestamp); + } + }, + methods: { + /** + * Emits a selectMonth event + * @param {Object} month + */ + selectMonth: function selectMonth(month) { + if (month.isDisabled) { + return false; + } + + this.$emit('selectMonth', month); + }, + + /** + * Changes the year up or down + * @param {Number} incrementBy + */ + changeYear: function changeYear(incrementBy) { + var date = this.pageDate; + this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy); + this.$emit('changedYear', date); + }, + + /** + * Decrements the year + */ + previousYear: function previousYear() { + if (!this.isPreviousYearDisabled()) { + this.changeYear(-1); + } + }, + + /** + * Checks if the previous year is disabled or not + * @return {Boolean} + */ + isPreviousYearDisabled: function isPreviousYearDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + return this.utils.getFullYear(this.disabledDates.to) >= this.utils.getFullYear(this.pageDate); + }, + + /** + * Increments the year + */ + nextYear: function nextYear() { + if (!this.isNextYearDisabled()) { + this.changeYear(1); + } + }, + + /** + * Checks if the next year is disabled or not + * @return {Boolean} + */ + isNextYearDisabled: function isNextYearDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + return this.utils.getFullYear(this.disabledDates.from) <= this.utils.getFullYear(this.pageDate); + }, + + /** + * Emits an event that shows the year calendar + */ + showYearCalendar: function showYearCalendar() { + this.$emit('showYearCalendar'); + }, + + /** + * Whether the selected date is in this month + * @param {Date} + * @return {Boolean} + */ + isSelectedMonth: function isSelectedMonth(date) { + return this.selectedDate && this.utils.getFullYear(this.selectedDate) === this.utils.getFullYear(date) && this.utils.getMonth(this.selectedDate) === this.utils.getMonth(date); + }, + + /** + * Whether a month is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledMonth: function isDisabledMonth(date) { + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined') { + return false; + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to) { + if (this.utils.getMonth(date) < this.utils.getMonth(this.disabledDates.to) && this.utils.getFullYear(date) <= this.utils.getFullYear(this.disabledDates.to) || this.utils.getFullYear(date) < this.utils.getFullYear(this.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from) { + if (this.utils.getMonth(date) > this.utils.getMonth(this.disabledDates.from) && this.utils.getFullYear(date) >= this.utils.getFullYear(this.disabledDates.from) || this.utils.getFullYear(date) > this.utils.getFullYear(this.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + } // eslint-disable-next-line + + }; + + /* script */ + const __vue_script__$2 = script$2; + + /* template */ + var __vue_render__$2 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showMonthView, + expression: "showMonthView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextYear() : _vm.previousYear(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "month__year_btn", + class: _vm.allowedToShowView("year") ? "up" : "", + on: { click: _vm.showYearCalendar } + }, + [_vm._v(_vm._s(_vm.pageYearName))] + ), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousYear() : _vm.nextYear(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _vm._l(_vm.months, function(month) { + return _c( + "span", + { + key: month.timestamp, + staticClass: "cell month", + class: { selected: month.isSelected, disabled: month.isDisabled }, + on: { + click: function($event) { + $event.stopPropagation(); + return _vm.selectMonth(month) + } + } + }, + [_vm._v(_vm._s(month.month))] + ) + }) + ], + 2 + ) + }; + var __vue_staticRenderFns__$2 = []; + __vue_render__$2._withStripped = true; + + /* style */ + const __vue_inject_styles__$2 = undefined; + /* scoped */ + const __vue_scope_id__$2 = undefined; + /* module identifier */ + const __vue_module_identifier__$2 = undefined; + /* functional template */ + const __vue_is_functional_template__$2 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerMonth = normalizeComponent_1( + { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, + __vue_inject_styles__$2, + __vue_script__$2, + __vue_scope_id__$2, + __vue_is_functional_template__$2, + __vue_module_identifier__$2, + undefined, + undefined + ); + + // + var script$3 = { + props: { + showYearView: Boolean, + selectedDate: Date, + pageDate: Date, + pageTimestamp: Number, + disabledDates: Object, + highlighted: Object, + calendarClass: [String, Object, Array], + calendarStyle: Object, + translation: Object, + isRtl: Boolean, + allowedToShowView: Function, + useUtc: Boolean + }, + computed: { + years: function years() { + var d = this.pageDate; + var years = []; // set up a new date object to the beginning of the current 'page'7 + + var dObj = this.useUtc ? new Date(Date.UTC(Math.floor(d.getUTCFullYear() / 10) * 10, d.getUTCMonth(), d.getUTCDate())) : new Date(Math.floor(d.getFullYear() / 10) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 10; i++) { + years.push({ + year: this.utils.getFullYear(dObj), + timestamp: dObj.getTime(), + isSelected: this.isSelectedYear(dObj), + isDisabled: this.isDisabledYear(dObj) + }); + this.utils.setFullYear(dObj, this.utils.getFullYear(dObj) + 1); + } + + return years; + }, + + /** + * @return {String} + */ + getPageDecade: function getPageDecade() { + var decadeStart = Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10; + var decadeEnd = decadeStart + 9; + var yearSuffix = this.translation.yearSuffix; + return "".concat(decadeStart, " - ").concat(decadeEnd).concat(yearSuffix); + }, + + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + isLeftNavDisabled: function isLeftNavDisabled() { + return this.isRtl ? this.isNextDecadeDisabled(this.pageTimestamp) : this.isPreviousDecadeDisabled(this.pageTimestamp); + }, + + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + isRightNavDisabled: function isRightNavDisabled() { + return this.isRtl ? this.isPreviousDecadeDisabled(this.pageTimestamp) : this.isNextDecadeDisabled(this.pageTimestamp); + } + }, + data: function data() { + var constructedDateUtils = makeDateUtils(this.useUtc); + return { + utils: constructedDateUtils + }; + }, + methods: { + selectYear: function selectYear(year) { + if (year.isDisabled) { + return false; + } + + this.$emit('selectYear', year); + }, + changeYear: function changeYear(incrementBy) { + var date = this.pageDate; + this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy); + this.$emit('changedDecade', date); + }, + previousDecade: function previousDecade() { + if (this.isPreviousDecadeDisabled()) { + return false; + } + + this.changeYear(-10); + }, + isPreviousDecadeDisabled: function isPreviousDecadeDisabled() { + if (!this.disabledDates || !this.disabledDates.to) { + return false; + } + + var disabledYear = this.utils.getFullYear(this.disabledDates.to); + var lastYearInPreviousPage = Math.floor(this.utils.getFullYear(this.pageDate) / 10) * 10 - 1; + return disabledYear > lastYearInPreviousPage; + }, + nextDecade: function nextDecade() { + if (this.isNextDecadeDisabled()) { + return false; + } + + this.changeYear(10); + }, + isNextDecadeDisabled: function isNextDecadeDisabled() { + if (!this.disabledDates || !this.disabledDates.from) { + return false; + } + + var disabledYear = this.utils.getFullYear(this.disabledDates.from); + var firstYearInNextPage = Math.ceil(this.utils.getFullYear(this.pageDate) / 10) * 10; + return disabledYear < firstYearInNextPage; + }, + + /** + * Whether the selected date is in this year + * @param {Date} + * @return {Boolean} + */ + isSelectedYear: function isSelectedYear(date) { + return this.selectedDate && this.utils.getFullYear(this.selectedDate) === this.utils.getFullYear(date); + }, + + /** + * Whether a year is disabled + * @param {Date} + * @return {Boolean} + */ + isDisabledYear: function isDisabledYear(date) { + var disabledDates = false; + + if (typeof this.disabledDates === 'undefined' || !this.disabledDates) { + return false; + } + + if (typeof this.disabledDates.to !== 'undefined' && this.disabledDates.to) { + if (this.utils.getFullYear(date) < this.utils.getFullYear(this.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.from !== 'undefined' && this.disabledDates.from) { + if (this.utils.getFullYear(date) > this.utils.getFullYear(this.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof this.disabledDates.customPredictor === 'function' && this.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + } // eslint-disable-next-line + + }; + + /* script */ + const __vue_script__$3 = script$3; + + /* template */ + var __vue_render__$3 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + directives: [ + { + name: "show", + rawName: "v-show", + value: _vm.showYearView, + expression: "showYearView" + } + ], + class: [_vm.calendarClass, "vdp-datepicker__calendar"], + style: _vm.calendarStyle, + on: { + mousedown: function($event) { + $event.preventDefault(); + } + } + }, + [ + _vm._t("beforeCalendarHeader"), + _vm._v(" "), + _c("header", [ + _c( + "span", + { + staticClass: "prev", + class: { disabled: _vm.isLeftNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.nextDecade() : _vm.previousDecade(); + } + } + }, + [_vm._v("<")] + ), + _vm._v(" "), + _c("span", [_vm._v(_vm._s(_vm.getPageDecade))]), + _vm._v(" "), + _c( + "span", + { + staticClass: "next", + class: { disabled: _vm.isRightNavDisabled }, + on: { + click: function($event) { + _vm.isRtl ? _vm.previousDecade() : _vm.nextDecade(); + } + } + }, + [_vm._v(">")] + ) + ]), + _vm._v(" "), + _vm._l(_vm.years, function(year) { + return _c( + "span", + { + key: year.timestamp, + staticClass: "cell year", + class: { selected: year.isSelected, disabled: year.isDisabled }, + on: { + click: function($event) { + $event.stopPropagation(); + return _vm.selectYear(year) + } + } + }, + [_vm._v(_vm._s(year.year))] + ) + }) + ], + 2 + ) + }; + var __vue_staticRenderFns__$3 = []; + __vue_render__$3._withStripped = true; + + /* style */ + const __vue_inject_styles__$3 = undefined; + /* scoped */ + const __vue_scope_id__$3 = undefined; + /* module identifier */ + const __vue_module_identifier__$3 = undefined; + /* functional template */ + const __vue_is_functional_template__$3 = false; + /* style inject */ + + /* style inject SSR */ + + + + var PickerYear = normalizeComponent_1( + { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, + __vue_inject_styles__$3, + __vue_script__$3, + __vue_scope_id__$3, + __vue_is_functional_template__$3, + __vue_module_identifier__$3, + undefined, + undefined + ); + + // + var script$4 = { + components: { + DateInput: DateInput, + PickerDay: PickerDay, + PickerMonth: PickerMonth, + PickerYear: PickerYear + }, + props: { + value: { + validator: function validator(val) { + return utils$1.validateDateInput(val); + } + }, + name: String, + refName: String, + id: String, + format: { + type: [String, Function], + "default": 'dd MMM yyyy' + }, + language: { + type: Object, + "default": function _default() { + return en; + } + }, + openDate: { + validator: function validator(val) { + return utils$1.validateDateInput(val); + } + }, + dayCellContent: Function, + fullMonthName: Boolean, + disabledDates: Object, + highlighted: Object, + placeholder: String, + inline: Boolean, + calendarClass: [String, Object, Array], + inputClass: [String, Object, Array], + wrapperClass: [String, Object, Array], + mondayFirst: Boolean, + clearButton: Boolean, + clearButtonLabel: String, + clearButtonClass: String, + calendarButton: Boolean, + calendarButtonIcon: String, + calendarButtonIconContent: String, + bootstrapStyling: Boolean, + initialView: String, + disabled: Boolean, + required: Boolean, + typeable: Boolean, + useUtc: Boolean, + minimumView: { + type: String, + "default": 'day' + }, + maximumView: { + type: String, + "default": 'year' + } + }, + data: function data() { + var startDate = this.openDate ? new Date(this.openDate) : new Date(); + var constructedDateUtils = makeDateUtils(this.useUtc); + var pageTimestamp = constructedDateUtils.setDate(startDate, 1); + return { + /* + * Vue cannot observe changes to a Date Object so date must be stored as a timestamp + * This represents the first day of the current viewing month + * {Number} + */ + pageTimestamp: pageTimestamp, + + /* + * Selected Date + * {Date} + */ + selectedDate: null, + + /* + * Flags to show calendar views + * {Boolean} + */ + showDayView: false, + showMonthView: false, + showYearView: false, + + /* + * Positioning + */ + calendarHeight: 0, + resetTypedDate: new Date(), + utils: constructedDateUtils + }; + }, + watch: { + value: function value(_value) { + this.setValue(_value); + }, + openDate: function openDate() { + this.setPageDate(); + }, + initialView: function initialView() { + this.setInitialView(); + } + }, + computed: { + computedInitialView: function computedInitialView() { + if (!this.initialView) { + return this.minimumView; + } + + return this.initialView; + }, + pageDate: function pageDate() { + return new Date(this.pageTimestamp); + }, + translation: function translation() { + return this.language; + }, + calendarStyle: function calendarStyle() { + return { + position: this.isInline ? 'static' : undefined + }; + }, + isOpen: function isOpen() { + return this.showDayView || this.showMonthView || this.showYearView; + }, + isInline: function isInline() { + return !!this.inline; + }, + isRtl: function isRtl() { + return this.translation.rtl === true; + } + }, + methods: { + /** + * Called in the event that the user navigates to date pages and + * closes the picker without selecting a date. + */ + resetDefaultPageDate: function resetDefaultPageDate() { + if (this.selectedDate === null) { + this.setPageDate(); + return; + } + + this.setPageDate(this.selectedDate); + }, + + /** + * Effectively a toggle to show/hide the calendar + * @return {mixed} + */ + showCalendar: function showCalendar() { + if (this.disabled || this.isInline) { + return false; + } + + if (this.isOpen) { + return this.close(true); + } + + this.setInitialView(); + }, + + /** + * Sets the initial picker page view: day, month or year + */ + setInitialView: function setInitialView() { + var initialView = this.computedInitialView; + + if (!this.allowedToShowView(initialView)) { + throw new Error("initialView '".concat(this.initialView, "' cannot be rendered based on minimum '").concat(this.minimumView, "' and maximum '").concat(this.maximumView, "'")); + } + + switch (initialView) { + case 'year': + this.showYearCalendar(); + break; + + case 'month': + this.showMonthCalendar(); + break; + + default: + this.showDayCalendar(); + break; + } + }, + + /** + * Are we allowed to show a specific picker view? + * @param {String} view + * @return {Boolean} + */ + allowedToShowView: function allowedToShowView(view) { + var views = ['day', 'month', 'year']; + var minimumViewIndex = views.indexOf(this.minimumView); + var maximumViewIndex = views.indexOf(this.maximumView); + var viewIndex = views.indexOf(view); + return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex; + }, + + /** + * Show the day picker + * @return {Boolean} + */ + showDayCalendar: function showDayCalendar() { + if (!this.allowedToShowView('day')) { + return false; + } + + this.close(); + this.showDayView = true; + return true; + }, + + /** + * Show the month picker + * @return {Boolean} + */ + showMonthCalendar: function showMonthCalendar() { + if (!this.allowedToShowView('month')) { + return false; + } + + this.close(); + this.showMonthView = true; + return true; + }, + + /** + * Show the year picker + * @return {Boolean} + */ + showYearCalendar: function showYearCalendar() { + if (!this.allowedToShowView('year')) { + return false; + } + + this.close(); + this.showYearView = true; + return true; + }, + + /** + * Set the selected date + * @param {Number} timestamp + */ + setDate: function setDate(timestamp) { + var date = new Date(timestamp); + this.selectedDate = date; + this.setPageDate(date); + this.$emit('selected', date); + this.$emit('input', date); + }, + + /** + * Clear the selected date + */ + clearDate: function clearDate() { + this.selectedDate = null; + this.setPageDate(); + this.$emit('selected', null); + this.$emit('input', null); + this.$emit('cleared'); + }, + + /** + * @param {Object} date + */ + selectDate: function selectDate(date) { + this.setDate(date.timestamp); + + if (!this.isInline) { + this.close(true); + } + + this.resetTypedDate = new Date(); + }, + + /** + * @param {Object} date + */ + selectDisabledDate: function selectDisabledDate(date) { + this.$emit('selectedDisabled', date); + }, + + /** + * @param {Object} month + */ + selectMonth: function selectMonth(month) { + var date = new Date(month.timestamp); + + if (this.allowedToShowView('day')) { + this.setPageDate(date); + this.$emit('changedMonth', month); + this.showDayCalendar(); + } else { + this.selectDate(month); + } + }, + + /** + * @param {Object} year + */ + selectYear: function selectYear(year) { + var date = new Date(year.timestamp); + + if (this.allowedToShowView('month')) { + this.setPageDate(date); + this.$emit('changedYear', year); + this.showMonthCalendar(); + } else { + this.selectDate(year); + } + }, + + /** + * Set the datepicker value + * @param {Date|String|Number|null} date + */ + setValue: function setValue(date) { + if (typeof date === 'string' || typeof date === 'number') { + var parsed = new Date(date); + date = isNaN(parsed.valueOf()) ? null : parsed; + } + + if (!date) { + this.setPageDate(); + this.selectedDate = null; + return; + } + + this.selectedDate = date; + this.setPageDate(date); + }, + + /** + * Sets the date that the calendar should open on + */ + setPageDate: function setPageDate(date) { + if (!date) { + if (this.openDate) { + date = new Date(this.openDate); + } else { + date = new Date(); + } + } + + this.pageTimestamp = this.utils.setDate(new Date(date), 1); + }, + + /** + * Handles a month change from the day picker + */ + handleChangedMonthFromDayPicker: function handleChangedMonthFromDayPicker(date) { + this.setPageDate(date); + this.$emit('changedMonth', date); + }, + + /** + * Set the date from a typedDate event + */ + setTypedDate: function setTypedDate(date) { + this.setDate(date.getTime()); + }, + + /** + * Close all calendar layers + * @param {Boolean} emitEvent - emit close event + */ + close: function close(emitEvent) { + this.showDayView = this.showMonthView = this.showYearView = false; + + if (!this.isInline) { + if (emitEvent) { + this.$emit('closed'); + } + + document.removeEventListener('click', this.clickOutside, false); + } + }, + + /** + * Initiate the component + */ + init: function init() { + if (this.value) { + this.setValue(this.value); + } + + if (this.isInline) { + this.setInitialView(); + } + } + }, + mounted: function mounted() { + this.init(); + } + } // eslint-disable-next-line + ; + + var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); + function createInjector(context) { + return function (id, style) { + return addStyle(id, style); + }; + } + var HEAD = document.head || document.getElementsByTagName('head')[0]; + var styles = {}; + + function addStyle(id, css) { + var group = isOldIE ? css.media || 'default' : id; + var style = styles[group] || (styles[group] = { + ids: new Set(), + styles: [] + }); + + if (!style.ids.has(id)) { + style.ids.add(id); + var code = css.source; + + if (css.map) { + // https://developer.chrome.com/devtools/docs/javascript-debugging + // this makes source maps inside style tags work properly in Chrome + code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 + + code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; + } + + if (!style.element) { + style.element = document.createElement('style'); + style.element.type = 'text/css'; + if (css.media) style.element.setAttribute('media', css.media); + HEAD.appendChild(style.element); + } + + if ('styleSheet' in style.element) { + style.styles.push(code); + style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); + } else { + var index = style.ids.size - 1; + var textNode = document.createTextNode(code); + var nodes = style.element.childNodes; + if (nodes[index]) style.element.removeChild(nodes[index]); + if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); + } + } + } + + var browser = createInjector; + + /* script */ + const __vue_script__$4 = script$4; + + /* template */ + var __vue_render__$4 = function() { + var _vm = this; + var _h = _vm.$createElement; + var _c = _vm._self._c || _h; + return _c( + "div", + { + staticClass: "vdp-datepicker", + class: [_vm.wrapperClass, _vm.isRtl ? "rtl" : ""] + }, + [ + _c( + "date-input", + { + ref: "dateInput", + attrs: { + selectedDate: _vm.selectedDate, + resetTypedDate: _vm.resetTypedDate, + format: _vm.format, + translation: _vm.translation, + inline: _vm.inline, + id: _vm.id, + name: _vm.name, + refName: _vm.refName, + openDate: _vm.openDate, + placeholder: _vm.placeholder, + inputClass: _vm.inputClass, + typeable: _vm.typeable, + clearButton: _vm.clearButton, + clearButtonLabel: _vm.clearButtonLabel, + clearButtonClass: _vm.clearButtonClass, + calendarButton: _vm.calendarButton, + calendarButtonIcon: _vm.calendarButtonIcon, + calendarButtonIconContent: _vm.calendarButtonIconContent, + disabled: _vm.disabled, + required: _vm.required, + bootstrapStyling: _vm.bootstrapStyling, + "use-utc": _vm.useUtc + }, + on: { + showCalendar: _vm.showCalendar, + closeCalendar: _vm.close, + typedDate: _vm.setTypedDate, + clearDate: _vm.clearDate + } + }, + [_vm._t("afterDateInput", null, { slot: "afterDateInput" })], + 2 + ), + _vm._v(" "), + _vm.allowedToShowView("day") + ? _c( + "picker-day", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showDayView: _vm.showDayView, + fullMonthName: _vm.fullMonthName, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + highlighted: _vm.highlighted, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + pageTimestamp: _vm.pageTimestamp, + isRtl: _vm.isRtl, + mondayFirst: _vm.mondayFirst, + dayCellContent: _vm.dayCellContent, + "use-utc": _vm.useUtc + }, + on: { + changedMonth: _vm.handleChangedMonthFromDayPicker, + selectDate: _vm.selectDate, + showMonthCalendar: _vm.showMonthCalendar, + selectedDisabled: _vm.selectDisabledDate + } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e(), + _vm._v(" "), + _vm.allowedToShowView("month") + ? _c( + "picker-month", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showMonthView: _vm.showMonthView, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + isRtl: _vm.isRtl, + "use-utc": _vm.useUtc + }, + on: { + selectMonth: _vm.selectMonth, + showYearCalendar: _vm.showYearCalendar, + changedYear: _vm.setPageDate + } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e(), + _vm._v(" "), + _vm.allowedToShowView("year") + ? _c( + "picker-year", + { + attrs: { + pageDate: _vm.pageDate, + selectedDate: _vm.selectedDate, + showYearView: _vm.showYearView, + allowedToShowView: _vm.allowedToShowView, + disabledDates: _vm.disabledDates, + calendarClass: _vm.calendarClass, + calendarStyle: _vm.calendarStyle, + translation: _vm.translation, + isRtl: _vm.isRtl, + "use-utc": _vm.useUtc + }, + on: { selectYear: _vm.selectYear, changedDecade: _vm.setPageDate } + }, + [ + _vm._t("beforeCalendarHeader", null, { + slot: "beforeCalendarHeader" + }) + ], + 2 + ) + : _vm._e() + ], + 1 + ) + }; + var __vue_staticRenderFns__$4 = []; + __vue_render__$4._withStripped = true; + + /* style */ + const __vue_inject_styles__$4 = function (inject) { + if (!inject) return + inject("data-v-e02edcec_0", { source: ".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n", map: {"version":3,"sources":["Datepicker.vue"],"names":[],"mappings":"AAAA;EACE,cAAc;AAChB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,sBAAsB;AACxB;AACA;EACE,cAAc;EACd,iBAAiB;AACnB;AACA;EACE,qBAAqB;EACrB,kBAAkB;EAClB,yBAAyB;EACzB,WAAW;AACb;AACA;;EAEE,0BAA0B;EAC1B,WAAW;EACX,qBAAqB;EACrB,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,4CAA4C;EAC5C,6BAA6B;AAC/B;AACA;EACE,6BAA6B;EAC7B,iBAAiB;AACnB;AACA;EACE,6BAA6B;AAC/B;AACA;EACE,4BAA4B;EAC5B,gBAAgB;AAClB;AACA;EACE,4BAA4B;AAC9B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,gBAAgB;AAClB;AACA;EACE,WAAW;EACX,eAAe;AACjB;AACA;EACE,aAAa;EACb,cAAc;EACd,eAAe;AACjB;AACA;EACE,qBAAqB;EACrB,cAAc;EACd,0BAA0B;EAC1B,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,sBAAsB;EACtB,6BAA6B;AAC/B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,sBAAsB;AACxB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;AAChB;AACA;EACE,WAAW;AACb;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;EACd,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,mBAAmB;AACrB;AACA;;EAEE,cAAc;AAChB;AACA;;EAEE,eAAe;EACf,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,eAAe;AACjB","file":"Datepicker.vue","sourcesContent":[".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n"]}, media: undefined }); + + }; + /* scoped */ + const __vue_scope_id__$4 = undefined; + /* module identifier */ + const __vue_module_identifier__$4 = undefined; + /* functional template */ + const __vue_is_functional_template__$4 = false; + /* style inject SSR */ + + + + var Datepicker = normalizeComponent_1( + { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, + __vue_inject_styles__$4, + __vue_script__$4, + __vue_scope_id__$4, + __vue_is_functional_template__$4, + __vue_module_identifier__$4, + browser, + undefined + ); + + return Datepicker; + +})); diff --git a/dist/vuejs-datepicker.min.js b/dist/vuejs-datepicker.min.js new file mode 100644 index 00000000..a501fa9d --- /dev/null +++ b/dist/vuejs-datepicker.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).vuejsDatepicker=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t){for(var a=0;a0?this.utils.getDay(t)-1:6:this.utils.getDay(t)},days:function(){for(var e=this.pageDate,t=[],a=this.useUtc?new Date(Date.UTC(e.getUTCFullYear(),e.getUTCMonth(),1)):new Date(e.getFullYear(),e.getMonth(),1,e.getHours(),e.getMinutes()),i=this.utils.daysInMonth(this.utils.getFullYear(a),this.utils.getMonth(a)),n=0;n=this.utils.getMonth(e)&&this.utils.getFullYear(this.disabledDates.to)>=this.utils.getFullYear(e)},nextMonth:function(){this.isNextMonthDisabled()||this.changeMonth(1)},isNextMonthDisabled:function(){if(!this.disabledDates||!this.disabledDates.from)return!1;var e=this.pageDate;return this.utils.getMonth(this.disabledDates.from)<=this.utils.getMonth(e)&&this.utils.getFullYear(this.disabledDates.from)<=this.utils.getFullYear(e)},isSelectedDate:function(e){return this.selectedDate&&this.utils.compareDates(this.selectedDate,e)},isDisabledDate:function(e){var t=this,a=!1;return void 0!==this.disabledDates&&(void 0!==this.disabledDates.dates&&this.disabledDates.dates.forEach(function(i){if(t.utils.compareDates(e,i))return a=!0,!0}),void 0!==this.disabledDates.to&&this.disabledDates.to&&ethis.disabledDates.from&&(a=!0),void 0!==this.disabledDates.ranges&&this.disabledDates.ranges.forEach(function(t){if(void 0!==t.from&&t.from&&void 0!==t.to&&t.to&&et.from)return a=!0,!0}),void 0!==this.disabledDates.days&&-1!==this.disabledDates.days.indexOf(this.utils.getDay(e))&&(a=!0),void 0!==this.disabledDates.daysOfMonth&&-1!==this.disabledDates.daysOfMonth.indexOf(this.utils.getDate(e))&&(a=!0),"function"==typeof this.disabledDates.customPredictor&&this.disabledDates.customPredictor(e)&&(a=!0),a)},isHighlightedDate:function(e){var t=this;if((!this.highlighted||!this.highlighted.includeDisabled)&&this.isDisabledDate(e))return!1;var a=!1;return void 0!==this.highlighted&&(void 0!==this.highlighted.dates&&this.highlighted.dates.forEach(function(i){if(t.utils.compareDates(e,i))return a=!0,!0}),this.isDefined(this.highlighted.from)&&this.isDefined(this.highlighted.to)&&(a=e>=this.highlighted.from&&e<=this.highlighted.to),void 0!==this.highlighted.days&&-1!==this.highlighted.days.indexOf(this.utils.getDay(e))&&(a=!0),void 0!==this.highlighted.daysOfMonth&&-1!==this.highlighted.daysOfMonth.indexOf(this.utils.getDate(e))&&(a=!0),"function"==typeof this.highlighted.customPredictor&&this.highlighted.customPredictor(e)&&(a=!0),a)},dayClasses:function(e){return{selected:e.isSelected,disabled:e.isDisabled,highlighted:e.isHighlighted,today:e.isToday,weekend:e.isWeekend,sat:e.isSaturday,sun:e.isSunday,"highlight-start":e.isHighlightStart,"highlight-end":e.isHighlightEnd}},isHighlightStart:function(e){return this.isHighlightedDate(e)&&this.highlighted.from instanceof Date&&this.utils.getFullYear(this.highlighted.from)===this.utils.getFullYear(e)&&this.utils.getMonth(this.highlighted.from)===this.utils.getMonth(e)&&this.utils.getDate(this.highlighted.from)===this.utils.getDate(e)},isHighlightEnd:function(e){return this.isHighlightedDate(e)&&this.highlighted.to instanceof Date&&this.utils.getFullYear(this.highlighted.to)===this.utils.getFullYear(e)&&this.utils.getMonth(this.highlighted.to)===this.utils.getMonth(e)&&this.utils.getDate(this.highlighted.to)===this.utils.getDate(e)},isDefined:function(e){return void 0!==e&&e}}};var p=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{directives:[{name:"show",rawName:"v-show",value:e.showDayView,expression:"showDayView"}],class:[e.calendarClass,"vdp-datepicker__calendar"],style:e.calendarStyle,on:{mousedown:function(e){e.preventDefault()}}},[e._t("beforeCalendarHeader"),e._v(" "),a("header",[a("span",{staticClass:"prev",class:{disabled:e.isLeftNavDisabled},on:{click:function(t){e.isRtl?e.nextMonth():e.previousMonth()}}},[e._v("<")]),e._v(" "),a("span",{staticClass:"day__month_btn",class:e.allowedToShowView("month")?"up":"",on:{click:e.showMonthCalendar}},[e._v(e._s(e.isYmd?e.currYearName:e.currMonthName)+" "+e._s(e.isYmd?e.currMonthName:e.currYearName))]),e._v(" "),a("span",{staticClass:"next",class:{disabled:e.isRightNavDisabled},on:{click:function(t){e.isRtl?e.previousMonth():e.nextMonth()}}},[e._v(">")])]),e._v(" "),a("div",{class:e.isRtl?"flex-rtl":""},[e._l(e.daysOfWeek,function(t){return a("span",{key:t.timestamp,staticClass:"cell day-header"},[e._v(e._s(t))])}),e._v(" "),e.blankDays>0?e._l(e.blankDays,function(e){return a("span",{key:e.timestamp,staticClass:"cell day blank"})}):e._e(),e._l(e.days,function(t){return a("span",{key:t.timestamp,staticClass:"cell day",class:e.dayClasses(t),domProps:{innerHTML:e._s(e.dayCellContent(t))},on:{click:function(a){return e.selectDate(t)}}})})],2)],2)};p._withStripped=!0;var g=d({render:p,staticRenderFns:[]},void 0,u,void 0,!1,void 0,void 0,void 0);const f={props:{showMonthView:Boolean,selectedDate:Date,pageDate:Date,pageTimestamp:Number,disabledDates:Object,calendarClass:[String,Object,Array],calendarStyle:Object,translation:Object,isRtl:Boolean,allowedToShowView:Function,useUtc:Boolean},data:function(){return{utils:r(this.useUtc)}},computed:{months:function(){for(var e=this.pageDate,t=[],a=this.useUtc?new Date(Date.UTC(e.getUTCFullYear(),0,e.getUTCDate())):new Date(e.getFullYear(),0,e.getDate(),e.getHours(),e.getMinutes()),i=0;i<12;i++)t.push({month:this.utils.getMonthName(i,this.translation.months),timestamp:a.getTime(),isSelected:this.isSelectedMonth(a),isDisabled:this.isDisabledMonth(a)}),this.utils.setMonth(a,this.utils.getMonth(a)+1);return t},pageYearName:function(){var e=this.translation.yearSuffix;return"".concat(this.utils.getFullYear(this.pageDate)).concat(e)},isLeftNavDisabled:function(){return this.isRtl?this.isNextYearDisabled(this.pageTimestamp):this.isPreviousYearDisabled(this.pageTimestamp)},isRightNavDisabled:function(){return this.isRtl?this.isPreviousYearDisabled(this.pageTimestamp):this.isNextYearDisabled(this.pageTimestamp)}},methods:{selectMonth:function(e){if(e.isDisabled)return!1;this.$emit("selectMonth",e)},changeYear:function(e){var t=this.pageDate;this.utils.setFullYear(t,this.utils.getFullYear(t)+e),this.$emit("changedYear",t)},previousYear:function(){this.isPreviousYearDisabled()||this.changeYear(-1)},isPreviousYearDisabled:function(){return!(!this.disabledDates||!this.disabledDates.to)&&this.utils.getFullYear(this.disabledDates.to)>=this.utils.getFullYear(this.pageDate)},nextYear:function(){this.isNextYearDisabled()||this.changeYear(1)},isNextYearDisabled:function(){return!(!this.disabledDates||!this.disabledDates.from)&&this.utils.getFullYear(this.disabledDates.from)<=this.utils.getFullYear(this.pageDate)},showYearCalendar:function(){this.$emit("showYearCalendar")},isSelectedMonth:function(e){return this.selectedDate&&this.utils.getFullYear(this.selectedDate)===this.utils.getFullYear(e)&&this.utils.getMonth(this.selectedDate)===this.utils.getMonth(e)},isDisabledMonth:function(e){var t=!1;return void 0!==this.disabledDates&&(void 0!==this.disabledDates.to&&this.disabledDates.to&&(this.utils.getMonth(e)this.utils.getMonth(this.disabledDates.from)&&this.utils.getFullYear(e)>=this.utils.getFullYear(this.disabledDates.from)||this.utils.getFullYear(e)>this.utils.getFullYear(this.disabledDates.from))&&(t=!0),"function"==typeof this.disabledDates.customPredictor&&this.disabledDates.customPredictor(e)&&(t=!0),t)}}};var D=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{directives:[{name:"show",rawName:"v-show",value:e.showMonthView,expression:"showMonthView"}],class:[e.calendarClass,"vdp-datepicker__calendar"],style:e.calendarStyle,on:{mousedown:function(e){e.preventDefault()}}},[e._t("beforeCalendarHeader"),e._v(" "),a("header",[a("span",{staticClass:"prev",class:{disabled:e.isLeftNavDisabled},on:{click:function(t){e.isRtl?e.nextYear():e.previousYear()}}},[e._v("<")]),e._v(" "),a("span",{staticClass:"month__year_btn",class:e.allowedToShowView("year")?"up":"",on:{click:e.showYearCalendar}},[e._v(e._s(e.pageYearName))]),e._v(" "),a("span",{staticClass:"next",class:{disabled:e.isRightNavDisabled},on:{click:function(t){e.isRtl?e.previousYear():e.nextYear()}}},[e._v(">")])]),e._v(" "),e._l(e.months,function(t){return a("span",{key:t.timestamp,staticClass:"cell month",class:{selected:t.isSelected,disabled:t.isDisabled},on:{click:function(a){return a.stopPropagation(),e.selectMonth(t)}}},[e._v(e._s(t.month))])})],2)};D._withStripped=!0;var b=d({render:D,staticRenderFns:[]},void 0,f,void 0,!1,void 0,void 0,void 0);const m={props:{showYearView:Boolean,selectedDate:Date,pageDate:Date,pageTimestamp:Number,disabledDates:Object,highlighted:Object,calendarClass:[String,Object,Array],calendarStyle:Object,translation:Object,isRtl:Boolean,allowedToShowView:Function,useUtc:Boolean},computed:{years:function(){for(var e=this.pageDate,t=[],a=this.useUtc?new Date(Date.UTC(10*Math.floor(e.getUTCFullYear()/10),e.getUTCMonth(),e.getUTCDate())):new Date(10*Math.floor(e.getFullYear()/10),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes()),i=0;i<10;i++)t.push({year:this.utils.getFullYear(a),timestamp:a.getTime(),isSelected:this.isSelectedYear(a),isDisabled:this.isDisabledYear(a)}),this.utils.setFullYear(a,this.utils.getFullYear(a)+1);return t},getPageDecade:function(){var e=10*Math.floor(this.utils.getFullYear(this.pageDate)/10),t=e+9,a=this.translation.yearSuffix;return"".concat(e," - ").concat(t).concat(a)},isLeftNavDisabled:function(){return this.isRtl?this.isNextDecadeDisabled(this.pageTimestamp):this.isPreviousDecadeDisabled(this.pageTimestamp)},isRightNavDisabled:function(){return this.isRtl?this.isPreviousDecadeDisabled(this.pageTimestamp):this.isNextDecadeDisabled(this.pageTimestamp)}},data:function(){return{utils:r(this.useUtc)}},methods:{selectYear:function(e){if(e.isDisabled)return!1;this.$emit("selectYear",e)},changeYear:function(e){var t=this.pageDate;this.utils.setFullYear(t,this.utils.getFullYear(t)+e),this.$emit("changedDecade",t)},previousDecade:function(){if(this.isPreviousDecadeDisabled())return!1;this.changeYear(-10)},isPreviousDecadeDisabled:function(){return!(!this.disabledDates||!this.disabledDates.to)&&this.utils.getFullYear(this.disabledDates.to)>10*Math.floor(this.utils.getFullYear(this.pageDate)/10)-1},nextDecade:function(){if(this.isNextDecadeDisabled())return!1;this.changeYear(10)},isNextDecadeDisabled:function(){return!(!this.disabledDates||!this.disabledDates.from)&&this.utils.getFullYear(this.disabledDates.from)<10*Math.ceil(this.utils.getFullYear(this.pageDate)/10)},isSelectedYear:function(e){return this.selectedDate&&this.utils.getFullYear(this.selectedDate)===this.utils.getFullYear(e)},isDisabledYear:function(e){var t=!1;return!(void 0===this.disabledDates||!this.disabledDates)&&(void 0!==this.disabledDates.to&&this.disabledDates.to&&this.utils.getFullYear(e)this.utils.getFullYear(this.disabledDates.from)&&(t=!0),"function"==typeof this.disabledDates.customPredictor&&this.disabledDates.customPredictor(e)&&(t=!0),t)}}};var A=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{directives:[{name:"show",rawName:"v-show",value:e.showYearView,expression:"showYearView"}],class:[e.calendarClass,"vdp-datepicker__calendar"],style:e.calendarStyle,on:{mousedown:function(e){e.preventDefault()}}},[e._t("beforeCalendarHeader"),e._v(" "),a("header",[a("span",{staticClass:"prev",class:{disabled:e.isLeftNavDisabled},on:{click:function(t){e.isRtl?e.nextDecade():e.previousDecade()}}},[e._v("<")]),e._v(" "),a("span",[e._v(e._s(e.getPageDecade))]),e._v(" "),a("span",{staticClass:"next",class:{disabled:e.isRightNavDisabled},on:{click:function(t){e.isRtl?e.previousDecade():e.nextDecade()}}},[e._v(">")])]),e._v(" "),e._l(e.years,function(t){return a("span",{key:t.timestamp,staticClass:"cell year",class:{selected:t.isSelected,disabled:t.isDisabled},on:{click:function(a){return a.stopPropagation(),e.selectYear(t)}}},[e._v(e._s(t.year))])})],2)};A._withStripped=!0;var v={components:{DateInput:c,PickerDay:g,PickerMonth:b,PickerYear:d({render:A,staticRenderFns:[]},void 0,m,void 0,!1,void 0,void 0,void 0)},props:{value:{validator:function(e){return l.validateDateInput(e)}},name:String,refName:String,id:String,format:{type:[String,Function],default:"dd MMM yyyy"},language:{type:Object,default:function(){return n}},openDate:{validator:function(e){return l.validateDateInput(e)}},dayCellContent:Function,fullMonthName:Boolean,disabledDates:Object,highlighted:Object,placeholder:String,inline:Boolean,calendarClass:[String,Object,Array],inputClass:[String,Object,Array],wrapperClass:[String,Object,Array],mondayFirst:Boolean,clearButton:Boolean,clearButtonLabel:String,clearButtonClass:String,calendarButton:Boolean,calendarButtonIcon:String,calendarButtonIconContent:String,bootstrapStyling:Boolean,initialView:String,disabled:Boolean,required:Boolean,typeable:Boolean,useUtc:Boolean,minimumView:{type:String,default:"day"},maximumView:{type:String,default:"year"}},data:function(){var e=this.openDate?new Date(this.openDate):new Date,t=r(this.useUtc);return{pageTimestamp:t.setDate(e,1),selectedDate:null,showDayView:!1,showMonthView:!1,showYearView:!1,calendarHeight:0,resetTypedDate:new Date,utils:t}},watch:{value:function(e){this.setValue(e)},openDate:function(){this.setPageDate()},initialView:function(){this.setInitialView()}},computed:{computedInitialView:function(){return this.initialView?this.initialView:this.minimumView},pageDate:function(){return new Date(this.pageTimestamp)},translation:function(){return this.language},calendarStyle:function(){return{position:this.isInline?"static":void 0}},isOpen:function(){return this.showDayView||this.showMonthView||this.showYearView},isInline:function(){return!!this.inline},isRtl:function(){return!0===this.translation.rtl}},methods:{resetDefaultPageDate:function(){null!==this.selectedDate?this.setPageDate(this.selectedDate):this.setPageDate()},showCalendar:function(){return!this.disabled&&!this.isInline&&(this.isOpen?this.close(!0):void this.setInitialView())},setInitialView:function(){var e=this.computedInitialView;if(!this.allowedToShowView(e))throw new Error("initialView '".concat(this.initialView,"' cannot be rendered based on minimum '").concat(this.minimumView,"' and maximum '").concat(this.maximumView,"'"));switch(e){case"year":this.showYearCalendar();break;case"month":this.showMonthCalendar();break;default:this.showDayCalendar()}},allowedToShowView:function(e){var t=["day","month","year"],a=t.indexOf(this.minimumView),i=t.indexOf(this.maximumView),n=t.indexOf(e);return n>=a&&n<=i},showDayCalendar:function(){return!!this.allowedToShowView("day")&&(this.close(),this.showDayView=!0,!0)},showMonthCalendar:function(){return!!this.allowedToShowView("month")&&(this.close(),this.showMonthView=!0,!0)},showYearCalendar:function(){return!!this.allowedToShowView("year")&&(this.close(),this.showYearView=!0,!0)},setDate:function(e){var t=new Date(e);this.selectedDate=t,this.setPageDate(t),this.$emit("selected",t),this.$emit("input",t)},clearDate:function(){this.selectedDate=null,this.setPageDate(),this.$emit("selected",null),this.$emit("input",null),this.$emit("cleared")},selectDate:function(e){this.setDate(e.timestamp),this.isInline||this.close(!0),this.resetTypedDate=new Date},selectDisabledDate:function(e){this.$emit("selectedDisabled",e)},selectMonth:function(e){var t=new Date(e.timestamp);this.allowedToShowView("day")?(this.setPageDate(t),this.$emit("changedMonth",e),this.showDayCalendar()):this.selectDate(e)},selectYear:function(e){var t=new Date(e.timestamp);this.allowedToShowView("month")?(this.setPageDate(t),this.$emit("changedYear",e),this.showMonthCalendar()):this.selectDate(e)},setValue:function(e){if("string"==typeof e||"number"==typeof e){var t=new Date(e);e=isNaN(t.valueOf())?null:t}if(!e)return this.setPageDate(),void(this.selectedDate=null);this.selectedDate=e,this.setPageDate(e)},setPageDate:function(e){e||(e=this.openDate?new Date(this.openDate):new Date),this.pageTimestamp=this.utils.setDate(new Date(e),1)},handleChangedMonthFromDayPicker:function(e){this.setPageDate(e),this.$emit("changedMonth",e)},setTypedDate:function(e){this.setDate(e.getTime())},close:function(e){this.showDayView=this.showMonthView=this.showYearView=!1,this.isInline||(e&&this.$emit("closed"),document.removeEventListener("click",this.clickOutside,!1))},init:function(){this.value&&this.setValue(this.value),this.isInline&&this.setInitialView()}},mounted:function(){this.init()}},y="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var _=document.head||document.getElementsByTagName("head")[0],C={};var w=function(e){return function(e,t){return function(e,t){var a=y?t.media||"default":e,i=C[a]||(C[a]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),_.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var s=i.ids.size-1,r=document.createTextNode(n),l=i.element.childNodes;l[s]&&i.element.removeChild(l[s]),l.length?i.element.insertBefore(r,l[s]):i.element.appendChild(r)}}}(e,t)}};const k=v;var B=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"vdp-datepicker",class:[e.wrapperClass,e.isRtl?"rtl":""]},[a("date-input",{ref:"dateInput",attrs:{selectedDate:e.selectedDate,resetTypedDate:e.resetTypedDate,format:e.format,translation:e.translation,inline:e.inline,id:e.id,name:e.name,refName:e.refName,openDate:e.openDate,placeholder:e.placeholder,inputClass:e.inputClass,typeable:e.typeable,clearButton:e.clearButton,clearButtonLabel:e.clearButtonLabel,clearButtonClass:e.clearButtonClass,calendarButton:e.calendarButton,calendarButtonIcon:e.calendarButtonIcon,calendarButtonIconContent:e.calendarButtonIconContent,disabled:e.disabled,required:e.required,bootstrapStyling:e.bootstrapStyling,"use-utc":e.useUtc},on:{showCalendar:e.showCalendar,closeCalendar:e.close,typedDate:e.setTypedDate,clearDate:e.clearDate}},[e._t("afterDateInput",null,{slot:"afterDateInput"})],2),e._v(" "),e.allowedToShowView("day")?a("picker-day",{attrs:{pageDate:e.pageDate,selectedDate:e.selectedDate,showDayView:e.showDayView,fullMonthName:e.fullMonthName,allowedToShowView:e.allowedToShowView,disabledDates:e.disabledDates,highlighted:e.highlighted,calendarClass:e.calendarClass,calendarStyle:e.calendarStyle,translation:e.translation,pageTimestamp:e.pageTimestamp,isRtl:e.isRtl,mondayFirst:e.mondayFirst,dayCellContent:e.dayCellContent,"use-utc":e.useUtc},on:{changedMonth:e.handleChangedMonthFromDayPicker,selectDate:e.selectDate,showMonthCalendar:e.showMonthCalendar,selectedDisabled:e.selectDisabledDate}},[e._t("beforeCalendarHeader",null,{slot:"beforeCalendarHeader"})],2):e._e(),e._v(" "),e.allowedToShowView("month")?a("picker-month",{attrs:{pageDate:e.pageDate,selectedDate:e.selectedDate,showMonthView:e.showMonthView,allowedToShowView:e.allowedToShowView,disabledDates:e.disabledDates,calendarClass:e.calendarClass,calendarStyle:e.calendarStyle,translation:e.translation,isRtl:e.isRtl,"use-utc":e.useUtc},on:{selectMonth:e.selectMonth,showYearCalendar:e.showYearCalendar,changedYear:e.setPageDate}},[e._t("beforeCalendarHeader",null,{slot:"beforeCalendarHeader"})],2):e._e(),e._v(" "),e.allowedToShowView("year")?a("picker-year",{attrs:{pageDate:e.pageDate,selectedDate:e.selectedDate,showYearView:e.showYearView,allowedToShowView:e.allowedToShowView,disabledDates:e.disabledDates,calendarClass:e.calendarClass,calendarStyle:e.calendarStyle,translation:e.translation,isRtl:e.isRtl,"use-utc":e.useUtc},on:{selectYear:e.selectYear,changedDecade:e.setPageDate}},[e._t("beforeCalendarHeader",null,{slot:"beforeCalendarHeader"})],2):e._e()],1)};B._withStripped=!0;return d({render:B,staticRenderFns:[]},function(e){e&&e("data-v-e02edcec_0",{source:".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n",map:{version:3,sources:["Datepicker.vue"],names:[],mappings:"AAAA;EACE,cAAc;AAChB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,sBAAsB;AACxB;AACA;EACE,cAAc;EACd,iBAAiB;AACnB;AACA;EACE,qBAAqB;EACrB,kBAAkB;EAClB,yBAAyB;EACzB,WAAW;AACb;AACA;;EAEE,0BAA0B;EAC1B,WAAW;EACX,qBAAqB;EACrB,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,4CAA4C;EAC5C,6BAA6B;AAC/B;AACA;EACE,6BAA6B;EAC7B,iBAAiB;AACnB;AACA;EACE,6BAA6B;AAC/B;AACA;EACE,4BAA4B;EAC5B,gBAAgB;AAClB;AACA;EACE,4BAA4B;AAC9B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,gBAAgB;AAClB;AACA;EACE,WAAW;EACX,eAAe;AACjB;AACA;EACE,aAAa;EACb,cAAc;EACd,eAAe;AACjB;AACA;EACE,qBAAqB;EACrB,cAAc;EACd,0BAA0B;EAC1B,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,sBAAsB;EACtB,6BAA6B;AAC/B;AACA;;;EAGE,eAAe;AACjB;AACA;;;EAGE,sBAAsB;AACxB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;AAChB;AACA;EACE,WAAW;AACb;AACA;EACE,mBAAmB;AACrB;AACA;EACE,cAAc;EACd,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,mBAAmB;AACrB;AACA;;EAEE,cAAc;AAChB;AACA;;EAEE,eAAe;EACf,kBAAkB;AACpB;AACA;;EAEE,WAAW;EACX,eAAe;AACjB",file:"Datepicker.vue",sourcesContent:[".rtl {\n direction: rtl;\n}\n.vdp-datepicker {\n position: relative;\n text-align: left;\n}\n.vdp-datepicker * {\n box-sizing: border-box;\n}\n.vdp-datepicker__calendar {\n position: absolute;\n z-index: 100;\n background: #fff;\n width: 300px;\n border: 1px solid #ccc;\n}\n.vdp-datepicker__calendar header {\n display: block;\n line-height: 40px;\n}\n.vdp-datepicker__calendar header span {\n display: inline-block;\n text-align: center;\n width: 71.42857142857143%;\n float: left;\n}\n.vdp-datepicker__calendar header .prev,\n.vdp-datepicker__calendar header .next {\n width: 14.285714285714286%;\n float: left;\n text-indent: -10000px;\n position: relative;\n}\n.vdp-datepicker__calendar header .prev:after,\n.vdp-datepicker__calendar header .next:after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n border: 6px solid transparent;\n}\n.vdp-datepicker__calendar header .prev:after {\n border-right: 10px solid #000;\n margin-left: -5px;\n}\n.vdp-datepicker__calendar header .prev.disabled:after {\n border-right: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .next:after {\n border-left: 10px solid #000;\n margin-left: 5px;\n}\n.vdp-datepicker__calendar header .next.disabled:after {\n border-left: 10px solid #ddd;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled),\n.vdp-datepicker__calendar header .next:not(.disabled),\n.vdp-datepicker__calendar header .up:not(.disabled) {\n cursor: pointer;\n}\n.vdp-datepicker__calendar header .prev:not(.disabled):hover,\n.vdp-datepicker__calendar header .next:not(.disabled):hover,\n.vdp-datepicker__calendar header .up:not(.disabled):hover {\n background: #eee;\n}\n.vdp-datepicker__calendar .disabled {\n color: #ddd;\n cursor: default;\n}\n.vdp-datepicker__calendar .flex-rtl {\n display: flex;\n width: inherit;\n flex-wrap: wrap;\n}\n.vdp-datepicker__calendar .cell {\n display: inline-block;\n padding: 0 5px;\n width: 14.285714285714286%;\n height: 40px;\n line-height: 40px;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {\n cursor: pointer;\n}\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,\n.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {\n border: 1px solid #4bd;\n}\n.vdp-datepicker__calendar .cell.selected {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected:hover {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.selected.highlighted {\n background: #4bd;\n}\n.vdp-datepicker__calendar .cell.highlighted {\n background: #cae5ed;\n}\n.vdp-datepicker__calendar .cell.highlighted.disabled {\n color: #a3a3a3;\n}\n.vdp-datepicker__calendar .cell.grey {\n color: #888;\n}\n.vdp-datepicker__calendar .cell.grey:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header {\n font-size: 75%;\n white-space: nowrap;\n cursor: inherit;\n}\n.vdp-datepicker__calendar .cell.day-header:hover {\n background: inherit;\n}\n.vdp-datepicker__calendar .month,\n.vdp-datepicker__calendar .year {\n width: 33.333%;\n}\n.vdp-datepicker__clear-button,\n.vdp-datepicker__calendar-button {\n cursor: pointer;\n font-style: normal;\n}\n.vdp-datepicker__clear-button.disabled,\n.vdp-datepicker__calendar-button.disabled {\n color: #999;\n cursor: default;\n}\n"]},media:void 0})},k,void 0,!1,void 0,w,void 0)}); diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue index 843e1d94..c8cdd666 100644 --- a/src/components/DateInput.vue +++ b/src/components/DateInput.vue @@ -1,41 +1,37 @@