flatpickr_plus
Version:
A lightweight, powerful javascript datetime picker with additional locale year support and year dropdown
357 lines (356 loc) • 15.3 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import { monthToStr } from "../../utils/formatting";
import { clearNode, getEventTarget } from "../../utils/dom";
var defaultConfig = {
shorthand: false,
dateFormat: "F Y",
altFormat: "F Y",
theme: "light",
};
function monthSelectPlugin(pluginConfig) {
var config = __assign(__assign({}, defaultConfig), pluginConfig);
return function (fp) {
fp.config.dateFormat = config.dateFormat;
fp.config.altFormat = config.altFormat;
var self = { monthsContainer: null };
function clearUnnecessaryDOMElements() {
if (!fp.rContainer)
return;
clearNode(fp.rContainer);
for (var index = 0; index < fp.monthElements.length; index++) {
var element = fp.monthElements[index];
if (!element.parentNode)
continue;
element.parentNode.removeChild(element);
}
}
function build() {
if (!fp.rContainer)
return;
self.monthsContainer = fp._createElement("div", "flatpickr-monthSelect-months");
self.monthsContainer.tabIndex = -1;
buildMonths();
fp.rContainer.appendChild(self.monthsContainer);
}
function buildMonths() {
if (!self.monthsContainer)
return;
clearNode(self.monthsContainer);
var frag = document.createDocumentFragment();
for (var i = 0; i < 12; i++) {
var month = fp.createDay("flatpickr-day", new Date(fp.currentYear, i), 0, i);
if (month.dateObj.getMonth() === new Date().getMonth() &&
month.dateObj.getFullYear() === new Date().getFullYear())
month.classList.add("today");
month.textContent = monthToStr(i, config.shorthand, fp.l10n);
month.addEventListener("click", selectMonth);
frag.appendChild(month);
}
self.monthsContainer.appendChild(frag);
if (fp.config.minDate &&
fp.currentYear === fp.config.minDate.getFullYear())
fp.prevMonthNav.classList.add("flatpickr-disabled");
else
fp.prevMonthNav.classList.remove("flatpickr-disabled");
if (fp.config.maxDate &&
fp.currentYear === fp.config.maxDate.getFullYear())
fp.nextMonthNav.classList.add("flatpickr-disabled");
else
fp.nextMonthNav.classList.remove("flatpickr-disabled");
if (!!fp.yearSelect) {
var year = void 0;
if (fp.config.useLocaleYear) {
year = fp.currentYear + fp.l10n.localeYearAdjustment;
}
else {
year = fp.currentYear;
}
fp.yearSelect.value = String(year);
}
}
function bindEvents() {
fp._bind(fp.prevMonthNav, "click", function (e) {
e.preventDefault();
e.stopPropagation();
fp.changeYear(fp.currentYear - 1);
selectYear();
buildMonths();
});
fp._bind(fp.nextMonthNav, "click", function (e) {
e.preventDefault();
e.stopPropagation();
fp.changeYear(fp.currentYear + 1);
selectYear();
buildMonths();
});
fp._bind(self.monthsContainer, "mouseover", function (e) {
if (fp.config.mode === "range")
fp.onMouseOver(getEventTarget(e), "flatpickr-day");
});
if (!!fp.yearSelect) {
fp._bind(fp.yearSelect, "change", function () {
selectYear();
buildMonths();
});
}
}
function setCurrentlySelected() {
if (!fp.rContainer)
return;
if (!fp.selectedDates.length) {
var selectedMonth = fp.rContainer.querySelector(".flatpickr-day.selected");
if (selectedMonth) {
selectedMonth.classList.remove("selected");
}
return;
}
var currentlySelected = fp.rContainer.querySelectorAll(".flatpickr-day.selected");
for (var index = 0; index < currentlySelected.length; index++) {
currentlySelected[index].classList.remove("selected");
}
for (var i = 0; i < fp.selectedDates.length; i++) {
var targetMonth = fp.selectedDates[i].getMonth();
var month = fp.rContainer.querySelector(".flatpickr-day:nth-child(" + (targetMonth + 1) + ")");
if (month) {
var isSameDate = month.dateObj.getFullYear() === fp.selectedDates[i].getFullYear() &&
month.dateObj.getMonth() === fp.selectedDates[i].getMonth();
if (isSameDate) {
month.classList.add("selected");
}
}
}
}
function selectYear() {
var selectedDate = fp.selectedDates[0];
if (selectedDate) {
selectedDate = new Date(selectedDate);
selectedDate.setFullYear(fp.currentYear);
if (fp.config.minDate && selectedDate < fp.config.minDate) {
selectedDate = fp.config.minDate;
}
if (fp.config.maxDate && selectedDate > fp.config.maxDate) {
selectedDate = fp.config.maxDate;
}
fp.currentYear = selectedDate.getFullYear();
}
if (fp.config.useLocaleYear) {
fp.currentYearElement.value = String(fp.currentYear + fp.l10n.localeYearAdjustment);
}
else {
fp.currentYearElement.value = String(fp.currentYear);
}
if (fp.rContainer) {
var months = fp.rContainer.querySelectorAll(".flatpickr-day");
months.forEach(function (month) {
month.dateObj.setFullYear(fp.currentYear);
if ((fp.config.minDate && month.dateObj < fp.config.minDate) ||
(fp.config.maxDate && month.dateObj > fp.config.maxDate)) {
month.classList.add("flatpickr-disabled");
}
else {
month.classList.remove("flatpickr-disabled");
}
});
}
setCurrentlySelected();
}
function selectMonth(e) {
e.preventDefault();
e.stopPropagation();
var eventTarget = getEventTarget(e);
if (!(eventTarget instanceof Element))
return;
if (eventTarget.classList.contains("flatpickr-disabled"))
return;
if (eventTarget.classList.contains("notAllowed"))
return;
var selectDateObj = eventTarget.dateObj;
if (fp.config.mode === "range") {
if (fp.selectedDates.length === 2) {
fp.clear(false, false);
}
setMonth(selectDateObj);
}
else {
if (fp.selectedDates.length > 0) {
var isContain = false;
for (var i = 0; i < fp.selectedDates.length; i++) {
if (fp.selectedDates[i].getMonth() == selectDateObj.getMonth() &&
fp.selectedDates[i].getFullYear() == selectDateObj.getFullYear()) {
isContain = true;
break;
}
}
if (isContain) {
var selectedDate = fp.selectedDates.filter(function (date) {
return date.getMonth() != selectDateObj.getMonth() ||
date.getFullYear() != selectDateObj.getFullYear();
});
fp.setDate(selectedDate, true);
}
else {
setMonth(selectDateObj);
}
}
else {
setMonth(selectDateObj);
}
}
if (fp.config.closeOnSelect) {
var single = fp.config.mode === "single";
var range = fp.config.mode === "range" && fp.selectedDates.length === 2;
if (single || range)
fp.close();
}
}
function setMonth(date) {
var selectedDate = new Date(fp.currentYear, date.getMonth(), date.getDate());
var selectedDates = __spreadArrays(fp.selectedDates);
switch (fp.config.mode) {
case "single":
selectedDates = [selectedDate];
break;
case "multiple":
selectedDates.push(selectedDate);
break;
case "range":
if (fp.selectedDates.length === 2) {
selectedDates = [selectedDate];
}
else {
selectedDates = fp.selectedDates.concat([selectedDate]);
selectedDates.sort(function (a, b) { return a.getTime() - b.getTime(); });
}
break;
}
fp.setDate(selectedDates, true);
setCurrentlySelected();
}
var shifts = {
ArrowLeft: -1,
ArrowRight: 1,
ArrowDown: 3,
ArrowUp: -3,
};
function onKeyDown(_, __, ___, e) {
var shouldMove = shifts[e.key] !== undefined;
if (!shouldMove && e.key !== "Enter") {
return;
}
if (!fp.rContainer || !self.monthsContainer)
return;
var currentlySelected = fp.rContainer.querySelector(".flatpickr-day.selected");
var index = Array.prototype.indexOf.call(self.monthsContainer.children, document.activeElement);
if (index === -1) {
var target = currentlySelected || self.monthsContainer.firstElementChild;
target.focus();
index = target.$i;
}
if (shouldMove) {
if (index + shifts[e.key] > 11) {
fp.changeYear(fp.currentYear + 1);
buildMonths();
}
if (index + shifts[e.key] < 0) {
fp.changeYear(fp.currentYear - 1);
buildMonths();
}
self.monthsContainer.children[(12 + index + shifts[e.key]) % 12].focus();
}
else if (e.key === "Enter" &&
self.monthsContainer.contains(document.activeElement)) {
setMonth(document.activeElement.dateObj);
}
}
function closeHook() {
var _a, _b, _c;
if (((_a = fp.config) === null || _a === void 0 ? void 0 : _a.mode) === "range" && fp.selectedDates.length === 1)
fp.clear(false);
if ((((_b = fp.config) === null || _b === void 0 ? void 0 : _b.mode) === "single" || ((_c = fp.config) === null || _c === void 0 ? void 0 : _c.mode) === "multiple") &&
fp.selectedDates.length === 0)
fp.clear(false, false);
if (!fp.selectedDates.length)
buildMonths();
}
function stubCurrentMonth() {
config._stubbedCurrentMonth = fp._initialDate.getMonth();
fp._initialDate.setMonth(config._stubbedCurrentMonth);
fp.currentMonth = config._stubbedCurrentMonth;
}
function unstubCurrentMonth() {
if (!config._stubbedCurrentMonth)
return;
fp._initialDate.setMonth(config._stubbedCurrentMonth);
fp.currentMonth = config._stubbedCurrentMonth;
delete config._stubbedCurrentMonth;
}
function destroyPluginInstance() {
if (self.monthsContainer !== null) {
var months = self.monthsContainer.querySelectorAll(".flatpickr-day");
for (var index = 0; index < months.length; index++) {
months[index].removeEventListener("click", selectMonth);
}
}
}
function onMonthOpen() {
var _a, _b;
var currentlySelected;
if (!fp.config.defaultDate) {
currentlySelected = (_a = fp.rContainer) === null || _a === void 0 ? void 0 : _a.querySelector(".flatpickr-day.today");
}
else {
currentlySelected = (_b = fp.rContainer) === null || _b === void 0 ? void 0 : _b.querySelector(".flatpickr-day.selected");
}
currentlySelected && currentlySelected.focus();
}
return {
onParseConfig: function () {
fp.config.enableTime = false;
},
onValueUpdate: setCurrentlySelected,
onOpen: [onMonthOpen],
onKeyDown: onKeyDown,
onReady: [
stubCurrentMonth,
clearUnnecessaryDOMElements,
build,
bindEvents,
setCurrentlySelected,
function () {
fp.loadedPlugins.push("monthSelect");
},
],
onChange: [
function () {
selectYear();
buildMonths();
},
],
onDestroy: [
unstubCurrentMonth,
destroyPluginInstance,
function () {
fp.config.onClose = fp.config.onClose.filter(function (hook) { return hook !== closeHook; });
},
],
};
};
}
export default monthSelectPlugin;