First upload
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
import { getEventTarget } from "../../utils/dom";
|
||||
const defaultConfig = {
|
||||
confirmIcon: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='17' height='17' viewBox='0 0 17 17'> <g> </g> <path d='M15.418 1.774l-8.833 13.485-4.918-4.386 0.666-0.746 4.051 3.614 8.198-12.515 0.836 0.548z' fill='#000000' /> </svg>",
|
||||
confirmText: "OK ",
|
||||
showAlways: false,
|
||||
theme: "light",
|
||||
};
|
||||
function confirmDatePlugin(pluginConfig) {
|
||||
const config = Object.assign(Object.assign({}, defaultConfig), pluginConfig);
|
||||
let confirmContainer;
|
||||
const confirmButtonCSSClass = "flatpickr-confirm";
|
||||
return function (fp) {
|
||||
if (fp.config.noCalendar || fp.isMobile)
|
||||
return {};
|
||||
return Object.assign({ onKeyDown(_, __, ___, e) {
|
||||
const eventTarget = getEventTarget(e);
|
||||
if (fp.config.enableTime &&
|
||||
e.key === "Tab" &&
|
||||
eventTarget === fp.amPM) {
|
||||
e.preventDefault();
|
||||
confirmContainer.focus();
|
||||
}
|
||||
else if (e.key === "Enter" && eventTarget === confirmContainer)
|
||||
fp.close();
|
||||
},
|
||||
onReady() {
|
||||
confirmContainer = fp._createElement("div", `${confirmButtonCSSClass} ${config.showAlways ? "visible" : ""} ${config.theme}Theme`, config.confirmText);
|
||||
confirmContainer.tabIndex = -1;
|
||||
confirmContainer.innerHTML += config.confirmIcon;
|
||||
confirmContainer.addEventListener("click", fp.close);
|
||||
fp.calendarContainer.appendChild(confirmContainer);
|
||||
fp.loadedPlugins.push("confirmDate");
|
||||
} }, (!config.showAlways
|
||||
? {
|
||||
onChange: function (_, dateStr) {
|
||||
const showCondition = fp.config.enableTime ||
|
||||
fp.config.mode === "multiple" ||
|
||||
fp.loadedPlugins.indexOf("monthSelect") !== -1;
|
||||
const localConfirmContainer = fp.calendarContainer.querySelector(`.${confirmButtonCSSClass}`);
|
||||
if (!localConfirmContainer)
|
||||
return;
|
||||
if (dateStr &&
|
||||
!fp.config.inline &&
|
||||
showCondition &&
|
||||
localConfirmContainer)
|
||||
return localConfirmContainer.classList.add("visible");
|
||||
localConfirmContainer.classList.remove("visible");
|
||||
},
|
||||
}
|
||||
: {}));
|
||||
};
|
||||
}
|
||||
export default confirmDatePlugin;
|
||||
@@ -0,0 +1,22 @@
|
||||
function labelPlugin() {
|
||||
return function (fp) {
|
||||
return {
|
||||
onReady() {
|
||||
const id = fp.input.id;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
if (fp.mobileInput) {
|
||||
fp.input.removeAttribute("id");
|
||||
fp.mobileInput.id = id;
|
||||
}
|
||||
else if (fp.altInput) {
|
||||
fp.input.removeAttribute("id");
|
||||
fp.altInput.id = id;
|
||||
}
|
||||
fp.loadedPlugins.push("labelPlugin");
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
export default labelPlugin;
|
||||
@@ -0,0 +1,64 @@
|
||||
import { compareDates, compareTimes, createDateFormatter, } from "../utils/dates";
|
||||
function minMaxTimePlugin(config = {}) {
|
||||
const state = {
|
||||
formatDate: createDateFormatter({}),
|
||||
tableDateFormat: config.tableDateFormat || "Y-m-d",
|
||||
defaults: {
|
||||
minTime: undefined,
|
||||
maxTime: undefined,
|
||||
},
|
||||
};
|
||||
function findDateTimeLimit(date) {
|
||||
if (config.table !== undefined) {
|
||||
return config.table[state.formatDate(date, state.tableDateFormat)];
|
||||
}
|
||||
return config.getTimeLimits && config.getTimeLimits(date);
|
||||
}
|
||||
return function (fp) {
|
||||
return {
|
||||
onReady() {
|
||||
state.formatDate = this.formatDate;
|
||||
state.defaults = {
|
||||
minTime: this.config.minTime && state.formatDate(this.config.minTime, "H:i"),
|
||||
maxTime: this.config.maxTime && state.formatDate(this.config.maxTime, "H:i"),
|
||||
};
|
||||
fp.loadedPlugins.push("minMaxTime");
|
||||
},
|
||||
onChange() {
|
||||
const latest = this.latestSelectedDateObj;
|
||||
const matchingTimeLimit = latest && findDateTimeLimit(latest);
|
||||
if (latest && matchingTimeLimit !== undefined) {
|
||||
this.set(matchingTimeLimit);
|
||||
fp.config.minTime.setFullYear(latest.getFullYear());
|
||||
fp.config.maxTime.setFullYear(latest.getFullYear());
|
||||
fp.config.minTime.setMonth(latest.getMonth());
|
||||
fp.config.maxTime.setMonth(latest.getMonth());
|
||||
fp.config.minTime.setDate(latest.getDate());
|
||||
fp.config.maxTime.setDate(latest.getDate());
|
||||
if (compareDates(latest, fp.config.maxTime, false) > 0) {
|
||||
fp.setDate(new Date(latest.getTime()).setHours(fp.config.maxTime.getHours(), fp.config.maxTime.getMinutes(), fp.config.maxTime.getSeconds(), fp.config.maxTime.getMilliseconds()), false);
|
||||
}
|
||||
else if (compareDates(latest, fp.config.minTime, false) < 0)
|
||||
fp.setDate(new Date(latest.getTime()).setHours(fp.config.minTime.getHours(), fp.config.minTime.getMinutes(), fp.config.minTime.getSeconds(), fp.config.minTime.getMilliseconds()), false);
|
||||
}
|
||||
else {
|
||||
const newMinMax = state.defaults || {
|
||||
minTime: undefined,
|
||||
maxTime: undefined,
|
||||
};
|
||||
this.set(newMinMax);
|
||||
if (!latest)
|
||||
return;
|
||||
const { minTime, maxTime } = fp.config;
|
||||
if (minTime && compareTimes(latest, minTime) < 0) {
|
||||
fp.setDate(new Date(latest.getTime()).setHours(minTime.getHours(), minTime.getMinutes(), minTime.getSeconds(), minTime.getMilliseconds()), false);
|
||||
}
|
||||
else if (maxTime && compareTimes(latest, maxTime) > 0) {
|
||||
fp.setDate(new Date(latest.getTime()).setHours(maxTime.getHours(), maxTime.getMinutes(), maxTime.getSeconds(), maxTime.getMilliseconds()));
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
export default minMaxTimePlugin;
|
||||
@@ -0,0 +1,43 @@
|
||||
import { getEventTarget } from "../utils/dom";
|
||||
function momentPlugin(config) {
|
||||
const moment = config.moment;
|
||||
return function (fp) {
|
||||
function captureIncrement(e) {
|
||||
const event = e;
|
||||
event.stopPropagation();
|
||||
const date = moment(fp.selectedDates[0]);
|
||||
const input = getEventTarget(event);
|
||||
const unit = Array.from(input.classList)
|
||||
.filter((name) => name.startsWith("flatpickr-"))
|
||||
.map((name) => name.substring(10))[0];
|
||||
const step = parseFloat(input.getAttribute("step"));
|
||||
date.add(step * event.delta, unit);
|
||||
fp.setDate(date.toDate());
|
||||
}
|
||||
return {
|
||||
parseDate: (datestr, format) => {
|
||||
return moment(datestr, format, true).toDate();
|
||||
},
|
||||
formatDate: (date, format) => {
|
||||
const momentDate = moment(date);
|
||||
if (typeof fp.config.locale === "string") {
|
||||
momentDate.locale(fp.config.locale);
|
||||
}
|
||||
return momentDate.format(format);
|
||||
},
|
||||
onReady() {
|
||||
[fp.hourElement, fp.minuteElement, fp.secondElement].forEach((element) => element &&
|
||||
element.addEventListener("increment", captureIncrement, {
|
||||
capture: true,
|
||||
}));
|
||||
},
|
||||
onDestroy() {
|
||||
[fp.hourElement, fp.minuteElement, fp.secondElement].forEach((element) => element &&
|
||||
element.removeEventListener("increment", captureIncrement, {
|
||||
capture: true,
|
||||
}));
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
export default momentPlugin;
|
||||
@@ -0,0 +1,179 @@
|
||||
import { monthToStr } from "../../utils/formatting";
|
||||
import { getEventTarget } from "../../utils/dom";
|
||||
const defaultConfig = {
|
||||
shorthand: false,
|
||||
dateFormat: "F Y",
|
||||
altFormat: "F Y",
|
||||
theme: "light",
|
||||
};
|
||||
function monthSelectPlugin(pluginConfig) {
|
||||
const config = Object.assign(Object.assign({}, defaultConfig), pluginConfig);
|
||||
return (fp) => {
|
||||
fp.config.dateFormat = config.dateFormat;
|
||||
fp.config.altFormat = config.altFormat;
|
||||
const self = { monthsContainer: null };
|
||||
function clearUnnecessaryDOMElements() {
|
||||
if (!fp.rContainer || !fp.daysContainer || !fp.weekdayContainer)
|
||||
return;
|
||||
fp.rContainer.removeChild(fp.daysContainer);
|
||||
fp.rContainer.removeChild(fp.weekdayContainer);
|
||||
for (let index = 0; index < fp.monthElements.length; index++) {
|
||||
const element = fp.monthElements[index];
|
||||
if (!element.parentNode)
|
||||
continue;
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
}
|
||||
function addListeners() {
|
||||
fp._bind(fp.prevMonthNav, "click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
fp.changeYear(fp.currentYear - 1);
|
||||
selectYear();
|
||||
});
|
||||
fp._bind(fp.nextMonthNav, "click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
fp.changeYear(fp.currentYear + 1);
|
||||
selectYear();
|
||||
});
|
||||
}
|
||||
function addMonths() {
|
||||
if (!fp.rContainer)
|
||||
return;
|
||||
self.monthsContainer = fp._createElement("div", "flatpickr-monthSelect-months");
|
||||
self.monthsContainer.tabIndex = -1;
|
||||
fp.calendarContainer.classList.add(`flatpickr-monthSelect-theme-${config.theme}`);
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const month = fp._createElement("span", "flatpickr-monthSelect-month");
|
||||
month.dateObj = new Date(fp.currentYear, i);
|
||||
month.$i = i;
|
||||
month.textContent = monthToStr(i, config.shorthand, fp.l10n);
|
||||
month.tabIndex = -1;
|
||||
month.addEventListener("click", selectMonth);
|
||||
self.monthsContainer.appendChild(month);
|
||||
if ((fp.config.minDate && month.dateObj < fp.config.minDate) ||
|
||||
(fp.config.maxDate && month.dateObj > fp.config.maxDate)) {
|
||||
month.classList.add("disabled");
|
||||
}
|
||||
}
|
||||
fp.rContainer.appendChild(self.monthsContainer);
|
||||
}
|
||||
function setCurrentlySelected() {
|
||||
if (!fp.rContainer)
|
||||
return;
|
||||
const currentlySelected = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month.selected");
|
||||
for (let index = 0; index < currentlySelected.length; index++) {
|
||||
currentlySelected[index].classList.remove("selected");
|
||||
}
|
||||
const targetMonth = (fp.selectedDates[0] || new Date()).getMonth();
|
||||
const month = fp.rContainer.querySelector(`.flatpickr-monthSelect-month:nth-child(${targetMonth + 1})`);
|
||||
if (month) {
|
||||
month.classList.add("selected");
|
||||
}
|
||||
}
|
||||
function selectYear() {
|
||||
let 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();
|
||||
}
|
||||
fp.currentYearElement.value = String(fp.currentYear);
|
||||
if (fp.rContainer) {
|
||||
const months = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month");
|
||||
months.forEach((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("disabled");
|
||||
}
|
||||
else {
|
||||
month.classList.remove("disabled");
|
||||
}
|
||||
});
|
||||
}
|
||||
setCurrentlySelected();
|
||||
}
|
||||
function selectMonth(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const eventTarget = getEventTarget(e);
|
||||
if (eventTarget instanceof Element &&
|
||||
!eventTarget.classList.contains("disabled")) {
|
||||
setMonth(eventTarget.dateObj);
|
||||
fp.close();
|
||||
}
|
||||
}
|
||||
function setMonth(date) {
|
||||
const selectedDate = new Date(date);
|
||||
selectedDate.setFullYear(fp.currentYear);
|
||||
fp.setDate(selectedDate, true);
|
||||
setCurrentlySelected();
|
||||
}
|
||||
const shifts = {
|
||||
37: -1,
|
||||
39: 1,
|
||||
40: 3,
|
||||
38: -3,
|
||||
};
|
||||
function onKeyDown(_, __, ___, e) {
|
||||
const shouldMove = shifts[e.keyCode] !== undefined;
|
||||
if (!shouldMove && e.keyCode !== 13) {
|
||||
return;
|
||||
}
|
||||
if (!fp.rContainer || !self.monthsContainer)
|
||||
return;
|
||||
const currentlySelected = fp.rContainer.querySelector(".flatpickr-monthSelect-month.selected");
|
||||
let index = Array.prototype.indexOf.call(self.monthsContainer.children, document.activeElement);
|
||||
if (index === -1) {
|
||||
const target = currentlySelected || self.monthsContainer.firstElementChild;
|
||||
target.focus();
|
||||
index = target.$i;
|
||||
}
|
||||
if (shouldMove) {
|
||||
self.monthsContainer.children[(12 + index + shifts[e.keyCode]) % 12].focus();
|
||||
}
|
||||
else if (e.keyCode === 13 &&
|
||||
self.monthsContainer.contains(document.activeElement)) {
|
||||
setMonth(document.activeElement.dateObj);
|
||||
}
|
||||
}
|
||||
function destroyPluginInstance() {
|
||||
if (self.monthsContainer !== null) {
|
||||
const months = self.monthsContainer.querySelectorAll(".flatpickr-monthSelect-month");
|
||||
for (let index = 0; index < months.length; index++) {
|
||||
months[index].removeEventListener("click", selectMonth);
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
onParseConfig() {
|
||||
fp.config.mode = "single";
|
||||
fp.config.enableTime = false;
|
||||
},
|
||||
onValueUpdate: setCurrentlySelected,
|
||||
onKeyDown,
|
||||
onReady: [
|
||||
() => {
|
||||
fp.currentMonth = 0;
|
||||
},
|
||||
clearUnnecessaryDOMElements,
|
||||
addListeners,
|
||||
addMonths,
|
||||
setCurrentlySelected,
|
||||
() => {
|
||||
fp.loadedPlugins.push("monthSelect");
|
||||
},
|
||||
],
|
||||
onDestroy: destroyPluginInstance,
|
||||
};
|
||||
};
|
||||
}
|
||||
export default monthSelectPlugin;
|
||||
@@ -0,0 +1,141 @@
|
||||
function rangePlugin(config = {}) {
|
||||
return function (fp) {
|
||||
let dateFormat = "", secondInput, _secondInputFocused, _prevDates;
|
||||
const createSecondInput = () => {
|
||||
if (config.input) {
|
||||
secondInput =
|
||||
config.input instanceof Element
|
||||
? config.input
|
||||
: window.document.querySelector(config.input);
|
||||
if (!secondInput) {
|
||||
fp.config.errorHandler(new Error("Invalid input element specified"));
|
||||
return;
|
||||
}
|
||||
if (fp.config.wrap) {
|
||||
secondInput = secondInput.querySelector("[data-input]");
|
||||
}
|
||||
}
|
||||
else {
|
||||
secondInput = fp._input.cloneNode();
|
||||
secondInput.removeAttribute("id");
|
||||
secondInput._flatpickr = undefined;
|
||||
}
|
||||
if (secondInput.value) {
|
||||
const parsedDate = fp.parseDate(secondInput.value);
|
||||
if (parsedDate)
|
||||
fp.selectedDates.push(parsedDate);
|
||||
}
|
||||
secondInput.setAttribute("data-fp-omit", "");
|
||||
if (fp.config.clickOpens) {
|
||||
fp._bind(secondInput, ["focus", "click"], () => {
|
||||
if (fp.selectedDates[1]) {
|
||||
fp.latestSelectedDateObj = fp.selectedDates[1];
|
||||
fp._setHoursFromDate(fp.selectedDates[1]);
|
||||
fp.jumpToDate(fp.selectedDates[1]);
|
||||
}
|
||||
_secondInputFocused = true;
|
||||
fp.isOpen = false;
|
||||
fp.open(undefined, config.position === "left" ? fp._input : secondInput);
|
||||
});
|
||||
fp._bind(fp._input, ["focus", "click"], (e) => {
|
||||
e.preventDefault();
|
||||
fp.isOpen = false;
|
||||
fp.open();
|
||||
});
|
||||
}
|
||||
if (fp.config.allowInput)
|
||||
fp._bind(secondInput, "keydown", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
fp.setDate([fp.selectedDates[0], secondInput.value], true, dateFormat);
|
||||
secondInput.click();
|
||||
}
|
||||
});
|
||||
if (!config.input)
|
||||
fp._input.parentNode &&
|
||||
fp._input.parentNode.insertBefore(secondInput, fp._input.nextSibling);
|
||||
};
|
||||
const plugin = {
|
||||
onParseConfig() {
|
||||
fp.config.mode = "range";
|
||||
dateFormat = fp.config.altInput
|
||||
? fp.config.altFormat
|
||||
: fp.config.dateFormat;
|
||||
},
|
||||
onReady() {
|
||||
createSecondInput();
|
||||
fp.config.ignoredFocusElements.push(secondInput);
|
||||
if (fp.config.allowInput) {
|
||||
fp._input.removeAttribute("readonly");
|
||||
secondInput.removeAttribute("readonly");
|
||||
}
|
||||
else {
|
||||
secondInput.setAttribute("readonly", "readonly");
|
||||
}
|
||||
fp._bind(fp._input, "focus", () => {
|
||||
fp.latestSelectedDateObj = fp.selectedDates[0];
|
||||
fp._setHoursFromDate(fp.selectedDates[0]);
|
||||
_secondInputFocused = false;
|
||||
fp.jumpToDate(fp.selectedDates[0]);
|
||||
});
|
||||
if (fp.config.allowInput)
|
||||
fp._bind(fp._input, "keydown", (e) => {
|
||||
if (e.key === "Enter")
|
||||
fp.setDate([fp._input.value, fp.selectedDates[1]], true, dateFormat);
|
||||
});
|
||||
fp.setDate(fp.selectedDates, false);
|
||||
plugin.onValueUpdate(fp.selectedDates);
|
||||
fp.loadedPlugins.push("range");
|
||||
},
|
||||
onPreCalendarPosition() {
|
||||
if (_secondInputFocused) {
|
||||
fp._positionElement = secondInput;
|
||||
setTimeout(() => {
|
||||
fp._positionElement = fp._input;
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
onChange() {
|
||||
if (!fp.selectedDates.length) {
|
||||
setTimeout(() => {
|
||||
if (fp.selectedDates.length)
|
||||
return;
|
||||
secondInput.value = "";
|
||||
_prevDates = [];
|
||||
}, 10);
|
||||
}
|
||||
if (_secondInputFocused) {
|
||||
setTimeout(() => {
|
||||
secondInput.focus();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
onDestroy() {
|
||||
if (!config.input)
|
||||
secondInput.parentNode &&
|
||||
secondInput.parentNode.removeChild(secondInput);
|
||||
},
|
||||
onValueUpdate(selDates) {
|
||||
if (!secondInput)
|
||||
return;
|
||||
_prevDates =
|
||||
!_prevDates || selDates.length >= _prevDates.length
|
||||
? [...selDates]
|
||||
: _prevDates;
|
||||
if (_prevDates.length > selDates.length) {
|
||||
const newSelectedDate = selDates[0];
|
||||
const newDates = _secondInputFocused
|
||||
? [_prevDates[0], newSelectedDate]
|
||||
: [newSelectedDate, _prevDates[1]];
|
||||
fp.setDate(newDates, false);
|
||||
_prevDates = [...newDates];
|
||||
}
|
||||
[
|
||||
fp._input.value = "",
|
||||
secondInput.value = "",
|
||||
] = fp.selectedDates.map((d) => fp.formatDate(d, dateFormat));
|
||||
},
|
||||
};
|
||||
return plugin;
|
||||
};
|
||||
}
|
||||
export default rangePlugin;
|
||||
@@ -0,0 +1,56 @@
|
||||
import { getEventTarget } from "../utils/dom";
|
||||
if (typeof window.CustomEvent !== "function") {
|
||||
function CustomEvent(typeArg, eventInitDict) {
|
||||
eventInitDict = eventInitDict || {
|
||||
bubbles: false,
|
||||
cancelable: false,
|
||||
detail: undefined,
|
||||
};
|
||||
const evt = document.createEvent("CustomEvent");
|
||||
evt.initCustomEvent(typeArg, eventInitDict.bubbles, eventInitDict.cancelable, eventInitDict.detail);
|
||||
return evt;
|
||||
}
|
||||
CustomEvent.prototype = window.Event.prototype;
|
||||
window.CustomEvent = CustomEvent;
|
||||
}
|
||||
function delta(e) {
|
||||
return Math.max(-1, Math.min(1, e.wheelDelta || -e.deltaY));
|
||||
}
|
||||
const scroll = (e) => {
|
||||
e.preventDefault();
|
||||
const ev = new CustomEvent("increment", {
|
||||
bubbles: true,
|
||||
});
|
||||
ev.delta = delta(e);
|
||||
getEventTarget(e).dispatchEvent(ev);
|
||||
};
|
||||
function scrollMonth(fp) {
|
||||
return (e) => {
|
||||
e.preventDefault();
|
||||
const mDelta = delta(e);
|
||||
fp.changeMonth(mDelta);
|
||||
};
|
||||
}
|
||||
function scrollPlugin() {
|
||||
return function (fp) {
|
||||
const monthScroller = scrollMonth(fp);
|
||||
return {
|
||||
onReady() {
|
||||
if (fp.timeContainer) {
|
||||
fp.timeContainer.addEventListener("wheel", scroll);
|
||||
}
|
||||
fp.yearElements.forEach((yearElem) => yearElem.addEventListener("wheel", scroll));
|
||||
fp.monthElements.forEach((monthElem) => monthElem.addEventListener("wheel", monthScroller));
|
||||
fp.loadedPlugins.push("scroll");
|
||||
},
|
||||
onDestroy() {
|
||||
if (fp.timeContainer) {
|
||||
fp.timeContainer.removeEventListener("wheel", scroll);
|
||||
}
|
||||
fp.yearElements.forEach((yearElem) => yearElem.removeEventListener("wheel", scroll));
|
||||
fp.monthElements.forEach((monthElem) => monthElem.removeEventListener("wheel", monthScroller));
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
export default scrollPlugin;
|
||||
@@ -0,0 +1,78 @@
|
||||
import { getEventTarget } from "../../utils/dom";
|
||||
function weekSelectPlugin() {
|
||||
return function (fp) {
|
||||
function onDayHover(event) {
|
||||
const day = getEventTarget(event);
|
||||
if (!day.classList.contains("flatpickr-day"))
|
||||
return;
|
||||
const days = fp.days.childNodes;
|
||||
const dayIndex = day.$i;
|
||||
const dayIndSeven = dayIndex / 7;
|
||||
const weekStartDay = days[7 * Math.floor(dayIndSeven)]
|
||||
.dateObj;
|
||||
const weekEndDay = days[7 * Math.ceil(dayIndSeven + 0.01) - 1].dateObj;
|
||||
for (let i = days.length; i--;) {
|
||||
const day = days[i];
|
||||
const date = day.dateObj;
|
||||
if (date > weekEndDay || date < weekStartDay)
|
||||
day.classList.remove("inRange");
|
||||
else
|
||||
day.classList.add("inRange");
|
||||
}
|
||||
}
|
||||
function highlightWeek() {
|
||||
const selDate = fp.latestSelectedDateObj;
|
||||
if (selDate !== undefined &&
|
||||
selDate.getMonth() === fp.currentMonth &&
|
||||
selDate.getFullYear() === fp.currentYear) {
|
||||
fp.weekStartDay = fp.days.childNodes[7 * Math.floor(fp.selectedDateElem.$i / 7)].dateObj;
|
||||
fp.weekEndDay = fp.days.childNodes[7 * Math.ceil(fp.selectedDateElem.$i / 7 + 0.01) - 1].dateObj;
|
||||
}
|
||||
const days = fp.days.childNodes;
|
||||
for (let i = days.length; i--;) {
|
||||
const date = days[i].dateObj;
|
||||
if (date >= fp.weekStartDay && date <= fp.weekEndDay)
|
||||
days[i].classList.add("week", "selected");
|
||||
}
|
||||
}
|
||||
function clearHover() {
|
||||
const days = fp.days.childNodes;
|
||||
for (let i = days.length; i--;)
|
||||
days[i].classList.remove("inRange");
|
||||
}
|
||||
function onReady() {
|
||||
if (fp.daysContainer !== undefined)
|
||||
fp.daysContainer.addEventListener("mouseover", onDayHover);
|
||||
}
|
||||
function onDestroy() {
|
||||
if (fp.daysContainer !== undefined)
|
||||
fp.daysContainer.removeEventListener("mouseover", onDayHover);
|
||||
}
|
||||
return {
|
||||
onValueUpdate: highlightWeek,
|
||||
onMonthChange: highlightWeek,
|
||||
onYearChange: highlightWeek,
|
||||
onOpen: highlightWeek,
|
||||
onClose: clearHover,
|
||||
onParseConfig: function () {
|
||||
fp.config.mode = "single";
|
||||
fp.config.enableTime = false;
|
||||
fp.config.dateFormat = fp.config.dateFormat
|
||||
? fp.config.dateFormat
|
||||
: "\\W\\e\\e\\k #W, Y";
|
||||
fp.config.altFormat = fp.config.altFormat
|
||||
? fp.config.altFormat
|
||||
: "\\W\\e\\e\\k #W, Y";
|
||||
},
|
||||
onReady: [
|
||||
onReady,
|
||||
highlightWeek,
|
||||
() => {
|
||||
fp.loadedPlugins.push("weekSelect");
|
||||
},
|
||||
],
|
||||
onDestroy,
|
||||
};
|
||||
};
|
||||
}
|
||||
export default weekSelectPlugin;
|
||||
Reference in New Issue
Block a user