flowbite-datepicker
Version:
A Tailwind CSS powered datepicker built with vanilla JavaScript and Flowbite
1,359 lines (1,306 loc) • 107 kB
JavaScript
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _assertThisInitialized(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function _callSuper(t, o, e) {
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: !1
}), e;
}
function _get() {
return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) {
var p = _superPropBase(e, t);
if (p) {
var n = Object.getOwnPropertyDescriptor(p, t);
return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value;
}
}, _get.apply(null, arguments);
}
function _getPrototypeOf(t) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
}, _getPrototypeOf(t);
}
function _inherits(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: !0,
configurable: !0
}
}), Object.defineProperty(t, "prototype", {
writable: !1
}), e && _setPrototypeOf(t, e);
}
function _isNativeReflectConstruct() {
try {
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (t) {}
return (_isNativeReflectConstruct = function () {
return !!t;
})();
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _possibleConstructorReturn(t, e) {
if (e && ("object" == typeof e || "function" == typeof e)) return e;
if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
return _assertThisInitialized(t);
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _superPropBase(t, o) {
for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t)););
return t;
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function hasProperty(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
}
function lastItemOf(arr) {
return arr[arr.length - 1];
}
// push only the items not included in the array
function pushUnique(arr) {
for (var _len = arguments.length, items = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
items[_key - 1] = arguments[_key];
}
items.forEach(function (item) {
if (arr.includes(item)) {
return;
}
arr.push(item);
});
return arr;
}
function stringToArray(str, separator) {
// convert empty string to an empty array
return str ? str.split(separator) : [];
}
function isInRange(testVal, min, max) {
var minOK = min === undefined || testVal >= min;
var maxOK = max === undefined || testVal <= max;
return minOK && maxOK;
}
function limitToRange(val, min, max) {
if (val < min) {
return min;
}
if (val > max) {
return max;
}
return val;
}
function createTagRepeat(tagName, repeat) {
var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var html = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
var openTagSrc = Object.keys(attributes).reduce(function (src, attr) {
var val = attributes[attr];
if (typeof val === 'function') {
val = val(index);
}
return "".concat(src, " ").concat(attr, "=\"").concat(val, "\"");
}, tagName);
html += "<".concat(openTagSrc, "></").concat(tagName, ">");
var next = index + 1;
return next < repeat ? createTagRepeat(tagName, repeat, attributes, next, html) : html;
}
// Remove the spacing surrounding tags for HTML parser not to create text nodes
// before/after elements
function optimizeTemplateHTML(html) {
return html.replace(/>\s+/g, '>').replace(/\s+</, '<');
}
function stripTime(timeValue) {
return new Date(timeValue).setHours(0, 0, 0, 0);
}
function today() {
return new Date().setHours(0, 0, 0, 0);
}
// Get the time value of the start of given date or year, month and day
function dateValue() {
switch (arguments.length) {
case 0:
return today();
case 1:
return stripTime(arguments.length <= 0 ? undefined : arguments[0]);
}
// use setFullYear() to keep 2-digit year from being mapped to 1900-1999
var newDate = new Date(0);
newDate.setFullYear.apply(newDate, arguments);
return newDate.setHours(0, 0, 0, 0);
}
function addDays(date, amount) {
var newDate = new Date(date);
return newDate.setDate(newDate.getDate() + amount);
}
function addWeeks(date, amount) {
return addDays(date, amount * 7);
}
function addMonths(date, amount) {
// If the day of the date is not in the new month, the last day of the new
// month will be returned. e.g. Jan 31 + 1 month → Feb 28 (not Mar 03)
var newDate = new Date(date);
var monthsToSet = newDate.getMonth() + amount;
var expectedMonth = monthsToSet % 12;
if (expectedMonth < 0) {
expectedMonth += 12;
}
var time = newDate.setMonth(monthsToSet);
return newDate.getMonth() !== expectedMonth ? newDate.setDate(0) : time;
}
function addYears(date, amount) {
// If the date is Feb 29 and the new year is not a leap year, Feb 28 of the
// new year will be returned.
var newDate = new Date(date);
var expectedMonth = newDate.getMonth();
var time = newDate.setFullYear(newDate.getFullYear() + amount);
return expectedMonth === 1 && newDate.getMonth() === 2 ? newDate.setDate(0) : time;
}
// Calculate the distance bettwen 2 days of the week
function dayDiff(day, from) {
return (day - from + 7) % 7;
}
// Get the date of the specified day of the week of given base date
function dayOfTheWeekOf(baseDate, dayOfWeek) {
var weekStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var baseDay = new Date(baseDate).getDay();
return addDays(baseDate, dayDiff(dayOfWeek, weekStart) - dayDiff(baseDay, weekStart));
}
// Get the ISO week of a date
function getWeek(date) {
// start of ISO week is Monday
var thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
// 1st week == the week where the 4th of January is in
var firstThu = dayOfTheWeekOf(new Date(thuOfTheWeek).setMonth(0, 4), 4, 1);
return Math.round((thuOfTheWeek - firstThu) / 604800000) + 1;
}
// Get the start year of the period of years that includes given date
// years: length of the year period
function startOfYearPeriod(date, years) {
/* @see https://en.wikipedia.org/wiki/Year_zero#ISO_8601 */
var year = new Date(date).getFullYear();
return Math.floor(year / years) * years;
}
// pattern for format parts
var reFormatTokens = /dd?|DD?|mm?|MM?|yy?(?:yy)?/;
// pattern for non date parts
var reNonDateParts = /[\s!-/:-@[-`{-~年月日]+/;
// cache for persed formats
var knownFormats = {};
// parse funtions for date parts
var parseFns = {
y: function y(date, year) {
return new Date(date).setFullYear(parseInt(year, 10));
},
m: function m(date, month, locale) {
var newDate = new Date(date);
var monthIndex = parseInt(month, 10) - 1;
if (isNaN(monthIndex)) {
if (!month) {
return NaN;
}
var monthName = month.toLowerCase();
var compareNames = function compareNames(name) {
return name.toLowerCase().startsWith(monthName);
};
// compare with both short and full names because some locales have periods
// in the short names (not equal to the first X letters of the full names)
monthIndex = locale.monthsShort.findIndex(compareNames);
if (monthIndex < 0) {
monthIndex = locale.months.findIndex(compareNames);
}
if (monthIndex < 0) {
return NaN;
}
}
newDate.setMonth(monthIndex);
return newDate.getMonth() !== normalizeMonth(monthIndex) ? newDate.setDate(0) : newDate.getTime();
},
d: function d(date, day) {
return new Date(date).setDate(parseInt(day, 10));
}
};
// format functions for date parts
var formatFns = {
d: function d(date) {
return date.getDate();
},
dd: function dd(date) {
return padZero(date.getDate(), 2);
},
D: function D(date, locale) {
return locale.daysShort[date.getDay()];
},
DD: function DD(date, locale) {
return locale.days[date.getDay()];
},
m: function m(date) {
return date.getMonth() + 1;
},
mm: function mm(date) {
return padZero(date.getMonth() + 1, 2);
},
M: function M(date, locale) {
return locale.monthsShort[date.getMonth()];
},
MM: function MM(date, locale) {
return locale.months[date.getMonth()];
},
y: function y(date) {
return date.getFullYear();
},
yy: function yy(date) {
return padZero(date.getFullYear(), 2).slice(-2);
},
yyyy: function yyyy(date) {
return padZero(date.getFullYear(), 4);
}
};
// get month index in normal range (0 - 11) from any number
function normalizeMonth(monthIndex) {
return monthIndex > -1 ? monthIndex % 12 : normalizeMonth(monthIndex + 12);
}
function padZero(num, length) {
return num.toString().padStart(length, '0');
}
function parseFormatString(format) {
if (typeof format !== 'string') {
throw new Error("Invalid date format.");
}
if (format in knownFormats) {
return knownFormats[format];
}
// sprit the format string into parts and seprators
var separators = format.split(reFormatTokens);
var parts = format.match(new RegExp(reFormatTokens, 'g'));
if (separators.length === 0 || !parts) {
throw new Error("Invalid date format.");
}
// collect format functions used in the format
var partFormatters = parts.map(function (token) {
return formatFns[token];
});
// collect parse function keys used in the format
// iterate over parseFns' keys in order to keep the order of the keys.
var partParserKeys = Object.keys(parseFns).reduce(function (keys, key) {
var token = parts.find(function (part) {
return part[0] !== 'D' && part[0].toLowerCase() === key;
});
if (token) {
keys.push(key);
}
return keys;
}, []);
return knownFormats[format] = {
parser: function parser(dateStr, locale) {
var dateParts = dateStr.split(reNonDateParts).reduce(function (dtParts, part, index) {
if (part.length > 0 && parts[index]) {
var token = parts[index][0];
if (token === 'M') {
dtParts.m = part;
} else if (token !== 'D') {
dtParts[token] = part;
}
}
return dtParts;
}, {});
// iterate over partParserkeys so that the parsing is made in the oder
// of year, month and day to prevent the day parser from correcting last
// day of month wrongly
return partParserKeys.reduce(function (origDate, key) {
var newDate = parseFns[key](origDate, dateParts[key], locale);
// ingnore the part failed to parse
return isNaN(newDate) ? origDate : newDate;
}, today());
},
formatter: function formatter(date, locale) {
var dateStr = partFormatters.reduce(function (str, fn, index) {
return str += "".concat(separators[index]).concat(fn(date, locale));
}, '');
// separators' length is always parts' length + 1,
return dateStr += lastItemOf(separators);
}
};
}
function parseDate(dateStr, format, locale) {
if (dateStr instanceof Date || typeof dateStr === 'number') {
var date = stripTime(dateStr);
return isNaN(date) ? undefined : date;
}
if (!dateStr) {
return undefined;
}
if (dateStr === 'today') {
return today();
}
if (format && format.toValue) {
var _date = format.toValue(dateStr, format, locale);
return isNaN(_date) ? undefined : stripTime(_date);
}
return parseFormatString(format).parser(dateStr, locale);
}
function formatDate(date, format, locale) {
if (isNaN(date) || !date && date !== 0) {
return '';
}
var dateObj = typeof date === 'number' ? new Date(date) : date;
if (format.toDisplay) {
return format.toDisplay(dateObj, format, locale);
}
return parseFormatString(format).formatter(dateObj, locale);
}
var listenerRegistry = new WeakMap();
var _EventTarget$prototyp = EventTarget.prototype,
addEventListener = _EventTarget$prototyp.addEventListener,
removeEventListener = _EventTarget$prototyp.removeEventListener;
// Register event listeners to a key object
// listeners: array of listener definitions;
// - each definition must be a flat array of event target and the arguments
// used to call addEventListener() on the target
function registerListeners(keyObj, listeners) {
var registered = listenerRegistry.get(keyObj);
if (!registered) {
registered = [];
listenerRegistry.set(keyObj, registered);
}
listeners.forEach(function (listener) {
addEventListener.call.apply(addEventListener, _toConsumableArray(listener));
registered.push(listener);
});
}
function unregisterListeners(keyObj) {
var listeners = listenerRegistry.get(keyObj);
if (!listeners) {
return;
}
listeners.forEach(function (listener) {
removeEventListener.call.apply(removeEventListener, _toConsumableArray(listener));
});
listenerRegistry["delete"](keyObj);
}
// Event.composedPath() polyfill for Edge
// based on https://gist.github.com/kleinfreund/e9787d73776c0e3750dcfcdc89f100ec
if (!Event.prototype.composedPath) {
var getComposedPath = function getComposedPath(node) {
var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
path.push(node);
var parent;
if (node.parentNode) {
parent = node.parentNode;
} else if (node.host) {
// ShadowRoot
parent = node.host;
} else if (node.defaultView) {
// Document
parent = node.defaultView;
}
return parent ? getComposedPath(parent, path) : path;
};
Event.prototype.composedPath = function () {
return getComposedPath(this.target);
};
}
function findFromPath(path, criteria, currentTarget) {
var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var el = path[index];
if (criteria(el)) {
return el;
} else if (el === currentTarget || !el.parentElement) {
// stop when reaching currentTarget or <html>
return;
}
return findFromPath(path, criteria, currentTarget, index + 1);
}
// Search for the actual target of a delegated event
function findElementInEventPath(ev, selector) {
var criteria = typeof selector === 'function' ? selector : function (el) {
return el.matches(selector);
};
return findFromPath(ev.composedPath(), criteria, ev.currentTarget);
}
// default locales
var locales = {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: "Today",
clear: "Clear",
titleFormat: "MM y"
}
};
// config options updatable by setOptions() and their default values
var defaultOptions = {
autohide: false,
beforeShowDay: null,
beforeShowDecade: null,
beforeShowMonth: null,
beforeShowYear: null,
calendarWeeks: false,
clearBtn: false,
dateDelimiter: ',',
datesDisabled: [],
daysOfWeekDisabled: [],
daysOfWeekHighlighted: [],
defaultViewDate: undefined,
// placeholder, defaults to today() by the program
disableTouchKeyboard: false,
format: 'mm/dd/yyyy',
language: 'en',
maxDate: null,
maxNumberOfDates: 1,
maxView: 3,
minDate: null,
nextArrow: '<svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>',
orientation: 'auto',
pickLevel: 0,
prevArrow: '<svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/></svg>',
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0,
title: '',
todayBtn: false,
todayBtnMode: 0,
todayHighlight: false,
updateOnBlur: true,
weekStart: 0
};
var range = null;
function parseHTML(html) {
if (range == null) {
range = document.createRange();
}
return range.createContextualFragment(html);
}
function hideElement(el) {
if (el.style.display === 'none') {
return;
}
// back up the existing display setting in data-style-display
if (el.style.display) {
el.dataset.styleDisplay = el.style.display;
}
el.style.display = 'none';
}
function showElement(el) {
if (el.style.display !== 'none') {
return;
}
if (el.dataset.styleDisplay) {
// restore backed-up dispay property
el.style.display = el.dataset.styleDisplay;
delete el.dataset.styleDisplay;
} else {
el.style.display = '';
}
}
function emptyChildNodes(el) {
if (el.firstChild) {
el.removeChild(el.firstChild);
emptyChildNodes(el);
}
}
function replaceChildNodes(el, newChildNodes) {
emptyChildNodes(el);
if (newChildNodes instanceof DocumentFragment) {
el.appendChild(newChildNodes);
} else if (typeof newChildNodes === 'string') {
el.appendChild(parseHTML(newChildNodes));
} else if (typeof newChildNodes.forEach === 'function') {
newChildNodes.forEach(function (node) {
el.appendChild(node);
});
}
}
var defaultLang = defaultOptions.language,
defaultFormat = defaultOptions.format,
defaultWeekStart = defaultOptions.weekStart;
// Reducer function to filter out invalid day-of-week from the input
function sanitizeDOW(dow, day) {
return dow.length < 6 && day >= 0 && day < 7 ? pushUnique(dow, day) : dow;
}
function calcEndOfWeek(startOfWeek) {
return (startOfWeek + 6) % 7;
}
// validate input date. if invalid, fallback to the original value
function validateDate(value, format, locale, origValue) {
var date = parseDate(value, format, locale);
return date !== undefined ? date : origValue;
}
// Validate viewId. if invalid, fallback to the original value
function validateViewId(value, origValue) {
var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
var viewId = parseInt(value, 10);
return viewId >= 0 && viewId <= max ? viewId : origValue;
}
// Create Datepicker configuration to set
function processOptions(options, datepicker) {
var inOpts = Object.assign({}, options);
var config = {};
var locales = datepicker.constructor.locales;
var _ref = datepicker.config || {},
format = _ref.format,
language = _ref.language,
locale = _ref.locale,
maxDate = _ref.maxDate,
maxView = _ref.maxView,
minDate = _ref.minDate,
pickLevel = _ref.pickLevel,
startView = _ref.startView,
weekStart = _ref.weekStart;
if (inOpts.language) {
var lang;
if (inOpts.language !== language) {
if (locales[inOpts.language]) {
lang = inOpts.language;
} else {
// Check if langauge + region tag can fallback to the one without
// region (e.g. fr-CA → fr)
lang = inOpts.language.split('-')[0];
if (locales[lang] === undefined) {
lang = false;
}
}
}
delete inOpts.language;
if (lang) {
language = config.language = lang;
// update locale as well when updating language
var origLocale = locale || locales[defaultLang];
// use default language's properties for the fallback
locale = Object.assign({
format: defaultFormat,
weekStart: defaultWeekStart
}, locales[defaultLang]);
if (language !== defaultLang) {
Object.assign(locale, locales[language]);
}
config.locale = locale;
// if format and/or weekStart are the same as old locale's defaults,
// update them to new locale's defaults
if (format === origLocale.format) {
format = config.format = locale.format;
}
if (weekStart === origLocale.weekStart) {
weekStart = config.weekStart = locale.weekStart;
config.weekEnd = calcEndOfWeek(locale.weekStart);
}
}
}
if (inOpts.format) {
var hasToDisplay = typeof inOpts.format.toDisplay === 'function';
var hasToValue = typeof inOpts.format.toValue === 'function';
var validFormatString = reFormatTokens.test(inOpts.format);
if (hasToDisplay && hasToValue || validFormatString) {
format = config.format = inOpts.format;
}
delete inOpts.format;
}
//*** dates ***//
// while min and maxDate for "no limit" in the options are better to be null
// (especially when updating), the ones in the config have to be undefined
// because null is treated as 0 (= unix epoch) when comparing with time value
var minDt = minDate;
var maxDt = maxDate;
if (inOpts.minDate !== undefined) {
minDt = inOpts.minDate === null ? dateValue(0, 0, 1) // set 0000-01-01 to prevent negative values for year
: validateDate(inOpts.minDate, format, locale, minDt);
delete inOpts.minDate;
}
if (inOpts.maxDate !== undefined) {
maxDt = inOpts.maxDate === null ? undefined : validateDate(inOpts.maxDate, format, locale, maxDt);
delete inOpts.maxDate;
}
if (maxDt < minDt) {
minDate = config.minDate = maxDt;
maxDate = config.maxDate = minDt;
} else {
if (minDate !== minDt) {
minDate = config.minDate = minDt;
}
if (maxDate !== maxDt) {
maxDate = config.maxDate = maxDt;
}
}
if (inOpts.datesDisabled) {
config.datesDisabled = inOpts.datesDisabled.reduce(function (dates, dt) {
var date = parseDate(dt, format, locale);
return date !== undefined ? pushUnique(dates, date) : dates;
}, []);
delete inOpts.datesDisabled;
}
if (inOpts.defaultViewDate !== undefined) {
var viewDate = parseDate(inOpts.defaultViewDate, format, locale);
if (viewDate !== undefined) {
config.defaultViewDate = viewDate;
}
delete inOpts.defaultViewDate;
}
//*** days of week ***//
if (inOpts.weekStart !== undefined) {
var wkStart = Number(inOpts.weekStart) % 7;
if (!isNaN(wkStart)) {
weekStart = config.weekStart = wkStart;
config.weekEnd = calcEndOfWeek(wkStart);
}
delete inOpts.weekStart;
}
if (inOpts.daysOfWeekDisabled) {
config.daysOfWeekDisabled = inOpts.daysOfWeekDisabled.reduce(sanitizeDOW, []);
delete inOpts.daysOfWeekDisabled;
}
if (inOpts.daysOfWeekHighlighted) {
config.daysOfWeekHighlighted = inOpts.daysOfWeekHighlighted.reduce(sanitizeDOW, []);
delete inOpts.daysOfWeekHighlighted;
}
//*** multi date ***//
if (inOpts.maxNumberOfDates !== undefined) {
var maxNumberOfDates = parseInt(inOpts.maxNumberOfDates, 10);
if (maxNumberOfDates >= 0) {
config.maxNumberOfDates = maxNumberOfDates;
config.multidate = maxNumberOfDates !== 1;
}
delete inOpts.maxNumberOfDates;
}
if (inOpts.dateDelimiter) {
config.dateDelimiter = String(inOpts.dateDelimiter);
delete inOpts.dateDelimiter;
}
//*** pick level & view ***//
var newPickLevel = pickLevel;
if (inOpts.pickLevel !== undefined) {
newPickLevel = validateViewId(inOpts.pickLevel, 2);
delete inOpts.pickLevel;
}
if (newPickLevel !== pickLevel) {
pickLevel = config.pickLevel = newPickLevel;
}
var newMaxView = maxView;
if (inOpts.maxView !== undefined) {
newMaxView = validateViewId(inOpts.maxView, maxView);
delete inOpts.maxView;
}
// ensure max view >= pick level
newMaxView = pickLevel > newMaxView ? pickLevel : newMaxView;
if (newMaxView !== maxView) {
maxView = config.maxView = newMaxView;
}
var newStartView = startView;
if (inOpts.startView !== undefined) {
newStartView = validateViewId(inOpts.startView, newStartView);
delete inOpts.startView;
}
// ensure pick level <= start view <= max view
if (newStartView < pickLevel) {
newStartView = pickLevel;
} else if (newStartView > maxView) {
newStartView = maxView;
}
if (newStartView !== startView) {
config.startView = newStartView;
}
//*** template ***//
if (inOpts.prevArrow) {
var prevArrow = parseHTML(inOpts.prevArrow);
if (prevArrow.childNodes.length > 0) {
config.prevArrow = prevArrow.childNodes;
}
delete inOpts.prevArrow;
}
if (inOpts.nextArrow) {
var nextArrow = parseHTML(inOpts.nextArrow);
if (nextArrow.childNodes.length > 0) {
config.nextArrow = nextArrow.childNodes;
}
delete inOpts.nextArrow;
}
//*** misc ***//
if (inOpts.disableTouchKeyboard !== undefined) {
config.disableTouchKeyboard = 'ontouchstart' in document && !!inOpts.disableTouchKeyboard;
delete inOpts.disableTouchKeyboard;
}
if (inOpts.orientation) {
var orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
config.orientation = {
x: orientation.find(function (x) {
return x === 'left' || x === 'right';
}) || 'auto',
y: orientation.find(function (y) {
return y === 'top' || y === 'bottom';
}) || 'auto'
};
delete inOpts.orientation;
}
if (inOpts.todayBtnMode !== undefined) {
switch (inOpts.todayBtnMode) {
case 0:
case 1:
config.todayBtnMode = inOpts.todayBtnMode;
}
delete inOpts.todayBtnMode;
}
//*** copy the rest ***//
Object.keys(inOpts).forEach(function (key) {
if (inOpts[key] !== undefined && hasProperty(defaultOptions, key)) {
config[key] = inOpts[key];
}
});
return config;
}
var pickerTemplate = optimizeTemplateHTML("<div class=\"datepicker hidden\">\n <div class=\"datepicker-picker inline-block rounded-base bg-neutral-primary-medium border border-default-medium p-4\">\n <div class=\"datepicker-header\">\n <div class=\"datepicker-title bg-neutral-primary-medium text-heading px-2 py-3 text-center font-medium\"></div>\n <div class=\"datepicker-controls flex justify-between mb-2\">\n <button type=\"button\" class=\"bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary prev-btn\"></button>\n <button type=\"button\" class=\"text-sm rounded-base text-heading bg-neutral-primary-medium font-medium py-2.5 px-5 hover:bg-neutral-tertiary-medium focus:outline-none focus:ring-2 focus:ring-neutral-tertiary view-switch\"></button>\n <button type=\"button\" class=\"bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary next-btn\"></button>\n </div>\n </div>\n <div class=\"datepicker-main p-1\"></div>\n <div class=\"datepicker-footer\">\n <div class=\"datepicker-controls flex space-x-2 rtl:space-x-reverse mt-2\">\n <button type=\"button\" class=\"%buttonClass% today-btn text-white bg-brand hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium font-medium rounded-base text-sm px-5 py-2 text-center w-1/2\"></button>\n <button type=\"button\" class=\"%buttonClass% clear-btn text-body bg-neutral-secondary-medium border border-default-medium hover:bg-neutral-tertiary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium rounded-base text-sm px-5 py-2 text-center w-1/2\"></button>\n </div>\n </div>\n </div>\n</div>");
var daysTemplate = optimizeTemplateHTML("<div class=\"days\">\n <div class=\"days-of-week grid grid-cols-7 mb-1\">".concat(createTagRepeat('span', 7, {
"class": 'dow block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm'
}), "</div>\n <div class=\"datepicker-grid w-64 grid grid-cols-7\">").concat(createTagRepeat('span', 42, {
"class": 'block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm h-6 leading-6 text-sm font-medium text-fg-disabled'
}), "</div>\n</div>"));
var calendarWeeksTemplate = optimizeTemplateHTML("<div class=\"calendar-weeks\">\n <div class=\"days-of-week flex\"><span class=\"dow h-6 leading-6 text-sm font-medium text-fg-disabled\"></span></div>\n <div class=\"weeks\">".concat(createTagRepeat('span', 6, {
"class": 'week block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm'
}), "</div>\n</div>"));
// Base class of the view classes
var View = /*#__PURE__*/function () {
function View(picker, config) {
_classCallCheck(this, View);
Object.assign(this, config, {
picker: picker,
element: parseHTML("<div class=\"datepicker-view flex\"></div>").firstChild,
selected: []
});
this.init(this.picker.datepicker.config);
}
return _createClass(View, [{
key: "init",
value: function init(options) {
if (options.pickLevel !== undefined) {
this.isMinView = this.id === options.pickLevel;
}
this.setOptions(options);
this.updateFocus();
this.updateSelection();
}
// Execute beforeShow() callback and apply the result to the element
// args:
// - current - current value on the iteration on view rendering
// - timeValue - time value of the date to pass to beforeShow()
}, {
key: "performBeforeHook",
value: function performBeforeHook(el, current, timeValue) {
var result = this.beforeShow(new Date(timeValue));
switch (_typeof(result)) {
case 'boolean':
result = {
enabled: result
};
break;
case 'string':
result = {
classes: result
};
}
if (result) {
if (result.enabled === false) {
el.classList.add('disabled');
pushUnique(this.disabled, current);
}
if (result.classes) {
var _el$classList;
var extraClasses = result.classes.split(/\s+/);
(_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(extraClasses));
if (extraClasses.includes('disabled')) {
pushUnique(this.disabled, current);
}
}
if (result.content) {
replaceChildNodes(el, result.content);
}
}
}
}]);
}();
var DaysView = /*#__PURE__*/function (_View) {
function DaysView(picker) {
_classCallCheck(this, DaysView);
return _callSuper(this, DaysView, [picker, {
id: 0,
name: 'days',
cellClass: 'day'
}]);
}
_inherits(DaysView, _View);
return _createClass(DaysView, [{
key: "init",
value: function init(options) {
var onConstruction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (onConstruction) {
var inner = parseHTML(daysTemplate).firstChild;
this.dow = inner.firstChild;
this.grid = inner.lastChild;
this.element.appendChild(inner);
}
_get(_getPrototypeOf(DaysView.prototype), "init", this).call(this, options);
}
}, {
key: "setOptions",
value: function setOptions(options) {
var _this = this;
var updateDOW;
if (hasProperty(options, 'minDate')) {
this.minDate = options.minDate;
}
if (hasProperty(options, 'maxDate')) {
this.maxDate = options.maxDate;
}
if (options.datesDisabled) {
this.datesDisabled = options.datesDisabled;
}
if (options.daysOfWeekDisabled) {
this.daysOfWeekDisabled = options.daysOfWeekDisabled;
updateDOW = true;
}
if (options.daysOfWeekHighlighted) {
this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
}
if (options.todayHighlight !== undefined) {
this.todayHighlight = options.todayHighlight;
}
if (options.weekStart !== undefined) {
this.weekStart = options.weekStart;
this.weekEnd = options.weekEnd;
updateDOW = true;
}
if (options.locale) {
var locale = this.locale = options.locale;
this.dayNames = locale.daysMin;
this.switchLabelFormat = locale.titleFormat;
updateDOW = true;
}
if (options.beforeShowDay !== undefined) {
this.beforeShow = typeof options.beforeShowDay === 'function' ? options.beforeShowDay : undefined;
}
if (options.calendarWeeks !== undefined) {
if (options.calendarWeeks && !this.calendarWeeks) {
var weeksElem = parseHTML(calendarWeeksTemplate).firstChild;
this.calendarWeeks = {
element: weeksElem,
dow: weeksElem.firstChild,
weeks: weeksElem.lastChild
};
this.element.insertBefore(weeksElem, this.element.firstChild);
} else if (this.calendarWeeks && !options.calendarWeeks) {
this.element.removeChild(this.calendarWeeks.element);
this.calendarWeeks = null;
}
}
if (options.showDaysOfWeek !== undefined) {
if (options.showDaysOfWeek) {
showElement(this.dow);
if (this.calendarWeeks) {
showElement(this.calendarWeeks.dow);
}
} else {
hideElement(this.dow);
if (this.calendarWeeks) {
hideElement(this.calendarWeeks.dow);
}
}
}
// update days-of-week when locale, daysOfweekDisabled or weekStart is changed
if (updateDOW) {
Array.from(this.dow.children).forEach(function (el, index) {
var dow = (_this.weekStart + index) % 7;
el.textContent = _this.dayNames[dow];
el.className = _this.daysOfWeekDisabled.includes(dow) ? 'dow disabled text-center h-6 leading-6 text-sm font-medium text-fg-disabled cursor-not-allowed' : 'dow text-center h-6 leading-6 text-sm font-medium text-body';
});
}
}
// Apply update on the focused date to view's settings
}, {
key: "updateFocus",
value: function updateFocus() {
var viewDate = new Date(this.picker.viewDate);
var viewYear = viewDate.getFullYear();
var viewMonth = viewDate.getMonth();
var firstOfMonth = dateValue(viewYear, viewMonth, 1);
var start = dayOfTheWeekOf(firstOfMonth, this.weekStart, this.weekStart);
this.first = firstOfMonth;
this.last = dateValue(viewYear, viewMonth + 1, 0);
this.start = start;
this.focused = this.picker.viewDate;
}
// Apply update on the selected dates to view's settings
}, {
key: "updateSelection",
value: function updateSelection() {
var _this$picker$datepick = this.picker.datepicker,
dates = _this$picker$datepick.dates,
rangepicker = _this$picker$datepick.rangepicker;
this.selected = dates;
if (rangepicker) {
this.range = rangepicker.dates;
}
}
// Update the entire view UI
}, {
key: "render",
value: function render() {
var _this2 = this;
// update today marker on ever render
this.today = this.todayHighlight ? today() : undefined;
// refresh disabled dates on every render in order to clear the ones added
// by beforeShow hook at previous render
this.disabled = _toConsumableArray(this.datesDisabled);
var switchLabel = formatDate(this.focused, this.switchLabelFormat, this.locale);
this.picker.setViewSwitchLabel(switchLabel);
this.picker.setPrevBtnDisabled(this.first <= this.minDate);
this.picker.setNextBtnDisabled(this.last >= this.maxDate);
if (this.calendarWeeks) {
// start of the UTC week (Monday) of the 1st of the month
var startOfWeek = dayOfTheWeekOf(this.first, 1, 1);
Array.from(this.calendarWeeks.weeks.children).forEach(function (el, index) {
el.textContent = getWeek(addWeeks(startOfWeek, index));
});
}
Array.from(this.grid.children).forEach(function (el, index) {
var classList = el.classList;
var current = addDays(_this2.start, index);
var date = new Date(current);
var day = date.getDay();
el.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(_this2.cellClass);
el.dataset.date = current;
el.textContent = date.getDate();
if (current < _this2.first) {
classList.add('prev', 'text-fg-disabled');
} else if (current > _this2.last) {
classList.add('next', 'text-fg-disabled');
}
if (_this2.today === current) {
classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
}
if (current < _this2.minDate || current > _this2.maxDate || _this2.disabled.includes(current)) {
classList.add('disabled', 'cursor-not-allowed', 'text-fg-disabled');
classList.remove('hover:bg-neutral-tertiary-medium', 'text-body', 'cursor-pointer');
}
if (_this2.daysOfWeekDisabled.includes(day)) {
classList.add('disabled', 'cursor-not-allowed', 'text-fg-disabled');
classList.remove('hover:bg-neutral-tertiary-medium', 'text-body', 'cursor-pointer');
pushUnique(_this2.disabled, current);
}
if (_this2.daysOfWeekHighlighted.includes(day)) {
classList.add('highlighted');
}
if (_this2.range) {
var _this2$range = _slicedToArray(_this2.range, 2),
rangeStart = _this2$range[0],
rangeEnd = _this2$range[1];
if (current > rangeStart && current < rangeEnd) {
classList.add('range', 'bg-neutral-tertiary-medium');
classList.remove('rounded-base', 'rounded-s-base', 'rounded-e-base');
}
if (current === rangeStart) {
classList.add('range-start', 'bg-brand', 'rounded-s-base');
classList.remove('rounded-base', 'rounded-e-base');
}
if (current === rangeEnd) {
classList.add('range-end', 'bg-neutral-tertiary-medium', 'rounded-e-base');
classList.remove('rounded-base', 'rounded-s-base');
}
}
if (_this2.selected.includes(current)) {
classList.add('selected', 'bg-brand', 'text-white');
classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'bg-neutral-tertiary-medium');
}
if (current === _this2.focused) {
classList.add('focused');
}
if (_this2.beforeShow) {
_this2.performBeforeHook(el, current, current);
}
});
}
// Update the view UI by applying the changes of selected and focused items
}, {
key: "refresh",
value: function refresh() {
var _this3 = this;
var _ref = this.range || [],
_ref2 = _slicedToArray(_ref, 2),
rangeStart = _ref2[0],
rangeEnd = _ref2[1];
this.grid.querySelectorAll('.range, .range-start, .range-end, .selected, .focused').forEach(function (el) {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-brand', 'text-white', 'focused');
el.classList.add('text-body', 'rounded-base');
});
Array.from(this.grid.children).forEach(function (el) {
var current = Number(el.dataset.date);
var classList = el.classList;
classList.remove('bg-neutral-tertiary-medium', 'rounded-s-base', 'rounded-e-base');
if (current > rangeStart && current < rangeEnd) {
classList.add('range', 'bg-neutral-tertiary-medium');
classList.remove('rounded-base');
}
if (current === rangeStart) {
classList.add('range-start', 'bg-brand', 'text-white', 'rounded-s-base');
classList.remove('rounded-base');
}
if (current === rangeEnd) {
classList.add('range-end', 'bg-neutral-tertiary-medium', 'rounded-e-base');
classList.remove('rounded-base');
}
if (_this3.selected.includes(current)) {
classList.add('selected', 'bg-brand', 'text-white');
classList.remove('text-body', 'hover:bg-neutral-tertiary-medium', 'bg-neutral-tertiary-medium');
}
if (current === _this3.focused) {
classList.add('focused');
}
});
}
// Update the view UI by applying the change of focused item
}, {
key: "refreshFocus",
value: function refreshFocus() {
var index = Math.round((this.focused - this.start) / 86400000);
this.grid.querySelectorAll('.focused').forEach(function (el) {
el.classList.remove('focused');
});
this.grid.children[index].classList.add('focused');
}
}]);
}(View);
function computeMonthRange(range, thisYear) {
if (!range || !range[0] || !range[1]) {
return;
}
var _range = _slicedToArray(range, 2),
_range$ = _slicedToArray(_range[0], 2),
startY = _range$[0],
startM = _range$[1],
_range$2 = _slicedToArray(_range[1], 2),
endY = _range$2[0],
endM = _range$2[1];
if (startY > thisYear || endY < thisYear) {
return;
}
return [startY === thisYear ? startM : -1, endY === thisYear ? endM : 12];
}
var MonthsView = /*#__PURE__*/function (_View) {
function MonthsView(picker) {
_classCallCheck(this, MonthsView);
return _callSuper(this, MonthsView, [picker, {
id: 1,
name: 'months',
cellClass: 'month'
}]);
}
_inherits(MonthsView, _View);
return _createClass(MonthsView, [{
key: "init",
value: function init(options) {
var onConstruction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (onConstruction) {
this.grid = this.element;
this.element.classList.add('months', 'datepicker-grid', 'w-64', 'grid', 'grid-cols-4');
this.grid.appendChild(parseHTML(createTagRepeat('span', 12, {
'data-month': function dataMonth(ix) {
return ix;
}
})));
}
_get(_getPrototypeOf(MonthsView.prototype), "init", this).call(this, options);
}
}, {
key: "setOptions",
value: function setOptions(options) {
if (options.locale) {
this.monthNames = options.locale.monthsShort;
}
if (hasProperty(options, 'minDate')) {
if (options.minDate === undefined) {
this.minYear = this.minMonth = this.minDate = undefined;
} else {
var minDateObj = new Date(options.minDate);
this.minYear = minDateObj.getFullYear();
this.minMonth = minDateObj.getMonth();
this.minDate = minDateObj.setDate(1);
}
}
if (hasProperty(options, 'maxDate')) {
if (options.maxDate === undefined) {
this.maxYear = this.maxMonth = this.maxDate = undefined;
} else {
var maxDateObj = new Date(options.maxDate);
this.maxYear = maxDateObj.getFullYear();
this.maxMonth = maxDateObj.getMonth();
this.maxDate = dateValue(this.maxYear, this.maxMonth + 1, 0);
}
}
if (options.beforeShowMonth !== undefined) {
this.beforeShow = typeof options.beforeShowMonth === 'function' ? options.beforeShowMonth : undefined;
}
}
// Update view's settings to reflect the viewDate set on the picker
}, {
key: "updateFocus",
value: function updateFocus() {
var viewDate = new Date(this.picker.viewDate);
this.year = viewDate.getFullYear();
this.focused = viewDate.getMonth();
}
// Update view's settings to reflect the selected dates
}, {
key: "updateSelection",
value: function updateSelection() {
var _this$picker$datepick = this.picker.datepicker,
dates = _this$picker$datepick.dates,
rangepicker = _this$picker$datepick.rangepicker;
this.selected = dates.reduce(function (selected, timeValue) {
var date = new Date(timeValue);
var year = date.getFullYear();
var month = date.getMonth();
if (selected[year] === undefined) {
selected[year] = [month];
} else {
pushUnique(selected[year], month);
}
return selected;
}, {});
if (rangepicker && rangepicker.dates) {
this.range = rangepicker.dates.map(function (timeValue) {
var date = new Date(timeValue);
return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];
});
}
}
// Update the entire view UI
}, {
key: "render",
value: function render() {
var _this = this;
// refresh disabled months on every render in order to clear the ones added
// by beforeShow hook at previous render
this.disabled = [];
this.picker.setViewSwitchLabel(this.year);
this.picker.setPrevBtnDisabled(this.year <= this.minYear);
this.picker.setNextBtnDisabled(this.year >= this.maxYear);
var selected = this.selected[this.year] || [];
var yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;
var isMinYear = this.year === this.minYear;
var isMaxYear = this.year === this.maxYear;
var range = computeMonthRange(this.range, this.year);
Array.from(this.grid.children).forEach(function (el, index) {
var classList = el.classList;
var date = dateValue(_this.year, index, 1);
el.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(_this.cellClass);
if (_this.isMinView) {
el.dataset.date = date;
}
// reset text on every render to clear the custom content set
// by beforeShow hook at previous render
el.textContent = _this.monthNames[index];
if (yrOutOfRange || isMinYear && index < _this.minMonth || isMaxYear && index > _this.maxMonth) {
classList.add('disabled');
}
if (range) {
var _range2 = _slicedToArray(range, 2),
rangeStart = _range2[0],
rangeEnd = _range2[1];
if (index > rangeStart && index < rangeEnd) {
classLis