54 lines
2.6 KiB
JavaScript
54 lines
2.6 KiB
JavaScript
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;
|