v1
This commit is contained in:
s-lnk
@@ -0,0 +1,24 @@
|
||||
.flatpickr-confirm {
|
||||
height: 40px;
|
||||
max-height: 0px;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background: rgba(0,0,0,0.06)
|
||||
}
|
||||
|
||||
.flatpickr-confirm svg path {
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
.flatpickr-confirm.darkTheme {
|
||||
color: white;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.flatpickr-confirm.visible {
|
||||
max-height: 40px;
|
||||
visibility: visible
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.confirmDatePlugin = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var 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) {
|
||||
var config = __assign({}, defaultConfig, pluginConfig);
|
||||
var confirmContainer;
|
||||
var confirmButtonCSSClass = "flatpickr-confirm";
|
||||
return function (fp) {
|
||||
if (fp.config.noCalendar || fp.isMobile)
|
||||
return {};
|
||||
return __assign({ onKeyDown: function (_, __, ___, e) {
|
||||
if (fp.config.enableTime && e.key === "Tab" && e.target === fp.amPM) {
|
||||
e.preventDefault();
|
||||
confirmContainer.focus();
|
||||
}
|
||||
else if (e.key === "Enter" && e.target === confirmContainer)
|
||||
fp.close();
|
||||
},
|
||||
onReady: function () {
|
||||
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) {
|
||||
var showCondition = fp.config.enableTime ||
|
||||
fp.config.mode === "multiple" ||
|
||||
fp.loadedPlugins.indexOf("monthSelect") !== -1;
|
||||
var localConfirmContainer = fp.calendarContainer.querySelector("." + confirmButtonCSSClass);
|
||||
if (!localConfirmContainer)
|
||||
return;
|
||||
if (dateStr &&
|
||||
!fp.config.inline &&
|
||||
showCondition &&
|
||||
localConfirmContainer)
|
||||
return localConfirmContainer.classList.add("visible");
|
||||
localConfirmContainer.classList.remove("visible");
|
||||
}
|
||||
}
|
||||
: {}));
|
||||
};
|
||||
}
|
||||
|
||||
return confirmDatePlugin;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,31 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.labelPlugin = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
function labelPlugin() {
|
||||
return function (fp) {
|
||||
return {
|
||||
onReady: function () {
|
||||
var 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");
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
return labelPlugin;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,326 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.minMaxTimePlugin = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
var pad = function (number) { return ("0" + number).slice(-2); };
|
||||
var int = function (bool) { return (bool === true ? 1 : 0); };
|
||||
|
||||
var monthToStr = function (monthNumber, shorthand, locale) { return locale.months[shorthand ? "shorthand" : "longhand"][monthNumber]; };
|
||||
var formats = {
|
||||
// get the date in UTC
|
||||
Z: function (date) { return date.toISOString(); },
|
||||
// weekday name, short, e.g. Thu
|
||||
D: function (date, locale, options) {
|
||||
return locale.weekdays.shorthand[formats.w(date, locale, options)];
|
||||
},
|
||||
// full month name e.g. January
|
||||
F: function (date, locale, options) {
|
||||
return monthToStr(formats.n(date, locale, options) - 1, false, locale);
|
||||
},
|
||||
// padded hour 1-12
|
||||
G: function (date, locale, options) {
|
||||
return pad(formats.h(date, locale, options));
|
||||
},
|
||||
// hours with leading zero e.g. 03
|
||||
H: function (date) { return pad(date.getHours()); },
|
||||
// day (1-30) with ordinal suffix e.g. 1st, 2nd
|
||||
J: function (date, locale) {
|
||||
return locale.ordinal !== undefined
|
||||
? date.getDate() + locale.ordinal(date.getDate())
|
||||
: date.getDate();
|
||||
},
|
||||
// AM/PM
|
||||
K: function (date, locale) { return locale.amPM[int(date.getHours() > 11)]; },
|
||||
// shorthand month e.g. Jan, Sep, Oct, etc
|
||||
M: function (date, locale) {
|
||||
return monthToStr(date.getMonth(), true, locale);
|
||||
},
|
||||
// seconds 00-59
|
||||
S: function (date) { return pad(date.getSeconds()); },
|
||||
// unix timestamp
|
||||
U: function (date) { return date.getTime() / 1000; },
|
||||
W: function (date, _, options) {
|
||||
return options.getWeek(date);
|
||||
},
|
||||
// full year e.g. 2016
|
||||
Y: function (date) { return date.getFullYear(); },
|
||||
// day in month, padded (01-30)
|
||||
d: function (date) { return pad(date.getDate()); },
|
||||
// hour from 1-12 (am/pm)
|
||||
h: function (date) { return (date.getHours() % 12 ? date.getHours() % 12 : 12); },
|
||||
// minutes, padded with leading zero e.g. 09
|
||||
i: function (date) { return pad(date.getMinutes()); },
|
||||
// day in month (1-30)
|
||||
j: function (date) { return date.getDate(); },
|
||||
// weekday name, full, e.g. Thursday
|
||||
l: function (date, locale) {
|
||||
return locale.weekdays.longhand[date.getDay()];
|
||||
},
|
||||
// padded month number (01-12)
|
||||
m: function (date) { return pad(date.getMonth() + 1); },
|
||||
// the month number (1-12)
|
||||
n: function (date) { return date.getMonth() + 1; },
|
||||
// seconds 0-59
|
||||
s: function (date) { return date.getSeconds(); },
|
||||
// Unix Milliseconds
|
||||
u: function (date) { return date.getTime(); },
|
||||
// number of the day of the week
|
||||
w: function (date) { return date.getDay(); },
|
||||
// last two digits of year e.g. 16 for 2016
|
||||
y: function (date) { return String(date.getFullYear()).substring(2); }
|
||||
};
|
||||
|
||||
var defaults = {
|
||||
_disable: [],
|
||||
_enable: [],
|
||||
allowInput: false,
|
||||
altFormat: "F j, Y",
|
||||
altInput: false,
|
||||
altInputClass: "form-control input",
|
||||
animate: typeof window === "object" &&
|
||||
window.navigator.userAgent.indexOf("MSIE") === -1,
|
||||
ariaDateFormat: "F j, Y",
|
||||
clickOpens: true,
|
||||
closeOnSelect: true,
|
||||
conjunction: ", ",
|
||||
dateFormat: "Y-m-d",
|
||||
defaultHour: 12,
|
||||
defaultMinute: 0,
|
||||
defaultSeconds: 0,
|
||||
disable: [],
|
||||
disableMobile: false,
|
||||
enable: [],
|
||||
enableSeconds: false,
|
||||
enableTime: false,
|
||||
errorHandler: function (err) {
|
||||
return typeof console !== "undefined" && console.warn(err);
|
||||
},
|
||||
getWeek: function (givenDate) {
|
||||
var date = new Date(givenDate.getTime());
|
||||
date.setHours(0, 0, 0, 0);
|
||||
// Thursday in current week decides the year.
|
||||
date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));
|
||||
// January 4 is always in week 1.
|
||||
var week1 = new Date(date.getFullYear(), 0, 4);
|
||||
// Adjust to Thursday in week 1 and count number of weeks from date to week1.
|
||||
return (1 +
|
||||
Math.round(((date.getTime() - week1.getTime()) / 86400000 -
|
||||
3 +
|
||||
((week1.getDay() + 6) % 7)) /
|
||||
7));
|
||||
},
|
||||
hourIncrement: 1,
|
||||
ignoredFocusElements: [],
|
||||
inline: false,
|
||||
locale: "default",
|
||||
minuteIncrement: 5,
|
||||
mode: "single",
|
||||
monthSelectorType: "dropdown",
|
||||
nextArrow: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z' /></svg>",
|
||||
noCalendar: false,
|
||||
now: new Date(),
|
||||
onChange: [],
|
||||
onClose: [],
|
||||
onDayCreate: [],
|
||||
onDestroy: [],
|
||||
onKeyDown: [],
|
||||
onMonthChange: [],
|
||||
onOpen: [],
|
||||
onParseConfig: [],
|
||||
onReady: [],
|
||||
onValueUpdate: [],
|
||||
onYearChange: [],
|
||||
onPreCalendarPosition: [],
|
||||
plugins: [],
|
||||
position: "auto",
|
||||
positionElement: undefined,
|
||||
prevArrow: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z' /></svg>",
|
||||
shorthandCurrentMonth: false,
|
||||
showMonths: 1,
|
||||
static: false,
|
||||
time_24hr: false,
|
||||
weekNumbers: false,
|
||||
wrap: false
|
||||
};
|
||||
|
||||
var english = {
|
||||
weekdays: {
|
||||
shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
longhand: [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
]
|
||||
},
|
||||
months: {
|
||||
shorthand: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
longhand: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
]
|
||||
},
|
||||
daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
firstDayOfWeek: 0,
|
||||
ordinal: function (nth) {
|
||||
var s = nth % 100;
|
||||
if (s > 3 && s < 21)
|
||||
return "th";
|
||||
switch (s % 10) {
|
||||
case 1:
|
||||
return "st";
|
||||
case 2:
|
||||
return "nd";
|
||||
case 3:
|
||||
return "rd";
|
||||
default:
|
||||
return "th";
|
||||
}
|
||||
},
|
||||
rangeSeparator: " to ",
|
||||
weekAbbreviation: "Wk",
|
||||
scrollTitle: "Scroll to increment",
|
||||
toggleTitle: "Click to toggle",
|
||||
amPM: ["AM", "PM"],
|
||||
yearAriaLabel: "Year",
|
||||
hourAriaLabel: "Hour",
|
||||
minuteAriaLabel: "Minute",
|
||||
time_24hr: false
|
||||
};
|
||||
|
||||
var createDateFormatter = function (_a) {
|
||||
var _b = _a.config, config = _b === void 0 ? defaults : _b, _c = _a.l10n, l10n = _c === void 0 ? english : _c;
|
||||
return function (dateObj, frmt, overrideLocale) {
|
||||
var locale = overrideLocale || l10n;
|
||||
if (config.formatDate !== undefined) {
|
||||
return config.formatDate(dateObj, frmt, locale);
|
||||
}
|
||||
return frmt
|
||||
.split("")
|
||||
.map(function (c, i, arr) {
|
||||
return formats[c] && arr[i - 1] !== "\\"
|
||||
? formats[c](dateObj, locale, config)
|
||||
: c !== "\\"
|
||||
? c
|
||||
: "";
|
||||
})
|
||||
.join("");
|
||||
};
|
||||
};
|
||||
/**
|
||||
* Compute the difference in dates, measured in ms
|
||||
*/
|
||||
function compareDates(date1, date2, timeless) {
|
||||
if (timeless === void 0) { timeless = true; }
|
||||
if (timeless !== false) {
|
||||
return (new Date(date1.getTime()).setHours(0, 0, 0, 0) -
|
||||
new Date(date2.getTime()).setHours(0, 0, 0, 0));
|
||||
}
|
||||
return date1.getTime() - date2.getTime();
|
||||
}
|
||||
/**
|
||||
* Compute the difference in times, measured in ms
|
||||
*/
|
||||
function compareTimes(date1, date2) {
|
||||
return (3600 * (date1.getHours() - date2.getHours()) +
|
||||
60 * (date1.getMinutes() - date2.getMinutes()) +
|
||||
date1.getSeconds() -
|
||||
date2.getSeconds());
|
||||
}
|
||||
|
||||
function minMaxTimePlugin(config) {
|
||||
if (config === void 0) { config = {}; }
|
||||
var 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: function () {
|
||||
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: function () {
|
||||
var latest = this.latestSelectedDateObj;
|
||||
var 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 {
|
||||
var newMinMax = state.defaults || {
|
||||
minTime: undefined,
|
||||
maxTime: undefined
|
||||
};
|
||||
this.set(newMinMax);
|
||||
if (!latest)
|
||||
return;
|
||||
var _a = fp.config, minTime = _a.minTime, maxTime = _a.maxTime;
|
||||
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()));
|
||||
}
|
||||
//
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
return minMaxTimePlugin;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,203 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.monthSelectPlugin = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
||||
this file except in compliance with the License. You may obtain a copy of the
|
||||
License at http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
||||
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
||||
MERCHANTABLITY OR NON-INFRINGEMENT.
|
||||
|
||||
See the Apache Version 2.0 License for specific language governing permissions
|
||||
and limitations under the License.
|
||||
***************************************************************************** */
|
||||
|
||||
var __assign = function() {
|
||||
__assign = Object.assign || function __assign(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
|
||||
var monthToStr = function (monthNumber, shorthand, locale) { return locale.months[shorthand ? "shorthand" : "longhand"][monthNumber]; };
|
||||
|
||||
var defaultConfig = {
|
||||
shorthand: false,
|
||||
dateFormat: "F Y",
|
||||
altFormat: "F Y",
|
||||
theme: "light"
|
||||
};
|
||||
function monthSelectPlugin(pluginConfig) {
|
||||
var config = __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 || !fp.daysContainer || !fp.weekdayContainer)
|
||||
return;
|
||||
fp.rContainer.removeChild(fp.daysContainer);
|
||||
fp.rContainer.removeChild(fp.weekdayContainer);
|
||||
for (var index = 0; index < fp.monthElements.length; index++) {
|
||||
var element = fp.monthElements[index];
|
||||
if (!element.parentNode)
|
||||
continue;
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
}
|
||||
function addListeners() {
|
||||
fp._bind(fp.prevMonthNav, "click", function () {
|
||||
fp.currentYear -= 1;
|
||||
selectYear();
|
||||
});
|
||||
fp._bind(fp.nextMonthNav, "mousedown", function () {
|
||||
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 (var i = 0; i < 12; i++) {
|
||||
var 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;
|
||||
var currentlySelected = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month.selected");
|
||||
for (var index = 0; index < currentlySelected.length; index++) {
|
||||
currentlySelected[index].classList.remove("selected");
|
||||
}
|
||||
var month = fp.rContainer.querySelector(".flatpickr-monthSelect-month:nth-child(" + (fp.currentMonth + 1) + ")");
|
||||
if (month) {
|
||||
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();
|
||||
fp.currentYearElement.value = String(fp.currentYear);
|
||||
setCurrentlySelected();
|
||||
}
|
||||
if (fp.rContainer) {
|
||||
var months = fp.rContainer.querySelectorAll(".flatpickr-monthSelect-month");
|
||||
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("disabled");
|
||||
}
|
||||
else {
|
||||
month.classList.remove("disabled");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
function selectMonth(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.target instanceof Element && !e.target.classList.contains("disabled")) {
|
||||
setMonth(e.target.dateObj);
|
||||
fp.close();
|
||||
}
|
||||
}
|
||||
function setMonth(date) {
|
||||
var selectedDate = new Date(date);
|
||||
selectedDate.setFullYear(fp.currentYear);
|
||||
fp.currentMonth = selectedDate.getMonth();
|
||||
fp.setDate(selectedDate, true);
|
||||
setCurrentlySelected();
|
||||
}
|
||||
var shifts = {
|
||||
37: -1,
|
||||
39: 1,
|
||||
40: 3,
|
||||
38: -3
|
||||
};
|
||||
function onKeyDown(_, __, ___, e) {
|
||||
var shouldMove = shifts[e.keyCode] !== undefined;
|
||||
if (!shouldMove && e.keyCode !== 13) {
|
||||
return;
|
||||
}
|
||||
if (!fp.rContainer || !self.monthsContainer)
|
||||
return;
|
||||
var currentlySelected = fp.rContainer.querySelector(".flatpickr-monthSelect-month.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) {
|
||||
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) {
|
||||
var months = self.monthsContainer.querySelectorAll(".flatpickr-monthSelect-month");
|
||||
for (var index = 0; index < months.length; index++) {
|
||||
months[index].removeEventListener("click", selectMonth);
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
onParseConfig: function () {
|
||||
fp.config.mode = "single";
|
||||
fp.config.enableTime = false;
|
||||
},
|
||||
onValueUpdate: setCurrentlySelected,
|
||||
onKeyDown: onKeyDown,
|
||||
onReady: [
|
||||
clearUnnecessaryDOMElements,
|
||||
addListeners,
|
||||
addMonths,
|
||||
setCurrentlySelected,
|
||||
function () {
|
||||
fp.loadedPlugins.push("monthSelect");
|
||||
},
|
||||
],
|
||||
onDestroy: destroyPluginInstance
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
return monthSelectPlugin;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,79 @@
|
||||
.flatpickr-monthSelect-months {
|
||||
margin: 10px 1px 3px 1px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-month {
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #393939;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
margin: 0.5px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
text-align: center;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-month.disabled {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-month.disabled:hover,
|
||||
.flatpickr-monthSelect-month.disabled:focus {
|
||||
cursor: not-allowed;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-theme-dark {
|
||||
background: #3f4458;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-month:hover,
|
||||
.flatpickr-monthSelect-month:focus {
|
||||
background: #e6e6e6;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
|
||||
background: #646c8c;
|
||||
border-color: #646c8c;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-month.selected {
|
||||
background-color: #569ff7;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected {
|
||||
background: #80cbc4;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
border-color: #80cbc4;
|
||||
}
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.rangePlugin = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
function rangePlugin(config) {
|
||||
if (config === void 0) { config = {}; }
|
||||
return function (fp) {
|
||||
var dateFormat = "", secondInput, _secondInputFocused, _prevDates;
|
||||
var createSecondInput = function () {
|
||||
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) {
|
||||
var parsedDate = fp.parseDate(secondInput.value);
|
||||
if (parsedDate)
|
||||
fp.selectedDates.push(parsedDate);
|
||||
}
|
||||
secondInput.setAttribute("data-fp-omit", "");
|
||||
fp._bind(secondInput, ["focus", "click"], function () {
|
||||
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"], function (e) {
|
||||
e.preventDefault();
|
||||
fp.isOpen = false;
|
||||
fp.open();
|
||||
});
|
||||
if (fp.config.allowInput)
|
||||
fp._bind(secondInput, "keydown", function (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);
|
||||
};
|
||||
var plugin = {
|
||||
onParseConfig: function () {
|
||||
fp.config.mode = "range";
|
||||
dateFormat = fp.config.altInput
|
||||
? fp.config.altFormat
|
||||
: fp.config.dateFormat;
|
||||
},
|
||||
onReady: function () {
|
||||
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", function () {
|
||||
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", function (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: function () {
|
||||
if (_secondInputFocused) {
|
||||
fp._positionElement = secondInput;
|
||||
setTimeout(function () {
|
||||
fp._positionElement = fp._input;
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
onChange: function () {
|
||||
if (!fp.selectedDates.length) {
|
||||
setTimeout(function () {
|
||||
if (fp.selectedDates.length)
|
||||
return;
|
||||
secondInput.value = "";
|
||||
_prevDates = [];
|
||||
}, 10);
|
||||
}
|
||||
if (_secondInputFocused) {
|
||||
setTimeout(function () {
|
||||
secondInput.focus();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
onDestroy: function () {
|
||||
if (!config.input)
|
||||
secondInput.parentNode &&
|
||||
secondInput.parentNode.removeChild(secondInput);
|
||||
},
|
||||
onValueUpdate: function (selDates) {
|
||||
var _a, _b, _c;
|
||||
if (!secondInput)
|
||||
return;
|
||||
_prevDates =
|
||||
!_prevDates || selDates.length >= _prevDates.length
|
||||
? selDates.slice() : _prevDates;
|
||||
if (_prevDates.length > selDates.length) {
|
||||
var newSelectedDate = selDates[0];
|
||||
var newDates = _secondInputFocused
|
||||
? [_prevDates[0], newSelectedDate]
|
||||
: [newSelectedDate, _prevDates[1]];
|
||||
fp.setDate(newDates, false);
|
||||
_prevDates = newDates.slice();
|
||||
}
|
||||
_a = fp.selectedDates.map(function (d) { return fp.formatDate(d, dateFormat); }), _b = _a[0], fp._input.value = _b === void 0 ? "" : _b, _c = _a[1], secondInput.value = _c === void 0 ? "" : _c;
|
||||
}
|
||||
};
|
||||
return plugin;
|
||||
};
|
||||
}
|
||||
|
||||
return rangePlugin;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,58 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.scrollPlugin = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
function delta(e) {
|
||||
return Math.max(-1, Math.min(1, e.wheelDelta || -e.deltaY));
|
||||
}
|
||||
var scroll = function (e) {
|
||||
e.preventDefault();
|
||||
var ev = new CustomEvent("increment", {
|
||||
bubbles: true
|
||||
});
|
||||
ev.delta = delta(e);
|
||||
e.target.dispatchEvent(ev);
|
||||
};
|
||||
function scrollMonth(fp) {
|
||||
return function (e) {
|
||||
e.preventDefault();
|
||||
var mDelta = delta(e);
|
||||
fp.changeMonth(mDelta);
|
||||
};
|
||||
}
|
||||
function scrollPlugin() {
|
||||
return function (fp) {
|
||||
var monthScroller = scrollMonth(fp);
|
||||
return {
|
||||
onReady: function () {
|
||||
if (fp.timeContainer) {
|
||||
fp.timeContainer.addEventListener("wheel", scroll);
|
||||
}
|
||||
fp.yearElements.forEach(function (yearElem) {
|
||||
return yearElem.addEventListener("wheel", scroll);
|
||||
});
|
||||
fp.monthElements.forEach(function (monthElem) {
|
||||
return monthElem.addEventListener("wheel", monthScroller);
|
||||
});
|
||||
fp.loadedPlugins.push("scroll");
|
||||
},
|
||||
onDestroy: function () {
|
||||
if (fp.timeContainer) {
|
||||
fp.timeContainer.removeEventListener("wheel", scroll);
|
||||
}
|
||||
fp.yearElements.forEach(function (yearElem) {
|
||||
return yearElem.removeEventListener("wheel", scroll);
|
||||
});
|
||||
fp.monthElements.forEach(function (monthElem) {
|
||||
return monthElem.removeEventListener("wheel", monthScroller);
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
return scrollPlugin;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,86 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global.weekSelect = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
function weekSelectPlugin() {
|
||||
return function (fp) {
|
||||
function onDayHover(event) {
|
||||
var day = event.target;
|
||||
if (!day.classList.contains("flatpickr-day"))
|
||||
return;
|
||||
var days = fp.days.childNodes;
|
||||
var dayIndex = day.$i;
|
||||
var dayIndSeven = dayIndex / 7;
|
||||
var weekStartDay = days[7 * Math.floor(dayIndSeven)]
|
||||
.dateObj;
|
||||
var weekEndDay = days[7 * Math.ceil(dayIndSeven + 0.01) - 1].dateObj;
|
||||
for (var i = days.length; i--;) {
|
||||
var day_1 = days[i];
|
||||
var date = day_1.dateObj;
|
||||
if (date > weekEndDay || date < weekStartDay)
|
||||
day_1.classList.remove("inRange");
|
||||
else
|
||||
day_1.classList.add("inRange");
|
||||
}
|
||||
}
|
||||
function highlightWeek() {
|
||||
var 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;
|
||||
}
|
||||
var days = fp.days.childNodes;
|
||||
for (var i = days.length; i--;) {
|
||||
var date = days[i].dateObj;
|
||||
if (date >= fp.weekStartDay && date <= fp.weekEndDay)
|
||||
days[i].classList.add("week", "selected");
|
||||
}
|
||||
}
|
||||
function clearHover() {
|
||||
var days = fp.days.childNodes;
|
||||
for (var 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,
|
||||
function () {
|
||||
fp.loadedPlugins.push("weekSelect");
|
||||
},
|
||||
],
|
||||
onDestroy: onDestroy
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
return weekSelectPlugin;
|
||||
|
||||
}));
|
||||
Reference in New Issue
Block a user