forked from hero/www_hero
3141 lines
103 KiB
JavaScript
3141 lines
103 KiB
JavaScript
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|||
|
|
if(typeof exports === 'object' && typeof module === 'object')
|
|||
|
|
module.exports = factory();
|
|||
|
|
else if(typeof define === 'function' && define.amd)
|
|||
|
|
define("Flowbite", [], factory);
|
|||
|
|
else if(typeof exports === 'object')
|
|||
|
|
exports["Flowbite"] = factory();
|
|||
|
|
else
|
|||
|
|
root["Flowbite"] = factory();
|
|||
|
|
})(self, function() {
|
|||
|
|
return /******/ (function() { // webpackBootstrap
|
|||
|
|
/******/ "use strict";
|
|||
|
|
/******/ var __webpack_modules__ = ({
|
|||
|
|
|
|||
|
|
/***/ 781:
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "initDatepickers": function() { return /* binding */ initDatepickers; }
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var flowbite_datepicker_Datepicker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(770);
|
|||
|
|
/* harmony import */ var flowbite_datepicker_DateRangePicker__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(482);
|
|||
|
|
/* harmony import */ var _dom_events__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(947);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var getDatepickerOptions = function getDatepickerOptions(datepickerEl) {
|
|||
|
|
var buttons = datepickerEl.hasAttribute('datepicker-buttons');
|
|||
|
|
var autohide = datepickerEl.hasAttribute('datepicker-autohide');
|
|||
|
|
var format = datepickerEl.hasAttribute('datepicker-format');
|
|||
|
|
var orientation = datepickerEl.hasAttribute('datepicker-orientation');
|
|||
|
|
var title = datepickerEl.hasAttribute('datepicker-title');
|
|||
|
|
var options = {};
|
|||
|
|
if (buttons) {
|
|||
|
|
options.todayBtn = true;
|
|||
|
|
options.clearBtn = true;
|
|||
|
|
}
|
|||
|
|
if (autohide) {
|
|||
|
|
options.autohide = true;
|
|||
|
|
}
|
|||
|
|
if (format) {
|
|||
|
|
options.format = datepickerEl.getAttribute('datepicker-format');
|
|||
|
|
}
|
|||
|
|
if (orientation) {
|
|||
|
|
options.orientation = datepickerEl.getAttribute('datepicker-orientation');
|
|||
|
|
}
|
|||
|
|
if (title) {
|
|||
|
|
options.title = datepickerEl.getAttribute('datepicker-title');
|
|||
|
|
}
|
|||
|
|
return options;
|
|||
|
|
};
|
|||
|
|
function initDatepickers() {
|
|||
|
|
document.querySelectorAll('[datepicker]').forEach(function (datepickerEl) {
|
|||
|
|
new flowbite_datepicker_Datepicker__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z(datepickerEl, getDatepickerOptions(datepickerEl));
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('[inline-datepicker]').forEach(function (datepickerEl) {
|
|||
|
|
new flowbite_datepicker_Datepicker__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z(datepickerEl, getDatepickerOptions(datepickerEl));
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('[date-rangepicker]').forEach(function (datepickerEl) {
|
|||
|
|
new flowbite_datepicker_DateRangePicker__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z(datepickerEl, getDatepickerOptions(datepickerEl));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var events = new _dom_events__WEBPACK_IMPORTED_MODULE_2__["default"]('DOMContentLoaded', [initDatepickers]);
|
|||
|
|
events.init();
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 482:
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "Z": function() { return /* binding */ DateRangePicker; }
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* harmony import */ var _lib_event_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(698);
|
|||
|
|
/* harmony import */ var _lib_date_format_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(963);
|
|||
|
|
/* harmony import */ var _Datepicker_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(770);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// filter out the config options inapproprite to pass to Datepicker
|
|||
|
|
function filterOptions(options) {
|
|||
|
|
const newOpts = Object.assign({}, options);
|
|||
|
|
|
|||
|
|
delete newOpts.inputs;
|
|||
|
|
delete newOpts.allowOneSidedRange;
|
|||
|
|
delete newOpts.maxNumberOfDates; // to ensure each datepicker handles a single date
|
|||
|
|
|
|||
|
|
return newOpts;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setupDatepicker(rangepicker, changeDateListener, el, options) {
|
|||
|
|
(0,_lib_event_js__WEBPACK_IMPORTED_MODULE_0__/* .registerListeners */ .cF)(rangepicker, [
|
|||
|
|
[el, 'changeDate', changeDateListener],
|
|||
|
|
]);
|
|||
|
|
new _Datepicker_js__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z(el, options, rangepicker);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onChangeDate(rangepicker, ev) {
|
|||
|
|
// to prevent both datepickers trigger the other side's update each other
|
|||
|
|
if (rangepicker._updating) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
rangepicker._updating = true;
|
|||
|
|
|
|||
|
|
const target = ev.target;
|
|||
|
|
if (target.datepicker === undefined) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const datepickers = rangepicker.datepickers;
|
|||
|
|
const setDateOptions = {render: false};
|
|||
|
|
const changedSide = rangepicker.inputs.indexOf(target);
|
|||
|
|
const otherSide = changedSide === 0 ? 1 : 0;
|
|||
|
|
const changedDate = datepickers[changedSide].dates[0];
|
|||
|
|
const otherDate = datepickers[otherSide].dates[0];
|
|||
|
|
|
|||
|
|
if (changedDate !== undefined && otherDate !== undefined) {
|
|||
|
|
// if the start of the range > the end, swap them
|
|||
|
|
if (changedSide === 0 && changedDate > otherDate) {
|
|||
|
|
datepickers[0].setDate(otherDate, setDateOptions);
|
|||
|
|
datepickers[1].setDate(changedDate, setDateOptions);
|
|||
|
|
} else if (changedSide === 1 && changedDate < otherDate) {
|
|||
|
|
datepickers[0].setDate(changedDate, setDateOptions);
|
|||
|
|
datepickers[1].setDate(otherDate, setDateOptions);
|
|||
|
|
}
|
|||
|
|
} else if (!rangepicker.allowOneSidedRange) {
|
|||
|
|
// to prevent the range from becoming one-sided, copy changed side's
|
|||
|
|
// selection (no matter if it's empty) to the other side
|
|||
|
|
if (changedDate !== undefined || otherDate !== undefined) {
|
|||
|
|
setDateOptions.clear = true;
|
|||
|
|
datepickers[otherSide].setDate(datepickers[changedSide].dates, setDateOptions);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
datepickers[0].picker.update().render();
|
|||
|
|
datepickers[1].picker.update().render();
|
|||
|
|
delete rangepicker._updating;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Class representing a date range picker
|
|||
|
|
*/
|
|||
|
|
class DateRangePicker {
|
|||
|
|
/**
|
|||
|
|
* Create a date range picker
|
|||
|
|
* @param {Element} element - element to bind a date range picker
|
|||
|
|
* @param {Object} [options] - config options
|
|||
|
|
*/
|
|||
|
|
constructor(element, options = {}) {
|
|||
|
|
const inputs = Array.isArray(options.inputs)
|
|||
|
|
? options.inputs
|
|||
|
|
: Array.from(element.querySelectorAll('input'));
|
|||
|
|
if (inputs.length < 2) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
element.rangepicker = this;
|
|||
|
|
this.element = element;
|
|||
|
|
this.inputs = inputs.slice(0, 2);
|
|||
|
|
this.allowOneSidedRange = !!options.allowOneSidedRange;
|
|||
|
|
|
|||
|
|
const changeDateListener = onChangeDate.bind(null, this);
|
|||
|
|
const cleanOptions = filterOptions(options);
|
|||
|
|
// in order for initial date setup to work right when pcicLvel > 0,
|
|||
|
|
// let Datepicker constructor add the instance to the rangepicker
|
|||
|
|
const datepickers = [];
|
|||
|
|
Object.defineProperty(this, 'datepickers', {
|
|||
|
|
get() {
|
|||
|
|
return datepickers;
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
setupDatepicker(this, changeDateListener, this.inputs[0], cleanOptions);
|
|||
|
|
setupDatepicker(this, changeDateListener, this.inputs[1], cleanOptions);
|
|||
|
|
Object.freeze(datepickers);
|
|||
|
|
// normalize the range if inital dates are given
|
|||
|
|
if (datepickers[0].dates.length > 0) {
|
|||
|
|
onChangeDate(this, {target: this.inputs[0]});
|
|||
|
|
} else if (datepickers[1].dates.length > 0) {
|
|||
|
|
onChangeDate(this, {target: this.inputs[1]});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @type {Array} - selected date of the linked date pickers
|
|||
|
|
*/
|
|||
|
|
get dates() {
|
|||
|
|
return this.datepickers.length === 2
|
|||
|
|
? [
|
|||
|
|
this.datepickers[0].dates[0],
|
|||
|
|
this.datepickers[1].dates[0],
|
|||
|
|
]
|
|||
|
|
: undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Set new values to the config options
|
|||
|
|
* @param {Object} options - config options to update
|
|||
|
|
*/
|
|||
|
|
setOptions(options) {
|
|||
|
|
this.allowOneSidedRange = !!options.allowOneSidedRange;
|
|||
|
|
|
|||
|
|
const cleanOptions = filterOptions(options);
|
|||
|
|
this.datepickers[0].setOptions(cleanOptions);
|
|||
|
|
this.datepickers[1].setOptions(cleanOptions);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Destroy the DateRangePicker instance
|
|||
|
|
* @return {DateRangePicker} - the instance destroyed
|
|||
|
|
*/
|
|||
|
|
destroy() {
|
|||
|
|
this.datepickers[0].destroy();
|
|||
|
|
this.datepickers[1].destroy();
|
|||
|
|
(0,_lib_event_js__WEBPACK_IMPORTED_MODULE_0__/* .unregisterListeners */ .uV)(this);
|
|||
|
|
delete this.element.rangepicker;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Get the start and end dates of the date range
|
|||
|
|
*
|
|||
|
|
* The method returns Date objects by default. If format string is passed,
|
|||
|
|
* it returns date strings formatted in given format.
|
|||
|
|
* The result array always contains 2 items (start date/end date) and
|
|||
|
|
* undefined is used for unselected side. (e.g. If none is selected,
|
|||
|
|
* the result will be [undefined, undefined]. If only the end date is set
|
|||
|
|
* when allowOneSidedRange config option is true, [undefined, endDate] will
|
|||
|
|
* be returned.)
|
|||
|
|
*
|
|||
|
|
* @param {String} [format] - Format string to stringify the dates
|
|||
|
|
* @return {Array} - Start and end dates
|
|||
|
|
*/
|
|||
|
|
getDates(format = undefined) {
|
|||
|
|
const callback = format
|
|||
|
|
? date => (0,_lib_date_format_js__WEBPACK_IMPORTED_MODULE_1__/* .formatDate */ .p6)(date, format, this.datepickers[0].config.locale)
|
|||
|
|
: date => new Date(date);
|
|||
|
|
|
|||
|
|
return this.dates.map(date => date === undefined ? date : callback(date));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Set the start and end dates of the date range
|
|||
|
|
*
|
|||
|
|
* The method calls datepicker.setDate() internally using each of the
|
|||
|
|
* arguments in start→end order.
|
|||
|
|
*
|
|||
|
|
* When a clear: true option object is passed instead of a date, the method
|
|||
|
|
* clears the date.
|
|||
|
|
*
|
|||
|
|
* If an invalid date, the same date as the current one or an option object
|
|||
|
|
* without clear: true is passed, the method considers that argument as an
|
|||
|
|
* "ineffective" argument because calling datepicker.setDate() with those
|
|||
|
|
* values makes no changes to the date selection.
|
|||
|
|
*
|
|||
|
|
* When the allowOneSidedRange config option is false, passing {clear: true}
|
|||
|
|
* to clear the range works only when it is done to the last effective
|
|||
|
|
* argument (in other words, passed to rangeEnd or to rangeStart along with
|
|||
|
|
* ineffective rangeEnd). This is because when the date range is changed,
|
|||
|
|
* it gets normalized based on the last change at the end of the changing
|
|||
|
|
* process.
|
|||
|
|
*
|
|||
|
|
* @param {Date|Number|String|Object} rangeStart - Start date of the range
|
|||
|
|
* or {clear: true} to clear the date
|
|||
|
|
* @param {Date|Number|String|Object} rangeEnd - End date of the range
|
|||
|
|
* or {clear: true} to clear the date
|
|||
|
|
*/
|
|||
|
|
setDates(rangeStart, rangeEnd) {
|
|||
|
|
const [datepicker0, datepicker1] = this.datepickers;
|
|||
|
|
const origDates = this.dates;
|
|||
|
|
|
|||
|
|
// If range normalization runs on every change, we can't set a new range
|
|||
|
|
// that starts after the end of the current range correctly because the
|
|||
|
|
// normalization process swaps start↔︎end right after setting the new start
|
|||
|
|
// date. To prevent this, the normalization process needs to run once after
|
|||
|
|
// both of the new dates are set.
|
|||
|
|
this._updating = true;
|
|||
|
|
datepicker0.setDate(rangeStart);
|
|||
|
|
datepicker1.setDate(rangeEnd);
|
|||
|
|
delete this._updating;
|
|||
|
|
|
|||
|
|
if (datepicker1.dates[0] !== origDates[1]) {
|
|||
|
|
onChangeDate(this, {target: this.inputs[1]});
|
|||
|
|
} else if (datepicker0.dates[0] !== origDates[0]) {
|
|||
|
|
onChangeDate(this, {target: this.inputs[0]});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 770:
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
// EXPORTS
|
|||
|
|
__webpack_require__.d(__webpack_exports__, {
|
|||
|
|
"Z": function() { return /* binding */ Datepicker; }
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/utils.js
|
|||
|
|
var utils = __webpack_require__(105);
|
|||
|
|
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/date.js
|
|||
|
|
var lib_date = __webpack_require__(560);
|
|||
|
|
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/date-format.js
|
|||
|
|
var date_format = __webpack_require__(963);
|
|||
|
|
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/event.js
|
|||
|
|
var lib_event = __webpack_require__(698);
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/i18n/base-locales.js
|
|||
|
|
// default locales
|
|||
|
|
const 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"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/options/defaultOptions.js
|
|||
|
|
// config options updatable by setOptions() and their default values
|
|||
|
|
const 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" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>',
|
|||
|
|
orientation: 'auto',
|
|||
|
|
pickLevel: 0,
|
|||
|
|
prevArrow: '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>',
|
|||
|
|
showDaysOfWeek: true,
|
|||
|
|
showOnClick: true,
|
|||
|
|
showOnFocus: true,
|
|||
|
|
startView: 0,
|
|||
|
|
title: '',
|
|||
|
|
todayBtn: false,
|
|||
|
|
todayBtnMode: 0,
|
|||
|
|
todayHighlight: false,
|
|||
|
|
updateOnBlur: true,
|
|||
|
|
weekStart: 0,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* harmony default export */ var options_defaultOptions = (defaultOptions);
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/lib/dom.js
|
|||
|
|
const range = document.createRange();
|
|||
|
|
|
|||
|
|
function parseHTML(html) {
|
|||
|
|
return range.createContextualFragment(html);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// equivalent to jQuery's :visble
|
|||
|
|
function isVisible(el) {
|
|||
|
|
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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((node) => {
|
|||
|
|
el.appendChild(node);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/options/processOptions.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
language: defaultLang,
|
|||
|
|
format: defaultFormat,
|
|||
|
|
weekStart: defaultWeekStart,
|
|||
|
|
} = options_defaultOptions;
|
|||
|
|
|
|||
|
|
// Reducer function to filter out invalid day-of-week from the input
|
|||
|
|
function sanitizeDOW(dow, day) {
|
|||
|
|
return dow.length < 6 && day >= 0 && day < 7
|
|||
|
|
? (0,utils/* pushUnique */.$C)(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) {
|
|||
|
|
const date = (0,date_format/* parseDate */.sG)(value, format, locale);
|
|||
|
|
return date !== undefined ? date : origValue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Validate viewId. if invalid, fallback to the original value
|
|||
|
|
function validateViewId(value, origValue, max = 3) {
|
|||
|
|
const viewId = parseInt(value, 10);
|
|||
|
|
return viewId >= 0 && viewId <= max ? viewId : origValue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Create Datepicker configuration to set
|
|||
|
|
function processOptions(options, datepicker) {
|
|||
|
|
const inOpts = Object.assign({}, options);
|
|||
|
|
const config = {};
|
|||
|
|
const locales = datepicker.constructor.locales;
|
|||
|
|
let {
|
|||
|
|
format,
|
|||
|
|
language,
|
|||
|
|
locale,
|
|||
|
|
maxDate,
|
|||
|
|
maxView,
|
|||
|
|
minDate,
|
|||
|
|
pickLevel,
|
|||
|
|
startView,
|
|||
|
|
weekStart,
|
|||
|
|
} = datepicker.config || {};
|
|||
|
|
|
|||
|
|
if (inOpts.language) {
|
|||
|
|
let 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
|
|||
|
|
const 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) {
|
|||
|
|
const hasToDisplay = typeof inOpts.format.toDisplay === 'function';
|
|||
|
|
const hasToValue = typeof inOpts.format.toValue === 'function';
|
|||
|
|
const validFormatString = date_format/* reFormatTokens.test */.CL.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
|
|||
|
|
let minDt = minDate;
|
|||
|
|
let maxDt = maxDate;
|
|||
|
|
if (inOpts.minDate !== undefined) {
|
|||
|
|
minDt = inOpts.minDate === null
|
|||
|
|
? (0,lib_date/* dateValue */.by)(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((dates, dt) => {
|
|||
|
|
const date = (0,date_format/* parseDate */.sG)(dt, format, locale);
|
|||
|
|
return date !== undefined ? (0,utils/* pushUnique */.$C)(dates, date) : dates;
|
|||
|
|
}, []);
|
|||
|
|
delete inOpts.datesDisabled;
|
|||
|
|
}
|
|||
|
|
if (inOpts.defaultViewDate !== undefined) {
|
|||
|
|
const viewDate = (0,date_format/* parseDate */.sG)(inOpts.defaultViewDate, format, locale);
|
|||
|
|
if (viewDate !== undefined) {
|
|||
|
|
config.defaultViewDate = viewDate;
|
|||
|
|
}
|
|||
|
|
delete inOpts.defaultViewDate;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//*** days of week ***//
|
|||
|
|
if (inOpts.weekStart !== undefined) {
|
|||
|
|
const 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) {
|
|||
|
|
const 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 ***//
|
|||
|
|
let newPickLevel = pickLevel;
|
|||
|
|
if (inOpts.pickLevel !== undefined) {
|
|||
|
|
newPickLevel = validateViewId(inOpts.pickLevel, 2);
|
|||
|
|
delete inOpts.pickLevel;
|
|||
|
|
}
|
|||
|
|
if (newPickLevel !== pickLevel) {
|
|||
|
|
pickLevel = config.pickLevel = newPickLevel;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let 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) {
|
|||
|
|
const prevArrow = parseHTML(inOpts.prevArrow);
|
|||
|
|
if (prevArrow.childNodes.length > 0) {
|
|||
|
|
config.prevArrow = prevArrow.childNodes;
|
|||
|
|
}
|
|||
|
|
delete inOpts.prevArrow;
|
|||
|
|
}
|
|||
|
|
if (inOpts.nextArrow) {
|
|||
|
|
const 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) {
|
|||
|
|
const orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
|
|||
|
|
config.orientation = {
|
|||
|
|
x: orientation.find(x => (x === 'left' || x === 'right')) || 'auto',
|
|||
|
|
y: orientation.find(y => (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((key) => {
|
|||
|
|
if (inOpts[key] !== undefined && (0,utils/* hasProperty */.l$)(options_defaultOptions, key)) {
|
|||
|
|
config[key] = inOpts[key];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return config;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/templates/pickerTemplate.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
const pickerTemplate = (0,utils/* optimizeTemplateHTML */.zh)(`<div class="datepicker hidden">
|
|||
|
|
<div class="datepicker-picker inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4">
|
|||
|
|
<div class="datepicker-header">
|
|||
|
|
<div class="datepicker-title bg-white dark:bg-gray-700 dark:text-white px-2 py-3 text-center font-semibold"></div>
|
|||
|
|
<div class="datepicker-controls flex justify-between mb-2">
|
|||
|
|
<button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 prev-btn"></button>
|
|||
|
|
<button type="button" class="text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200 view-switch"></button>
|
|||
|
|
<button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 next-btn"></button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="datepicker-main p-1"></div>
|
|||
|
|
<div class="datepicker-footer">
|
|||
|
|
<div class="datepicker-controls flex space-x-2 mt-2">
|
|||
|
|
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
|
|||
|
|
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>`);
|
|||
|
|
|
|||
|
|
/* harmony default export */ var templates_pickerTemplate = (pickerTemplate);
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/templates/daysTemplate.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
const daysTemplate = (0,utils/* optimizeTemplateHTML */.zh)(`<div class="days">
|
|||
|
|
<div class="days-of-week grid grid-cols-7 mb-1">${(0,utils/* createTagRepeat */.em)('span', 7, {class: 'dow block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm'})}</div>
|
|||
|
|
<div class="datepicker-grid w-64 grid grid-cols-7">${(0,utils/* createTagRepeat */.em)('span', 42 , {class: 'block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400'})}</div>
|
|||
|
|
</div>`);
|
|||
|
|
|
|||
|
|
/* harmony default export */ var templates_daysTemplate = (daysTemplate);
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/templates/calendarWeeksTemplate.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
const calendarWeeksTemplate = (0,utils/* optimizeTemplateHTML */.zh)(`<div class="calendar-weeks">
|
|||
|
|
<div class="days-of-week flex"><span class="dow h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"></span></div>
|
|||
|
|
<div class="weeks">${(0,utils/* createTagRepeat */.em)('span', 6, {class: 'week block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm'})}</div>
|
|||
|
|
</div>`);
|
|||
|
|
|
|||
|
|
/* harmony default export */ var templates_calendarWeeksTemplate = (calendarWeeksTemplate);
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/View.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Base class of the view classes
|
|||
|
|
class View {
|
|||
|
|
constructor(picker, config) {
|
|||
|
|
Object.assign(this, config, {
|
|||
|
|
picker,
|
|||
|
|
element: parseHTML(`<div class="datepicker-view flex"></div>`).firstChild,
|
|||
|
|
selected: [],
|
|||
|
|
});
|
|||
|
|
this.init(this.picker.datepicker.config);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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()
|
|||
|
|
performBeforeHook(el, current, timeValue) {
|
|||
|
|
let 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');
|
|||
|
|
(0,utils/* pushUnique */.$C)(this.disabled, current);
|
|||
|
|
}
|
|||
|
|
if (result.classes) {
|
|||
|
|
const extraClasses = result.classes.split(/\s+/);
|
|||
|
|
el.classList.add(...extraClasses);
|
|||
|
|
if (extraClasses.includes('disabled')) {
|
|||
|
|
(0,utils/* pushUnique */.$C)(this.disabled, current);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (result.content) {
|
|||
|
|
replaceChildNodes(el, result.content);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/DaysView.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
class DaysView extends View {
|
|||
|
|
constructor(picker) {
|
|||
|
|
super(picker, {
|
|||
|
|
id: 0,
|
|||
|
|
name: 'days',
|
|||
|
|
cellClass: 'day',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init(options, onConstruction = true) {
|
|||
|
|
if (onConstruction) {
|
|||
|
|
const inner = parseHTML(templates_daysTemplate).firstChild;
|
|||
|
|
this.dow = inner.firstChild;
|
|||
|
|
this.grid = inner.lastChild;
|
|||
|
|
this.element.appendChild(inner);
|
|||
|
|
}
|
|||
|
|
super.init(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setOptions(options) {
|
|||
|
|
let updateDOW;
|
|||
|
|
|
|||
|
|
if ((0,utils/* hasProperty */.l$)(options, 'minDate')) {
|
|||
|
|
this.minDate = options.minDate;
|
|||
|
|
}
|
|||
|
|
if ((0,utils/* hasProperty */.l$)(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) {
|
|||
|
|
const 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) {
|
|||
|
|
const weeksElem = parseHTML(templates_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((el, index) => {
|
|||
|
|
const 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-gray-500 dark:text-gray-400 cursor-not-allowed' : 'dow text-center h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Apply update on the focused date to view's settings
|
|||
|
|
updateFocus() {
|
|||
|
|
const viewDate = new Date(this.picker.viewDate);
|
|||
|
|
const viewYear = viewDate.getFullYear();
|
|||
|
|
const viewMonth = viewDate.getMonth();
|
|||
|
|
const firstOfMonth = (0,lib_date/* dateValue */.by)(viewYear, viewMonth, 1);
|
|||
|
|
const start = (0,lib_date/* dayOfTheWeekOf */.fr)(firstOfMonth, this.weekStart, this.weekStart);
|
|||
|
|
|
|||
|
|
this.first = firstOfMonth;
|
|||
|
|
this.last = (0,lib_date/* dateValue */.by)(viewYear, viewMonth + 1, 0);
|
|||
|
|
this.start = start;
|
|||
|
|
this.focused = this.picker.viewDate;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Apply update on the selected dates to view's settings
|
|||
|
|
updateSelection() {
|
|||
|
|
const {dates, rangepicker} = this.picker.datepicker;
|
|||
|
|
this.selected = dates;
|
|||
|
|
if (rangepicker) {
|
|||
|
|
this.range = rangepicker.dates;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the entire view UI
|
|||
|
|
render() {
|
|||
|
|
// update today marker on ever render
|
|||
|
|
this.today = this.todayHighlight ? (0,lib_date/* today */.Lg)() : undefined;
|
|||
|
|
// refresh disabled dates on every render in order to clear the ones added
|
|||
|
|
// by beforeShow hook at previous render
|
|||
|
|
this.disabled = [...this.datesDisabled];
|
|||
|
|
|
|||
|
|
const switchLabel = (0,date_format/* formatDate */.p6)(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
|
|||
|
|
const startOfWeek = (0,lib_date/* dayOfTheWeekOf */.fr)(this.first, 1, 1);
|
|||
|
|
Array.from(this.calendarWeeks.weeks.children).forEach((el, index) => {
|
|||
|
|
el.textContent = (0,lib_date/* getWeek */.Qk)((0,lib_date/* addWeeks */.jh)(startOfWeek, index));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
Array.from(this.grid.children).forEach((el, index) => {
|
|||
|
|
const classList = el.classList;
|
|||
|
|
const current = (0,lib_date/* addDays */.E4)(this.start, index);
|
|||
|
|
const date = new Date(current);
|
|||
|
|
const day = date.getDay();
|
|||
|
|
|
|||
|
|
el.className = `datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ${this.cellClass}`;
|
|||
|
|
el.dataset.date = current;
|
|||
|
|
el.textContent = date.getDate();
|
|||
|
|
|
|||
|
|
if (current < this.first) {
|
|||
|
|
classList.add('prev', 'text-gray-500', 'dark:text-white');
|
|||
|
|
} else if (current > this.last) {
|
|||
|
|
classList.add('next', 'text-gray-500', 'dark:text-white');
|
|||
|
|
}
|
|||
|
|
if (this.today === current) {
|
|||
|
|
classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
|
|||
|
|
}
|
|||
|
|
if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {
|
|||
|
|
classList.add('disabled', 'cursor-not-allowed');
|
|||
|
|
}
|
|||
|
|
if (this.daysOfWeekDisabled.includes(day)) {
|
|||
|
|
classList.add('disabled', 'cursor-not-allowed');
|
|||
|
|
(0,utils/* pushUnique */.$C)(this.disabled, current);
|
|||
|
|
}
|
|||
|
|
if (this.daysOfWeekHighlighted.includes(day)) {
|
|||
|
|
classList.add('highlighted');
|
|||
|
|
}
|
|||
|
|
if (this.range) {
|
|||
|
|
const [rangeStart, rangeEnd] = this.range;
|
|||
|
|
if (current > rangeStart && current < rangeEnd) {
|
|||
|
|
classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
|
|||
|
|
classList.remove('rounded-lg', 'rounded-l-lg', 'rounded-r-lg')
|
|||
|
|
}
|
|||
|
|
if (current === rangeStart) {
|
|||
|
|
classList.add('range-start', 'bg-gray-100', 'dark:bg-gray-600', 'rounded-l-lg');
|
|||
|
|
classList.remove('rounded-lg', 'rounded-r-lg');
|
|||
|
|
}
|
|||
|
|
if (current === rangeEnd) {
|
|||
|
|
classList.add('range-end', 'bg-gray-100', 'dark:bg-gray-600', 'rounded-r-lg');
|
|||
|
|
classList.remove('rounded-lg', 'rounded-l-lg');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (this.selected.includes(current)) {
|
|||
|
|
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
|
|||
|
|
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
|
|||
|
|
}
|
|||
|
|
if (current === this.focused) {
|
|||
|
|
classList.add('focused');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.beforeShow) {
|
|||
|
|
this.performBeforeHook(el, current, current);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the view UI by applying the changes of selected and focused items
|
|||
|
|
refresh() {
|
|||
|
|
const [rangeStart, rangeEnd] = this.range || [];
|
|||
|
|
this.grid
|
|||
|
|
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
|
|||
|
|
.forEach((el) => {
|
|||
|
|
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
|
|||
|
|
el.classList.add('text-gray-900', 'rounded-lg', 'dark:text-white');
|
|||
|
|
});
|
|||
|
|
Array.from(this.grid.children).forEach((el) => {
|
|||
|
|
const current = Number(el.dataset.date);
|
|||
|
|
const classList = el.classList;
|
|||
|
|
classList.remove('bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg', 'rounded-r-lg')
|
|||
|
|
if (current > rangeStart && current < rangeEnd) {
|
|||
|
|
classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
|
|||
|
|
classList.remove('rounded-lg');
|
|||
|
|
}
|
|||
|
|
if (current === rangeStart) {
|
|||
|
|
classList.add('range-start', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg');
|
|||
|
|
classList.remove('rounded-lg', 'rounded-r-lg');
|
|||
|
|
}
|
|||
|
|
if (current === rangeEnd) {
|
|||
|
|
classList.add('range-end', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-r-lg');
|
|||
|
|
classList.remove('rounded-lg', 'rounded-l-lg');
|
|||
|
|
}
|
|||
|
|
if (this.selected.includes(current)) {
|
|||
|
|
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
|
|||
|
|
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600');
|
|||
|
|
}
|
|||
|
|
if (current === this.focused) {
|
|||
|
|
classList.add('focused');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the view UI by applying the change of focused item
|
|||
|
|
refreshFocus() {
|
|||
|
|
const index = Math.round((this.focused - this.start) / 86400000);
|
|||
|
|
this.grid.querySelectorAll('.focused').forEach((el) => {
|
|||
|
|
el.classList.remove('focused');
|
|||
|
|
});
|
|||
|
|
this.grid.children[index].classList.add('focused');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/MonthsView.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function computeMonthRange(range, thisYear) {
|
|||
|
|
if (!range || !range[0] || !range[1]) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const [[startY, startM], [endY, endM]] = range;
|
|||
|
|
if (startY > thisYear || endY < thisYear) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
return [
|
|||
|
|
startY === thisYear ? startM : -1,
|
|||
|
|
endY === thisYear ? endM : 12,
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class MonthsView extends View {
|
|||
|
|
constructor(picker) {
|
|||
|
|
super(picker, {
|
|||
|
|
id: 1,
|
|||
|
|
name: 'months',
|
|||
|
|
cellClass: 'month',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init(options, onConstruction = true) {
|
|||
|
|
if (onConstruction) {
|
|||
|
|
this.grid = this.element;
|
|||
|
|
this.element.classList.add('months', 'datepicker-grid', 'w-64', 'grid', 'grid-cols-4');
|
|||
|
|
this.grid.appendChild(parseHTML((0,utils/* createTagRepeat */.em)('span', 12, {'data-month': ix => ix})));
|
|||
|
|
}
|
|||
|
|
super.init(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setOptions(options) {
|
|||
|
|
if (options.locale) {
|
|||
|
|
this.monthNames = options.locale.monthsShort;
|
|||
|
|
}
|
|||
|
|
if ((0,utils/* hasProperty */.l$)(options, 'minDate')) {
|
|||
|
|
if (options.minDate === undefined) {
|
|||
|
|
this.minYear = this.minMonth = this.minDate = undefined;
|
|||
|
|
} else {
|
|||
|
|
const minDateObj = new Date(options.minDate);
|
|||
|
|
this.minYear = minDateObj.getFullYear();
|
|||
|
|
this.minMonth = minDateObj.getMonth();
|
|||
|
|
this.minDate = minDateObj.setDate(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if ((0,utils/* hasProperty */.l$)(options, 'maxDate')) {
|
|||
|
|
if (options.maxDate === undefined) {
|
|||
|
|
this.maxYear = this.maxMonth = this.maxDate = undefined;
|
|||
|
|
} else {
|
|||
|
|
const maxDateObj = new Date(options.maxDate);
|
|||
|
|
this.maxYear = maxDateObj.getFullYear();
|
|||
|
|
this.maxMonth = maxDateObj.getMonth();
|
|||
|
|
this.maxDate = (0,lib_date/* dateValue */.by)(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
|
|||
|
|
updateFocus() {
|
|||
|
|
const viewDate = new Date(this.picker.viewDate);
|
|||
|
|
this.year = viewDate.getFullYear();
|
|||
|
|
this.focused = viewDate.getMonth();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update view's settings to reflect the selected dates
|
|||
|
|
updateSelection() {
|
|||
|
|
const {dates, rangepicker} = this.picker.datepicker;
|
|||
|
|
this.selected = dates.reduce((selected, timeValue) => {
|
|||
|
|
const date = new Date(timeValue);
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = date.getMonth();
|
|||
|
|
if (selected[year] === undefined) {
|
|||
|
|
selected[year] = [month];
|
|||
|
|
} else {
|
|||
|
|
(0,utils/* pushUnique */.$C)(selected[year], month);
|
|||
|
|
}
|
|||
|
|
return selected;
|
|||
|
|
}, {});
|
|||
|
|
if (rangepicker && rangepicker.dates) {
|
|||
|
|
this.range = rangepicker.dates.map(timeValue => {
|
|||
|
|
const date = new Date(timeValue);
|
|||
|
|
return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the entire view UI
|
|||
|
|
render() {
|
|||
|
|
// 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);
|
|||
|
|
|
|||
|
|
const selected = this.selected[this.year] || [];
|
|||
|
|
const yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;
|
|||
|
|
const isMinYear = this.year === this.minYear;
|
|||
|
|
const isMaxYear = this.year === this.maxYear;
|
|||
|
|
const range = computeMonthRange(this.range, this.year);
|
|||
|
|
|
|||
|
|
Array.from(this.grid.children).forEach((el, index) => {
|
|||
|
|
const classList = el.classList;
|
|||
|
|
const date = (0,lib_date/* dateValue */.by)(this.year, index, 1);
|
|||
|
|
|
|||
|
|
el.className = `datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ${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) {
|
|||
|
|
const [rangeStart, rangeEnd] = range;
|
|||
|
|
if (index > rangeStart && index < rangeEnd) {
|
|||
|
|
classList.add('range');
|
|||
|
|
}
|
|||
|
|
if (index === rangeStart) {
|
|||
|
|
classList.add('range-start');
|
|||
|
|
}
|
|||
|
|
if (index === rangeEnd) {
|
|||
|
|
classList.add('range-end');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (selected.includes(index)) {
|
|||
|
|
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
|
|||
|
|
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
|
|||
|
|
}
|
|||
|
|
if (index === this.focused) {
|
|||
|
|
classList.add('focused');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.beforeShow) {
|
|||
|
|
this.performBeforeHook(el, index, date);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the view UI by applying the changes of selected and focused items
|
|||
|
|
refresh() {
|
|||
|
|
const selected = this.selected[this.year] || [];
|
|||
|
|
const [rangeStart, rangeEnd] = computeMonthRange(this.range, this.year) || [];
|
|||
|
|
this.grid
|
|||
|
|
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
|
|||
|
|
.forEach((el) => {
|
|||
|
|
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused');
|
|||
|
|
el.classList.add('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
|
|||
|
|
});
|
|||
|
|
Array.from(this.grid.children).forEach((el, index) => {
|
|||
|
|
const classList = el.classList;
|
|||
|
|
if (index > rangeStart && index < rangeEnd) {
|
|||
|
|
classList.add('range');
|
|||
|
|
}
|
|||
|
|
if (index === rangeStart) {
|
|||
|
|
classList.add('range-start');
|
|||
|
|
}
|
|||
|
|
if (index === rangeEnd) {
|
|||
|
|
classList.add('range-end');
|
|||
|
|
}
|
|||
|
|
if (selected.includes(index)) {
|
|||
|
|
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
|
|||
|
|
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
|
|||
|
|
}
|
|||
|
|
if (index === this.focused) {
|
|||
|
|
classList.add('focused');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the view UI by applying the change of focused item
|
|||
|
|
refreshFocus() {
|
|||
|
|
this.grid.querySelectorAll('.focused').forEach((el) => {
|
|||
|
|
el.classList.remove('focused');
|
|||
|
|
});
|
|||
|
|
this.grid.children[this.focused].classList.add('focused');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/YearsView.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function toTitleCase(word) {
|
|||
|
|
return [...word].reduce((str, ch, ix) => str += ix ? ch : ch.toUpperCase(), '');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Class representing the years and decades view elements
|
|||
|
|
class YearsView extends View {
|
|||
|
|
constructor(picker, config) {
|
|||
|
|
super(picker, config);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init(options, onConstruction = true) {
|
|||
|
|
if (onConstruction) {
|
|||
|
|
this.navStep = this.step * 10;
|
|||
|
|
this.beforeShowOption = `beforeShow${toTitleCase(this.cellClass)}`;
|
|||
|
|
this.grid = this.element;
|
|||
|
|
this.element.classList.add(this.name, 'datepicker-grid', 'w-64', 'grid', 'grid-cols-4');
|
|||
|
|
this.grid.appendChild(parseHTML((0,utils/* createTagRepeat */.em)('span', 12)));
|
|||
|
|
}
|
|||
|
|
super.init(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setOptions(options) {
|
|||
|
|
if ((0,utils/* hasProperty */.l$)(options, 'minDate')) {
|
|||
|
|
if (options.minDate === undefined) {
|
|||
|
|
this.minYear = this.minDate = undefined;
|
|||
|
|
} else {
|
|||
|
|
this.minYear = (0,lib_date/* startOfYearPeriod */.ak)(options.minDate, this.step);
|
|||
|
|
this.minDate = (0,lib_date/* dateValue */.by)(this.minYear, 0, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if ((0,utils/* hasProperty */.l$)(options, 'maxDate')) {
|
|||
|
|
if (options.maxDate === undefined) {
|
|||
|
|
this.maxYear = this.maxDate = undefined;
|
|||
|
|
} else {
|
|||
|
|
this.maxYear = (0,lib_date/* startOfYearPeriod */.ak)(options.maxDate, this.step);
|
|||
|
|
this.maxDate = (0,lib_date/* dateValue */.by)(this.maxYear, 11, 31);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (options[this.beforeShowOption] !== undefined) {
|
|||
|
|
const beforeShow = options[this.beforeShowOption];
|
|||
|
|
this.beforeShow = typeof beforeShow === 'function' ? beforeShow : undefined;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update view's settings to reflect the viewDate set on the picker
|
|||
|
|
updateFocus() {
|
|||
|
|
const viewDate = new Date(this.picker.viewDate);
|
|||
|
|
const first = (0,lib_date/* startOfYearPeriod */.ak)(viewDate, this.navStep);
|
|||
|
|
const last = first + 9 * this.step;
|
|||
|
|
|
|||
|
|
this.first = first;
|
|||
|
|
this.last = last;
|
|||
|
|
this.start = first - this.step;
|
|||
|
|
this.focused = (0,lib_date/* startOfYearPeriod */.ak)(viewDate, this.step);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update view's settings to reflect the selected dates
|
|||
|
|
updateSelection() {
|
|||
|
|
const {dates, rangepicker} = this.picker.datepicker;
|
|||
|
|
this.selected = dates.reduce((years, timeValue) => {
|
|||
|
|
return (0,utils/* pushUnique */.$C)(years, (0,lib_date/* startOfYearPeriod */.ak)(timeValue, this.step));
|
|||
|
|
}, []);
|
|||
|
|
if (rangepicker && rangepicker.dates) {
|
|||
|
|
this.range = rangepicker.dates.map(timeValue => {
|
|||
|
|
if (timeValue !== undefined) {
|
|||
|
|
return (0,lib_date/* startOfYearPeriod */.ak)(timeValue, this.step);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the entire view UI
|
|||
|
|
render() {
|
|||
|
|
// refresh disabled years on every render in order to clear the ones added
|
|||
|
|
// by beforeShow hook at previous render
|
|||
|
|
this.disabled = [];
|
|||
|
|
|
|||
|
|
this.picker.setViewSwitchLabel(`${this.first}-${this.last}`);
|
|||
|
|
this.picker.setPrevBtnDisabled(this.first <= this.minYear);
|
|||
|
|
this.picker.setNextBtnDisabled(this.last >= this.maxYear);
|
|||
|
|
|
|||
|
|
Array.from(this.grid.children).forEach((el, index) => {
|
|||
|
|
const classList = el.classList;
|
|||
|
|
const current = this.start + (index * this.step);
|
|||
|
|
const date = (0,lib_date/* dateValue */.by)(current, 0, 1);
|
|||
|
|
|
|||
|
|
el.className = `datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ${this.cellClass}`;
|
|||
|
|
if (this.isMinView) {
|
|||
|
|
el.dataset.date = date;
|
|||
|
|
}
|
|||
|
|
el.textContent = el.dataset.year = current;
|
|||
|
|
|
|||
|
|
if (index === 0) {
|
|||
|
|
classList.add('prev');
|
|||
|
|
} else if (index === 11) {
|
|||
|
|
classList.add('next');
|
|||
|
|
}
|
|||
|
|
if (current < this.minYear || current > this.maxYear) {
|
|||
|
|
classList.add('disabled');
|
|||
|
|
}
|
|||
|
|
if (this.range) {
|
|||
|
|
const [rangeStart, rangeEnd] = this.range;
|
|||
|
|
if (current > rangeStart && current < rangeEnd) {
|
|||
|
|
classList.add('range');
|
|||
|
|
}
|
|||
|
|
if (current === rangeStart) {
|
|||
|
|
classList.add('range-start');
|
|||
|
|
}
|
|||
|
|
if (current === rangeEnd) {
|
|||
|
|
classList.add('range-end');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (this.selected.includes(current)) {
|
|||
|
|
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
|
|||
|
|
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
|
|||
|
|
}
|
|||
|
|
if (current === this.focused) {
|
|||
|
|
classList.add('focused');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.beforeShow) {
|
|||
|
|
this.performBeforeHook(el, current, date);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the view UI by applying the changes of selected and focused items
|
|||
|
|
refresh() {
|
|||
|
|
const [rangeStart, rangeEnd] = this.range || [];
|
|||
|
|
this.grid
|
|||
|
|
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
|
|||
|
|
.forEach((el) => {
|
|||
|
|
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
|
|||
|
|
});
|
|||
|
|
Array.from(this.grid.children).forEach((el) => {
|
|||
|
|
const current = Number(el.textContent);
|
|||
|
|
const classList = el.classList;
|
|||
|
|
if (current > rangeStart && current < rangeEnd) {
|
|||
|
|
classList.add('range');
|
|||
|
|
}
|
|||
|
|
if (current === rangeStart) {
|
|||
|
|
classList.add('range-start');
|
|||
|
|
}
|
|||
|
|
if (current === rangeEnd) {
|
|||
|
|
classList.add('range-end');
|
|||
|
|
}
|
|||
|
|
if (this.selected.includes(current)) {
|
|||
|
|
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
|
|||
|
|
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
|
|||
|
|
}
|
|||
|
|
if (current === this.focused) {
|
|||
|
|
classList.add('focused');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update the view UI by applying the change of focused item
|
|||
|
|
refreshFocus() {
|
|||
|
|
const index = Math.round((this.focused - this.start) / this.step);
|
|||
|
|
this.grid.querySelectorAll('.focused').forEach((el) => {
|
|||
|
|
el.classList.remove('focused');
|
|||
|
|
});
|
|||
|
|
this.grid.children[index].classList.add('focused');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/events/functions.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function triggerDatepickerEvent(datepicker, type) {
|
|||
|
|
const detail = {
|
|||
|
|
date: datepicker.getDate(),
|
|||
|
|
viewDate: new Date(datepicker.picker.viewDate),
|
|||
|
|
viewId: datepicker.picker.currentView.id,
|
|||
|
|
datepicker,
|
|||
|
|
};
|
|||
|
|
datepicker.element.dispatchEvent(new CustomEvent(type, {detail}));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// direction: -1 (to previous), 1 (to next)
|
|||
|
|
function goToPrevOrNext(datepicker, direction) {
|
|||
|
|
const {minDate, maxDate} = datepicker.config;
|
|||
|
|
const {currentView, viewDate} = datepicker.picker;
|
|||
|
|
let newViewDate;
|
|||
|
|
switch (currentView.id) {
|
|||
|
|
case 0:
|
|||
|
|
newViewDate = (0,lib_date/* addMonths */.zI)(viewDate, direction);
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
newViewDate = (0,lib_date/* addYears */.Bc)(viewDate, direction);
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
newViewDate = (0,lib_date/* addYears */.Bc)(viewDate, direction * currentView.navStep);
|
|||
|
|
}
|
|||
|
|
newViewDate = (0,utils/* limitToRange */.jG)(newViewDate, minDate, maxDate);
|
|||
|
|
datepicker.picker.changeFocus(newViewDate).render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function switchView(datepicker) {
|
|||
|
|
const viewId = datepicker.picker.currentView.id;
|
|||
|
|
if (viewId === datepicker.config.maxView) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
datepicker.picker.changeView(viewId + 1).render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function unfocus(datepicker) {
|
|||
|
|
if (datepicker.config.updateOnBlur) {
|
|||
|
|
datepicker.update({autohide: true});
|
|||
|
|
} else {
|
|||
|
|
datepicker.refresh('input');
|
|||
|
|
datepicker.hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/events/pickerListeners.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function goToSelectedMonthOrYear(datepicker, selection) {
|
|||
|
|
const picker = datepicker.picker;
|
|||
|
|
const viewDate = new Date(picker.viewDate);
|
|||
|
|
const viewId = picker.currentView.id;
|
|||
|
|
const newDate = viewId === 1
|
|||
|
|
? (0,lib_date/* addMonths */.zI)(viewDate, selection - viewDate.getMonth())
|
|||
|
|
: (0,lib_date/* addYears */.Bc)(viewDate, selection - viewDate.getFullYear());
|
|||
|
|
|
|||
|
|
picker.changeFocus(newDate).changeView(viewId - 1).render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClickTodayBtn(datepicker) {
|
|||
|
|
const picker = datepicker.picker;
|
|||
|
|
const currentDate = (0,lib_date/* today */.Lg)();
|
|||
|
|
if (datepicker.config.todayBtnMode === 1) {
|
|||
|
|
if (datepicker.config.autohide) {
|
|||
|
|
datepicker.setDate(currentDate);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
datepicker.setDate(currentDate, {render: false});
|
|||
|
|
picker.update();
|
|||
|
|
}
|
|||
|
|
if (picker.viewDate !== currentDate) {
|
|||
|
|
picker.changeFocus(currentDate);
|
|||
|
|
}
|
|||
|
|
picker.changeView(0).render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClickClearBtn(datepicker) {
|
|||
|
|
datepicker.setDate({clear: true});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClickViewSwitch(datepicker) {
|
|||
|
|
switchView(datepicker);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClickPrevBtn(datepicker) {
|
|||
|
|
goToPrevOrNext(datepicker, -1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClickNextBtn(datepicker) {
|
|||
|
|
goToPrevOrNext(datepicker, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// For the picker's main block to delegete the events from `datepicker-cell`s
|
|||
|
|
function onClickView(datepicker, ev) {
|
|||
|
|
const target = (0,lib_event/* findElementInEventPath */.He)(ev, '.datepicker-cell');
|
|||
|
|
if (!target || target.classList.contains('disabled')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const {id, isMinView} = datepicker.picker.currentView;
|
|||
|
|
if (isMinView) {
|
|||
|
|
datepicker.setDate(Number(target.dataset.date));
|
|||
|
|
} else if (id === 1) {
|
|||
|
|
goToSelectedMonthOrYear(datepicker, Number(target.dataset.month));
|
|||
|
|
} else {
|
|||
|
|
goToSelectedMonthOrYear(datepicker, Number(target.dataset.year));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClickPicker(datepicker) {
|
|||
|
|
if (!datepicker.inline && !datepicker.config.disableTouchKeyboard) {
|
|||
|
|
datepicker.inputField.focus();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/Picker.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function processPickerOptions(picker, options) {
|
|||
|
|
if (options.title !== undefined) {
|
|||
|
|
if (options.title) {
|
|||
|
|
picker.controls.title.textContent = options.title;
|
|||
|
|
showElement(picker.controls.title);
|
|||
|
|
} else {
|
|||
|
|
picker.controls.title.textContent = '';
|
|||
|
|
hideElement(picker.controls.title);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (options.prevArrow) {
|
|||
|
|
const prevBtn = picker.controls.prevBtn;
|
|||
|
|
emptyChildNodes(prevBtn);
|
|||
|
|
options.prevArrow.forEach((node) => {
|
|||
|
|
prevBtn.appendChild(node.cloneNode(true));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (options.nextArrow) {
|
|||
|
|
const nextBtn = picker.controls.nextBtn;
|
|||
|
|
emptyChildNodes(nextBtn);
|
|||
|
|
options.nextArrow.forEach((node) => {
|
|||
|
|
nextBtn.appendChild(node.cloneNode(true));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (options.locale) {
|
|||
|
|
picker.controls.todayBtn.textContent = options.locale.today;
|
|||
|
|
picker.controls.clearBtn.textContent = options.locale.clear;
|
|||
|
|
}
|
|||
|
|
if (options.todayBtn !== undefined) {
|
|||
|
|
if (options.todayBtn) {
|
|||
|
|
showElement(picker.controls.todayBtn);
|
|||
|
|
} else {
|
|||
|
|
hideElement(picker.controls.todayBtn);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if ((0,utils/* hasProperty */.l$)(options, 'minDate') || (0,utils/* hasProperty */.l$)(options, 'maxDate')) {
|
|||
|
|
const {minDate, maxDate} = picker.datepicker.config;
|
|||
|
|
picker.controls.todayBtn.disabled = !(0,utils/* isInRange */.mh)((0,lib_date/* today */.Lg)(), minDate, maxDate);
|
|||
|
|
}
|
|||
|
|
if (options.clearBtn !== undefined) {
|
|||
|
|
if (options.clearBtn) {
|
|||
|
|
showElement(picker.controls.clearBtn);
|
|||
|
|
} else {
|
|||
|
|
hideElement(picker.controls.clearBtn);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Compute view date to reset, which will be...
|
|||
|
|
// - the last item of the selected dates or defaultViewDate if no selection
|
|||
|
|
// - limitted to minDate or maxDate if it exceeds the range
|
|||
|
|
function computeResetViewDate(datepicker) {
|
|||
|
|
const {dates, config} = datepicker;
|
|||
|
|
const viewDate = dates.length > 0 ? (0,utils/* lastItemOf */.Jm)(dates) : config.defaultViewDate;
|
|||
|
|
return (0,utils/* limitToRange */.jG)(viewDate, config.minDate, config.maxDate);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Change current view's view date
|
|||
|
|
function setViewDate(picker, newDate) {
|
|||
|
|
const oldViewDate = new Date(picker.viewDate);
|
|||
|
|
const newViewDate = new Date(newDate);
|
|||
|
|
const {id, year, first, last} = picker.currentView;
|
|||
|
|
const viewYear = newViewDate.getFullYear();
|
|||
|
|
|
|||
|
|
picker.viewDate = newDate;
|
|||
|
|
if (viewYear !== oldViewDate.getFullYear()) {
|
|||
|
|
triggerDatepickerEvent(picker.datepicker, 'changeYear');
|
|||
|
|
}
|
|||
|
|
if (newViewDate.getMonth() !== oldViewDate.getMonth()) {
|
|||
|
|
triggerDatepickerEvent(picker.datepicker, 'changeMonth');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// return whether the new date is in different period on time from the one
|
|||
|
|
// displayed in the current view
|
|||
|
|
// when true, the view needs to be re-rendered on the next UI refresh.
|
|||
|
|
switch (id) {
|
|||
|
|
case 0:
|
|||
|
|
return newDate < first || newDate > last;
|
|||
|
|
case 1:
|
|||
|
|
return viewYear !== year;
|
|||
|
|
default:
|
|||
|
|
return viewYear < first || viewYear > last;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getTextDirection(el) {
|
|||
|
|
return window.getComputedStyle(el).direction;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Class representing the picker UI
|
|||
|
|
class Picker {
|
|||
|
|
constructor(datepicker) {
|
|||
|
|
this.datepicker = datepicker;
|
|||
|
|
|
|||
|
|
const template = templates_pickerTemplate.replace(/%buttonClass%/g, datepicker.config.buttonClass);
|
|||
|
|
const element = this.element = parseHTML(template).firstChild;
|
|||
|
|
const [header, main, footer] = element.firstChild.children;
|
|||
|
|
const title = header.firstElementChild;
|
|||
|
|
const [prevBtn, viewSwitch, nextBtn] = header.lastElementChild.children;
|
|||
|
|
const [todayBtn, clearBtn] = footer.firstChild.children;
|
|||
|
|
const controls = {
|
|||
|
|
title,
|
|||
|
|
prevBtn,
|
|||
|
|
viewSwitch,
|
|||
|
|
nextBtn,
|
|||
|
|
todayBtn,
|
|||
|
|
clearBtn,
|
|||
|
|
};
|
|||
|
|
this.main = main;
|
|||
|
|
this.controls = controls;
|
|||
|
|
|
|||
|
|
const elementClass = datepicker.inline ? 'inline' : 'dropdown';
|
|||
|
|
element.classList.add(`datepicker-${elementClass}`);
|
|||
|
|
elementClass === 'dropdown' ? element.classList.add('dropdown', 'absolute', 'top-0', 'left-0', 'z-50', 'pt-2') : null;
|
|||
|
|
|
|||
|
|
processPickerOptions(this, datepicker.config);
|
|||
|
|
this.viewDate = computeResetViewDate(datepicker);
|
|||
|
|
|
|||
|
|
// set up event listeners
|
|||
|
|
(0,lib_event/* registerListeners */.cF)(datepicker, [
|
|||
|
|
[element, 'click', onClickPicker.bind(null, datepicker), {capture: true}],
|
|||
|
|
[main, 'click', onClickView.bind(null, datepicker)],
|
|||
|
|
[controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
|
|||
|
|
[controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)],
|
|||
|
|
[controls.nextBtn, 'click', onClickNextBtn.bind(null, datepicker)],
|
|||
|
|
[controls.todayBtn, 'click', onClickTodayBtn.bind(null, datepicker)],
|
|||
|
|
[controls.clearBtn, 'click', onClickClearBtn.bind(null, datepicker)],
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// set up views
|
|||
|
|
this.views = [
|
|||
|
|
new DaysView(this),
|
|||
|
|
new MonthsView(this),
|
|||
|
|
new YearsView(this, {id: 2, name: 'years', cellClass: 'year', step: 1}),
|
|||
|
|
new YearsView(this, {id: 3, name: 'decades', cellClass: 'decade', step: 10}),
|
|||
|
|
];
|
|||
|
|
this.currentView = this.views[datepicker.config.startView];
|
|||
|
|
|
|||
|
|
this.currentView.render();
|
|||
|
|
this.main.appendChild(this.currentView.element);
|
|||
|
|
datepicker.config.container.appendChild(this.element);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setOptions(options) {
|
|||
|
|
processPickerOptions(this, options);
|
|||
|
|
this.views.forEach((view) => {
|
|||
|
|
view.init(options, false);
|
|||
|
|
});
|
|||
|
|
this.currentView.render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
detach() {
|
|||
|
|
this.datepicker.config.container.removeChild(this.element);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
show() {
|
|||
|
|
if (this.active) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.element.classList.add('active', 'block');
|
|||
|
|
this.element.classList.remove('hidden');
|
|||
|
|
this.active = true;
|
|||
|
|
|
|||
|
|
const datepicker = this.datepicker;
|
|||
|
|
if (!datepicker.inline) {
|
|||
|
|
// ensure picker's direction matches input's
|
|||
|
|
const inputDirection = getTextDirection(datepicker.inputField);
|
|||
|
|
if (inputDirection !== getTextDirection(datepicker.config.container)) {
|
|||
|
|
this.element.dir = inputDirection;
|
|||
|
|
} else if (this.element.dir) {
|
|||
|
|
this.element.removeAttribute('dir');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.place();
|
|||
|
|
if (datepicker.config.disableTouchKeyboard) {
|
|||
|
|
datepicker.inputField.blur();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
triggerDatepickerEvent(datepicker, 'show');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
hide() {
|
|||
|
|
if (!this.active) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.datepicker.exitEditMode();
|
|||
|
|
this.element.classList.remove('active', 'block');
|
|||
|
|
this.element.classList.add('active', 'block', 'hidden');
|
|||
|
|
this.active = false;
|
|||
|
|
triggerDatepickerEvent(this.datepicker, 'hide');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
place() {
|
|||
|
|
const {classList, style} = this.element;
|
|||
|
|
const {config, inputField} = this.datepicker;
|
|||
|
|
const container = config.container;
|
|||
|
|
const {
|
|||
|
|
width: calendarWidth,
|
|||
|
|
height: calendarHeight,
|
|||
|
|
} = this.element.getBoundingClientRect();
|
|||
|
|
const {
|
|||
|
|
left: containerLeft,
|
|||
|
|
top: containerTop,
|
|||
|
|
width: containerWidth,
|
|||
|
|
} = container.getBoundingClientRect();
|
|||
|
|
const {
|
|||
|
|
left: inputLeft,
|
|||
|
|
top: inputTop,
|
|||
|
|
width: inputWidth,
|
|||
|
|
height: inputHeight
|
|||
|
|
} = inputField.getBoundingClientRect();
|
|||
|
|
let {x: orientX, y: orientY} = config.orientation;
|
|||
|
|
let scrollTop;
|
|||
|
|
let left;
|
|||
|
|
let top;
|
|||
|
|
|
|||
|
|
if (container === document.body) {
|
|||
|
|
scrollTop = window.scrollY;
|
|||
|
|
left = inputLeft + window.scrollX;
|
|||
|
|
top = inputTop + scrollTop;
|
|||
|
|
} else {
|
|||
|
|
scrollTop = container.scrollTop;
|
|||
|
|
left = inputLeft - containerLeft;
|
|||
|
|
top = inputTop - containerTop + scrollTop;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (orientX === 'auto') {
|
|||
|
|
if (left < 0) {
|
|||
|
|
// align to the left and move into visible area if input's left edge < window's
|
|||
|
|
orientX = 'left';
|
|||
|
|
left = 10;
|
|||
|
|
} else if (left + calendarWidth > containerWidth) {
|
|||
|
|
// align to the right if canlendar's right edge > container's
|
|||
|
|
orientX = 'right';
|
|||
|
|
} else {
|
|||
|
|
orientX = getTextDirection(inputField) === 'rtl' ? 'right' : 'left';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (orientX === 'right') {
|
|||
|
|
left -= calendarWidth - inputWidth;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (orientY === 'auto') {
|
|||
|
|
orientY = top - calendarHeight < scrollTop ? 'bottom' : 'top';
|
|||
|
|
}
|
|||
|
|
if (orientY === 'top') {
|
|||
|
|
top -= calendarHeight;
|
|||
|
|
} else {
|
|||
|
|
top += inputHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
classList.remove(
|
|||
|
|
'datepicker-orient-top',
|
|||
|
|
'datepicker-orient-bottom',
|
|||
|
|
'datepicker-orient-right',
|
|||
|
|
'datepicker-orient-left'
|
|||
|
|
);
|
|||
|
|
classList.add(`datepicker-orient-${orientY}`, `datepicker-orient-${orientX}`);
|
|||
|
|
|
|||
|
|
style.top = top ? `${top}px` : top;
|
|||
|
|
style.left = left ? `${left}px` : left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setViewSwitchLabel(labelText) {
|
|||
|
|
this.controls.viewSwitch.textContent = labelText;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setPrevBtnDisabled(disabled) {
|
|||
|
|
this.controls.prevBtn.disabled = disabled;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setNextBtnDisabled(disabled) {
|
|||
|
|
this.controls.nextBtn.disabled = disabled;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
changeView(viewId) {
|
|||
|
|
const oldView = this.currentView;
|
|||
|
|
const newView = this.views[viewId];
|
|||
|
|
if (newView.id !== oldView.id) {
|
|||
|
|
this.currentView = newView;
|
|||
|
|
this._renderMethod = 'render';
|
|||
|
|
triggerDatepickerEvent(this.datepicker, 'changeView');
|
|||
|
|
this.main.replaceChild(newView.element, oldView.element);
|
|||
|
|
}
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Change the focused date (view date)
|
|||
|
|
changeFocus(newViewDate) {
|
|||
|
|
this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refreshFocus';
|
|||
|
|
this.views.forEach((view) => {
|
|||
|
|
view.updateFocus();
|
|||
|
|
});
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Apply the change of the selected dates
|
|||
|
|
update() {
|
|||
|
|
const newViewDate = computeResetViewDate(this.datepicker);
|
|||
|
|
this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refresh';
|
|||
|
|
this.views.forEach((view) => {
|
|||
|
|
view.updateFocus();
|
|||
|
|
view.updateSelection();
|
|||
|
|
});
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Refresh the picker UI
|
|||
|
|
render(quickRender = true) {
|
|||
|
|
const renderMethod = (quickRender && this._renderMethod) || 'render';
|
|||
|
|
delete this._renderMethod;
|
|||
|
|
|
|||
|
|
this.currentView[renderMethod]();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/events/inputFieldListeners.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Find the closest date that doesn't meet the condition for unavailable date
|
|||
|
|
// Returns undefined if no available date is found
|
|||
|
|
// addFn: function to calculate the next date
|
|||
|
|
// - args: time value, amount
|
|||
|
|
// increase: amount to pass to addFn
|
|||
|
|
// testFn: function to test the unavailablity of the date
|
|||
|
|
// - args: time value; retun: true if unavailable
|
|||
|
|
function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
|
|||
|
|
if (!(0,utils/* isInRange */.mh)(date, min, max)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (testFn(date)) {
|
|||
|
|
const newDate = addFn(date, increase);
|
|||
|
|
return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);
|
|||
|
|
}
|
|||
|
|
return date;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// direction: -1 (left/up), 1 (right/down)
|
|||
|
|
// vertical: true for up/down, false for left/right
|
|||
|
|
function moveByArrowKey(datepicker, ev, direction, vertical) {
|
|||
|
|
const picker = datepicker.picker;
|
|||
|
|
const currentView = picker.currentView;
|
|||
|
|
const step = currentView.step || 1;
|
|||
|
|
let viewDate = picker.viewDate;
|
|||
|
|
let addFn;
|
|||
|
|
let testFn;
|
|||
|
|
switch (currentView.id) {
|
|||
|
|
case 0:
|
|||
|
|
if (vertical) {
|
|||
|
|
viewDate = (0,lib_date/* addDays */.E4)(viewDate, direction * 7);
|
|||
|
|
} else if (ev.ctrlKey || ev.metaKey) {
|
|||
|
|
viewDate = (0,lib_date/* addYears */.Bc)(viewDate, direction);
|
|||
|
|
} else {
|
|||
|
|
viewDate = (0,lib_date/* addDays */.E4)(viewDate, direction);
|
|||
|
|
}
|
|||
|
|
addFn = lib_date/* addDays */.E4;
|
|||
|
|
testFn = (date) => currentView.disabled.includes(date);
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
viewDate = (0,lib_date/* addMonths */.zI)(viewDate, vertical ? direction * 4 : direction);
|
|||
|
|
addFn = lib_date/* addMonths */.zI;
|
|||
|
|
testFn = (date) => {
|
|||
|
|
const dt = new Date(date);
|
|||
|
|
const {year, disabled} = currentView;
|
|||
|
|
return dt.getFullYear() === year && disabled.includes(dt.getMonth());
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
viewDate = (0,lib_date/* addYears */.Bc)(viewDate, direction * (vertical ? 4 : 1) * step);
|
|||
|
|
addFn = lib_date/* addYears */.Bc;
|
|||
|
|
testFn = date => currentView.disabled.includes((0,lib_date/* startOfYearPeriod */.ak)(date, step));
|
|||
|
|
}
|
|||
|
|
viewDate = findNextAvailableOne(
|
|||
|
|
viewDate,
|
|||
|
|
addFn,
|
|||
|
|
direction < 0 ? -step : step,
|
|||
|
|
testFn,
|
|||
|
|
currentView.minDate,
|
|||
|
|
currentView.maxDate
|
|||
|
|
);
|
|||
|
|
if (viewDate !== undefined) {
|
|||
|
|
picker.changeFocus(viewDate).render();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onKeydown(datepicker, ev) {
|
|||
|
|
if (ev.key === 'Tab') {
|
|||
|
|
unfocus(datepicker);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const picker = datepicker.picker;
|
|||
|
|
const {id, isMinView} = picker.currentView;
|
|||
|
|
if (!picker.active) {
|
|||
|
|
switch (ev.key) {
|
|||
|
|
case 'ArrowDown':
|
|||
|
|
case 'Escape':
|
|||
|
|
picker.show();
|
|||
|
|
break;
|
|||
|
|
case 'Enter':
|
|||
|
|
datepicker.update();
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
} else if (datepicker.editMode) {
|
|||
|
|
switch (ev.key) {
|
|||
|
|
case 'Escape':
|
|||
|
|
picker.hide();
|
|||
|
|
break;
|
|||
|
|
case 'Enter':
|
|||
|
|
datepicker.exitEditMode({update: true, autohide: datepicker.config.autohide});
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
switch (ev.key) {
|
|||
|
|
case 'Escape':
|
|||
|
|
picker.hide();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
if (ev.ctrlKey || ev.metaKey) {
|
|||
|
|
goToPrevOrNext(datepicker, -1);
|
|||
|
|
} else if (ev.shiftKey) {
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
moveByArrowKey(datepicker, ev, -1, false);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
if (ev.ctrlKey || ev.metaKey) {
|
|||
|
|
goToPrevOrNext(datepicker, 1);
|
|||
|
|
} else if (ev.shiftKey) {
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
moveByArrowKey(datepicker, ev, 1, false);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ArrowUp':
|
|||
|
|
if (ev.ctrlKey || ev.metaKey) {
|
|||
|
|
switchView(datepicker);
|
|||
|
|
} else if (ev.shiftKey) {
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
moveByArrowKey(datepicker, ev, -1, true);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ArrowDown':
|
|||
|
|
if (ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
moveByArrowKey(datepicker, ev, 1, true);
|
|||
|
|
break;
|
|||
|
|
case 'Enter':
|
|||
|
|
if (isMinView) {
|
|||
|
|
datepicker.setDate(picker.viewDate);
|
|||
|
|
} else {
|
|||
|
|
picker.changeView(id - 1).render();
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'Backspace':
|
|||
|
|
case 'Delete':
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
return;
|
|||
|
|
default:
|
|||
|
|
if (ev.key.length === 1 && !ev.ctrlKey && !ev.metaKey) {
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ev.preventDefault();
|
|||
|
|
ev.stopPropagation();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onFocus(datepicker) {
|
|||
|
|
if (datepicker.config.showOnFocus && !datepicker._showing) {
|
|||
|
|
datepicker.show();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// for the prevention for entering edit mode while getting focus on click
|
|||
|
|
function onMousedown(datepicker, ev) {
|
|||
|
|
const el = ev.target;
|
|||
|
|
if (datepicker.picker.active || datepicker.config.showOnClick) {
|
|||
|
|
el._active = el === document.activeElement;
|
|||
|
|
el._clicking = setTimeout(() => {
|
|||
|
|
delete el._active;
|
|||
|
|
delete el._clicking;
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClickInput(datepicker, ev) {
|
|||
|
|
const el = ev.target;
|
|||
|
|
if (!el._clicking) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
clearTimeout(el._clicking);
|
|||
|
|
delete el._clicking;
|
|||
|
|
|
|||
|
|
if (el._active) {
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
}
|
|||
|
|
delete el._active;
|
|||
|
|
|
|||
|
|
if (datepicker.config.showOnClick) {
|
|||
|
|
datepicker.show();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onPaste(datepicker, ev) {
|
|||
|
|
if (ev.clipboardData.types.includes('text/plain')) {
|
|||
|
|
datepicker.enterEditMode();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/events/otherListeners.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// for the `document` to delegate the events from outside the picker/input field
|
|||
|
|
function onClickOutside(datepicker, ev) {
|
|||
|
|
const element = datepicker.element;
|
|||
|
|
if (element !== document.activeElement) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const pickerElem = datepicker.picker.element;
|
|||
|
|
if ((0,lib_event/* findElementInEventPath */.He)(ev, el => el === element || el === pickerElem)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
unfocus(datepicker);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/Datepicker.js
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function stringifyDates(dates, config) {
|
|||
|
|
return dates
|
|||
|
|
.map(dt => (0,date_format/* formatDate */.p6)(dt, config.format, config.locale))
|
|||
|
|
.join(config.dateDelimiter);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// parse input dates and create an array of time values for selection
|
|||
|
|
// returns undefined if there are no valid dates in inputDates
|
|||
|
|
// when origDates (current selection) is passed, the function works to mix
|
|||
|
|
// the input dates into the current selection
|
|||
|
|
function processInputDates(datepicker, inputDates, clear = false) {
|
|||
|
|
const {config, dates: origDates, rangepicker} = datepicker;
|
|||
|
|
if (inputDates.length === 0) {
|
|||
|
|
// empty input is considered valid unless origiDates is passed
|
|||
|
|
return clear ? [] : undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rangeEnd = rangepicker && datepicker === rangepicker.datepickers[1];
|
|||
|
|
let newDates = inputDates.reduce((dates, dt) => {
|
|||
|
|
let date = (0,date_format/* parseDate */.sG)(dt, config.format, config.locale);
|
|||
|
|
if (date === undefined) {
|
|||
|
|
return dates;
|
|||
|
|
}
|
|||
|
|
if (config.pickLevel > 0) {
|
|||
|
|
// adjust to 1st of the month/Jan 1st of the year
|
|||
|
|
// or to the last day of the monh/Dec 31st of the year if the datepicker
|
|||
|
|
// is the range-end picker of a rangepicker
|
|||
|
|
const dt = new Date(date);
|
|||
|
|
if (config.pickLevel === 1) {
|
|||
|
|
date = rangeEnd
|
|||
|
|
? dt.setMonth(dt.getMonth() + 1, 0)
|
|||
|
|
: dt.setDate(1);
|
|||
|
|
} else {
|
|||
|
|
date = rangeEnd
|
|||
|
|
? dt.setFullYear(dt.getFullYear() + 1, 0, 0)
|
|||
|
|
: dt.setMonth(0, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
(0,utils/* isInRange */.mh)(date, config.minDate, config.maxDate)
|
|||
|
|
&& !dates.includes(date)
|
|||
|
|
&& !config.datesDisabled.includes(date)
|
|||
|
|
&& !config.daysOfWeekDisabled.includes(new Date(date).getDay())
|
|||
|
|
) {
|
|||
|
|
dates.push(date);
|
|||
|
|
}
|
|||
|
|
return dates;
|
|||
|
|
}, []);
|
|||
|
|
if (newDates.length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (config.multidate && !clear) {
|
|||
|
|
// get the synmetric difference between origDates and newDates
|
|||
|
|
newDates = newDates.reduce((dates, date) => {
|
|||
|
|
if (!origDates.includes(date)) {
|
|||
|
|
dates.push(date);
|
|||
|
|
}
|
|||
|
|
return dates;
|
|||
|
|
}, origDates.filter(date => !newDates.includes(date)));
|
|||
|
|
}
|
|||
|
|
// do length check always because user can input multiple dates regardless of the mode
|
|||
|
|
return config.maxNumberOfDates && newDates.length > config.maxNumberOfDates
|
|||
|
|
? newDates.slice(config.maxNumberOfDates * -1)
|
|||
|
|
: newDates;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// refresh the UI elements
|
|||
|
|
// modes: 1: input only, 2, picker only, 3 both
|
|||
|
|
function refreshUI(datepicker, mode = 3, quickRender = true) {
|
|||
|
|
const {config, picker, inputField} = datepicker;
|
|||
|
|
if (mode & 2) {
|
|||
|
|
const newView = picker.active ? config.pickLevel : config.startView;
|
|||
|
|
picker.update().changeView(newView).render(quickRender);
|
|||
|
|
}
|
|||
|
|
if (mode & 1 && inputField) {
|
|||
|
|
inputField.value = stringifyDates(datepicker.dates, config);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setDate(datepicker, inputDates, options) {
|
|||
|
|
let {clear, render, autohide} = options;
|
|||
|
|
if (render === undefined) {
|
|||
|
|
render = true;
|
|||
|
|
}
|
|||
|
|
if (!render) {
|
|||
|
|
autohide = false;
|
|||
|
|
} else if (autohide === undefined) {
|
|||
|
|
autohide = datepicker.config.autohide;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const newDates = processInputDates(datepicker, inputDates, clear);
|
|||
|
|
if (!newDates) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (newDates.toString() !== datepicker.dates.toString()) {
|
|||
|
|
datepicker.dates = newDates;
|
|||
|
|
refreshUI(datepicker, render ? 3 : 1);
|
|||
|
|
triggerDatepickerEvent(datepicker, 'changeDate');
|
|||
|
|
} else {
|
|||
|
|
refreshUI(datepicker, 1);
|
|||
|
|
}
|
|||
|
|
if (autohide) {
|
|||
|
|
datepicker.hide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Class representing a date picker
|
|||
|
|
*/
|
|||
|
|
class Datepicker {
|
|||
|
|
/**
|
|||
|
|
* Create a date picker
|
|||
|
|
* @param {Element} element - element to bind a date picker
|
|||
|
|
* @param {Object} [options] - config options
|
|||
|
|
* @param {DateRangePicker} [rangepicker] - DateRangePicker instance the
|
|||
|
|
* date picker belongs to. Use this only when creating date picker as a part
|
|||
|
|
* of date range picker
|
|||
|
|
*/
|
|||
|
|
constructor(element, options = {}, rangepicker = undefined) {
|
|||
|
|
element.datepicker = this;
|
|||
|
|
this.element = element;
|
|||
|
|
|
|||
|
|
// set up config
|
|||
|
|
const config = this.config = Object.assign({
|
|||
|
|
buttonClass: (options.buttonClass && String(options.buttonClass)) || 'button',
|
|||
|
|
container: document.body,
|
|||
|
|
defaultViewDate: (0,lib_date/* today */.Lg)(),
|
|||
|
|
maxDate: undefined,
|
|||
|
|
minDate: undefined,
|
|||
|
|
}, processOptions(options_defaultOptions, this));
|
|||
|
|
this._options = options;
|
|||
|
|
Object.assign(config, processOptions(options, this));
|
|||
|
|
|
|||
|
|
// configure by type
|
|||
|
|
const inline = this.inline = element.tagName !== 'INPUT';
|
|||
|
|
let inputField;
|
|||
|
|
let initialDates;
|
|||
|
|
|
|||
|
|
if (inline) {
|
|||
|
|
config.container = element;
|
|||
|
|
initialDates = (0,utils/* stringToArray */.W7)(element.dataset.date, config.dateDelimiter);
|
|||
|
|
delete element.dataset.date;
|
|||
|
|
} else {
|
|||
|
|
const container = options.container ? document.querySelector(options.container) : null;
|
|||
|
|
if (container) {
|
|||
|
|
config.container = container;
|
|||
|
|
}
|
|||
|
|
inputField = this.inputField = element;
|
|||
|
|
inputField.classList.add('datepicker-input');
|
|||
|
|
initialDates = (0,utils/* stringToArray */.W7)(inputField.value, config.dateDelimiter);
|
|||
|
|
}
|
|||
|
|
if (rangepicker) {
|
|||
|
|
// check validiry
|
|||
|
|
const index = rangepicker.inputs.indexOf(inputField);
|
|||
|
|
const datepickers = rangepicker.datepickers;
|
|||
|
|
if (index < 0 || index > 1 || !Array.isArray(datepickers)) {
|
|||
|
|
throw Error('Invalid rangepicker object.');
|
|||
|
|
}
|
|||
|
|
// attach itaelf to the rangepicker here so that processInputDates() can
|
|||
|
|
// determine if this is the range-end picker of the rangepicker while
|
|||
|
|
// setting inital values when pickLevel > 0
|
|||
|
|
datepickers[index] = this;
|
|||
|
|
// add getter for rangepicker
|
|||
|
|
Object.defineProperty(this, 'rangepicker', {
|
|||
|
|
get() {
|
|||
|
|
return rangepicker;
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// set initial dates
|
|||
|
|
this.dates = [];
|
|||
|
|
// process initial value
|
|||
|
|
const inputDateValues = processInputDates(this, initialDates);
|
|||
|
|
if (inputDateValues && inputDateValues.length > 0) {
|
|||
|
|
this.dates = inputDateValues;
|
|||
|
|
}
|
|||
|
|
if (inputField) {
|
|||
|
|
inputField.value = stringifyDates(this.dates, config);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const picker = this.picker = new Picker(this);
|
|||
|
|
|
|||
|
|
if (inline) {
|
|||
|
|
this.show();
|
|||
|
|
} else {
|
|||
|
|
// set up event listeners in other modes
|
|||
|
|
const onMousedownDocument = onClickOutside.bind(null, this);
|
|||
|
|
const listeners = [
|
|||
|
|
[inputField, 'keydown', onKeydown.bind(null, this)],
|
|||
|
|
[inputField, 'focus', onFocus.bind(null, this)],
|
|||
|
|
[inputField, 'mousedown', onMousedown.bind(null, this)],
|
|||
|
|
[inputField, 'click', onClickInput.bind(null, this)],
|
|||
|
|
[inputField, 'paste', onPaste.bind(null, this)],
|
|||
|
|
[document, 'mousedown', onMousedownDocument],
|
|||
|
|
[document, 'touchstart', onMousedownDocument],
|
|||
|
|
[window, 'resize', picker.place.bind(picker)]
|
|||
|
|
];
|
|||
|
|
(0,lib_event/* registerListeners */.cF)(this, listeners);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Format Date object or time value in given format and language
|
|||
|
|
* @param {Date|Number} date - date or time value to format
|
|||
|
|
* @param {String|Object} format - format string or object that contains
|
|||
|
|
* toDisplay() custom formatter, whose signature is
|
|||
|
|
* - args:
|
|||
|
|
* - date: {Date} - Date instance of the date passed to the method
|
|||
|
|
* - format: {Object} - the format object passed to the method
|
|||
|
|
* - locale: {Object} - locale for the language specified by `lang`
|
|||
|
|
* - return:
|
|||
|
|
* {String} formatted date
|
|||
|
|
* @param {String} [lang=en] - language code for the locale to use
|
|||
|
|
* @return {String} formatted date
|
|||
|
|
*/
|
|||
|
|
static formatDate(date, format, lang) {
|
|||
|
|
return (0,date_format/* formatDate */.p6)(date, format, lang && locales[lang] || locales.en);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Parse date string
|
|||
|
|
* @param {String|Date|Number} dateStr - date string, Date object or time
|
|||
|
|
* value to parse
|
|||
|
|
* @param {String|Object} format - format string or object that contains
|
|||
|
|
* toValue() custom parser, whose signature is
|
|||
|
|
* - args:
|
|||
|
|
* - dateStr: {String|Date|Number} - the dateStr passed to the method
|
|||
|
|
* - format: {Object} - the format object passed to the method
|
|||
|
|
* - locale: {Object} - locale for the language specified by `lang`
|
|||
|
|
* - return:
|
|||
|
|
* {Date|Number} parsed date or its time value
|
|||
|
|
* @param {String} [lang=en] - language code for the locale to use
|
|||
|
|
* @return {Number} time value of parsed date
|
|||
|
|
*/
|
|||
|
|
static parseDate(dateStr, format, lang) {
|
|||
|
|
return (0,date_format/* parseDate */.sG)(dateStr, format, lang && locales[lang] || locales.en);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @type {Object} - Installed locales in `[languageCode]: localeObject` format
|
|||
|
|
* en`:_English (US)_ is pre-installed.
|
|||
|
|
*/
|
|||
|
|
static get locales() {
|
|||
|
|
return locales;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @type {Boolean} - Whether the picker element is shown. `true` whne shown
|
|||
|
|
*/
|
|||
|
|
get active() {
|
|||
|
|
return !!(this.picker && this.picker.active);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @type {HTMLDivElement} - DOM object of picker element
|
|||
|
|
*/
|
|||
|
|
get pickerElement() {
|
|||
|
|
return this.picker ? this.picker.element : undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Set new values to the config options
|
|||
|
|
* @param {Object} options - config options to update
|
|||
|
|
*/
|
|||
|
|
setOptions(options) {
|
|||
|
|
const picker = this.picker;
|
|||
|
|
const newOptions = processOptions(options, this);
|
|||
|
|
Object.assign(this._options, options);
|
|||
|
|
Object.assign(this.config, newOptions);
|
|||
|
|
picker.setOptions(newOptions);
|
|||
|
|
|
|||
|
|
refreshUI(this, 3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Show the picker element
|
|||
|
|
*/
|
|||
|
|
show() {
|
|||
|
|
if (this.inputField) {
|
|||
|
|
if (this.inputField.disabled) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.inputField !== document.activeElement) {
|
|||
|
|
this._showing = true;
|
|||
|
|
this.inputField.focus();
|
|||
|
|
delete this._showing;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.picker.show();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Hide the picker element
|
|||
|
|
* Not available on inline picker
|
|||
|
|
*/
|
|||
|
|
hide() {
|
|||
|
|
if (this.inline) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.picker.hide();
|
|||
|
|
this.picker.update().changeView(this.config.startView).render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Destroy the Datepicker instance
|
|||
|
|
* @return {Detepicker} - the instance destroyed
|
|||
|
|
*/
|
|||
|
|
destroy() {
|
|||
|
|
this.hide();
|
|||
|
|
(0,lib_event/* unregisterListeners */.uV)(this);
|
|||
|
|
this.picker.detach();
|
|||
|
|
if (!this.inline) {
|
|||
|
|
this.inputField.classList.remove('datepicker-input');
|
|||
|
|
}
|
|||
|
|
delete this.element.datepicker;
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Get the selected date(s)
|
|||
|
|
*
|
|||
|
|
* The method returns a Date object of selected date by default, and returns
|
|||
|
|
* an array of selected dates in multidate mode. If format string is passed,
|
|||
|
|
* it returns date string(s) formatted in given format.
|
|||
|
|
*
|
|||
|
|
* @param {String} [format] - Format string to stringify the date(s)
|
|||
|
|
* @return {Date|String|Date[]|String[]} - selected date(s), or if none is
|
|||
|
|
* selected, empty array in multidate mode and untitled in sigledate mode
|
|||
|
|
*/
|
|||
|
|
getDate(format = undefined) {
|
|||
|
|
const callback = format
|
|||
|
|
? date => (0,date_format/* formatDate */.p6)(date, format, this.config.locale)
|
|||
|
|
: date => new Date(date);
|
|||
|
|
|
|||
|
|
if (this.config.multidate) {
|
|||
|
|
return this.dates.map(callback);
|
|||
|
|
}
|
|||
|
|
if (this.dates.length > 0) {
|
|||
|
|
return callback(this.dates[0]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Set selected date(s)
|
|||
|
|
*
|
|||
|
|
* In multidate mode, you can pass multiple dates as a series of arguments
|
|||
|
|
* or an array. (Since each date is parsed individually, the type of the
|
|||
|
|
* dates doesn't have to be the same.)
|
|||
|
|
* The given dates are used to toggle the select status of each date. The
|
|||
|
|
* number of selected dates is kept from exceeding the length set to
|
|||
|
|
* maxNumberOfDates.
|
|||
|
|
*
|
|||
|
|
* With clear: true option, the method can be used to clear the selection
|
|||
|
|
* and to replace the selection instead of toggling in multidate mode.
|
|||
|
|
* If the option is passed with no date arguments or an empty dates array,
|
|||
|
|
* it works as "clear" (clear the selection then set nothing), and if the
|
|||
|
|
* option is passed with new dates to select, it works as "replace" (clear
|
|||
|
|
* the selection then set the given dates)
|
|||
|
|
*
|
|||
|
|
* When render: false option is used, the method omits re-rendering the
|
|||
|
|
* picker element. In this case, you need to call refresh() method later in
|
|||
|
|
* order for the picker element to reflect the changes. The input field is
|
|||
|
|
* refreshed always regardless of this option.
|
|||
|
|
*
|
|||
|
|
* When invalid (unparsable, repeated, disabled or out-of-range) dates are
|
|||
|
|
* passed, the method ignores them and applies only valid ones. In the case
|
|||
|
|
* that all the given dates are invalid, which is distinguished from passing
|
|||
|
|
* no dates, the method considers it as an error and leaves the selection
|
|||
|
|
* untouched.
|
|||
|
|
*
|
|||
|
|
* @param {...(Date|Number|String)|Array} [dates] - Date strings, Date
|
|||
|
|
* objects, time values or mix of those for new selection
|
|||
|
|
* @param {Object} [options] - function options
|
|||
|
|
* - clear: {boolean} - Whether to clear the existing selection
|
|||
|
|
* defualt: false
|
|||
|
|
* - render: {boolean} - Whether to re-render the picker element
|
|||
|
|
* default: true
|
|||
|
|
* - autohide: {boolean} - Whether to hide the picker element after re-render
|
|||
|
|
* Ignored when used with render: false
|
|||
|
|
* default: config.autohide
|
|||
|
|
*/
|
|||
|
|
setDate(...args) {
|
|||
|
|
const dates = [...args];
|
|||
|
|
const opts = {};
|
|||
|
|
const lastArg = (0,utils/* lastItemOf */.Jm)(args);
|
|||
|
|
if (
|
|||
|
|
typeof lastArg === 'object'
|
|||
|
|
&& !Array.isArray(lastArg)
|
|||
|
|
&& !(lastArg instanceof Date)
|
|||
|
|
&& lastArg
|
|||
|
|
) {
|
|||
|
|
Object.assign(opts, dates.pop());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const inputDates = Array.isArray(dates[0]) ? dates[0] : dates;
|
|||
|
|
setDate(this, inputDates, opts);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Update the selected date(s) with input field's value
|
|||
|
|
* Not available on inline picker
|
|||
|
|
*
|
|||
|
|
* The input field will be refreshed with properly formatted date string.
|
|||
|
|
*
|
|||
|
|
* @param {Object} [options] - function options
|
|||
|
|
* - autohide: {boolean} - whether to hide the picker element after refresh
|
|||
|
|
* default: false
|
|||
|
|
*/
|
|||
|
|
update(options = undefined) {
|
|||
|
|
if (this.inline) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const opts = {clear: true, autohide: !!(options && options.autohide)};
|
|||
|
|
const inputDates = (0,utils/* stringToArray */.W7)(this.inputField.value, this.config.dateDelimiter);
|
|||
|
|
setDate(this, inputDates, opts);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Refresh the picker element and the associated input field
|
|||
|
|
* @param {String} [target] - target item when refreshing one item only
|
|||
|
|
* 'picker' or 'input'
|
|||
|
|
* @param {Boolean} [forceRender] - whether to re-render the picker element
|
|||
|
|
* regardless of its state instead of optimized refresh
|
|||
|
|
*/
|
|||
|
|
refresh(target = undefined, forceRender = false) {
|
|||
|
|
if (target && typeof target !== 'string') {
|
|||
|
|
forceRender = target;
|
|||
|
|
target = undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let mode;
|
|||
|
|
if (target === 'picker') {
|
|||
|
|
mode = 2;
|
|||
|
|
} else if (target === 'input') {
|
|||
|
|
mode = 1;
|
|||
|
|
} else {
|
|||
|
|
mode = 3;
|
|||
|
|
}
|
|||
|
|
refreshUI(this, mode, !forceRender);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Enter edit mode
|
|||
|
|
* Not available on inline picker or when the picker element is hidden
|
|||
|
|
*/
|
|||
|
|
enterEditMode() {
|
|||
|
|
if (this.inline || !this.picker.active || this.editMode) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.editMode = true;
|
|||
|
|
this.inputField.classList.add('in-edit', 'border-blue-700');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Exit from edit mode
|
|||
|
|
* Not available on inline picker
|
|||
|
|
* @param {Object} [options] - function options
|
|||
|
|
* - update: {boolean} - whether to call update() after exiting
|
|||
|
|
* If false, input field is revert to the existing selection
|
|||
|
|
* default: false
|
|||
|
|
*/
|
|||
|
|
exitEditMode(options = undefined) {
|
|||
|
|
if (this.inline || !this.editMode) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const opts = Object.assign({update: false}, options);
|
|||
|
|
delete this.editMode;
|
|||
|
|
this.inputField.classList.remove('in-edit', 'border-blue-700');
|
|||
|
|
if (opts.update) {
|
|||
|
|
this.update(opts);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 963:
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "CL": function() { return /* binding */ reFormatTokens; },
|
|||
|
|
/* harmony export */ "p6": function() { return /* binding */ formatDate; },
|
|||
|
|
/* harmony export */ "sG": function() { return /* binding */ parseDate; }
|
|||
|
|
/* harmony export */ });
|
|||
|
|
/* unused harmony export reNonDateParts */
|
|||
|
|
/* harmony import */ var _date_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(560);
|
|||
|
|
/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(105);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// pattern for format parts
|
|||
|
|
const reFormatTokens = /dd?|DD?|mm?|MM?|yy?(?:yy)?/;
|
|||
|
|
// pattern for non date parts
|
|||
|
|
const reNonDateParts = /[\s!-/:-@[-`{-~年月日]+/;
|
|||
|
|
// cache for persed formats
|
|||
|
|
let knownFormats = {};
|
|||
|
|
// parse funtions for date parts
|
|||
|
|
const parseFns = {
|
|||
|
|
y(date, year) {
|
|||
|
|
return new Date(date).setFullYear(parseInt(year, 10));
|
|||
|
|
},
|
|||
|
|
m(date, month, locale) {
|
|||
|
|
const newDate = new Date(date);
|
|||
|
|
let monthIndex = parseInt(month, 10) - 1;
|
|||
|
|
|
|||
|
|
if (isNaN(monthIndex)) {
|
|||
|
|
if (!month) {
|
|||
|
|
return NaN;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const monthName = month.toLowerCase();
|
|||
|
|
const compareNames = name => 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(date, day) {
|
|||
|
|
return new Date(date).setDate(parseInt(day, 10));
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
// format functions for date parts
|
|||
|
|
const formatFns = {
|
|||
|
|
d(date) {
|
|||
|
|
return date.getDate();
|
|||
|
|
},
|
|||
|
|
dd(date) {
|
|||
|
|
return padZero(date.getDate(), 2);
|
|||
|
|
},
|
|||
|
|
D(date, locale) {
|
|||
|
|
return locale.daysShort[date.getDay()];
|
|||
|
|
},
|
|||
|
|
DD(date, locale) {
|
|||
|
|
return locale.days[date.getDay()];
|
|||
|
|
},
|
|||
|
|
m(date) {
|
|||
|
|
return date.getMonth() + 1;
|
|||
|
|
},
|
|||
|
|
mm(date) {
|
|||
|
|
return padZero(date.getMonth() + 1, 2);
|
|||
|
|
},
|
|||
|
|
M(date, locale) {
|
|||
|
|
return locale.monthsShort[date.getMonth()];
|
|||
|
|
},
|
|||
|
|
MM(date, locale) {
|
|||
|
|
return locale.months[date.getMonth()];
|
|||
|
|
},
|
|||
|
|
y(date) {
|
|||
|
|
return date.getFullYear();
|
|||
|
|
},
|
|||
|
|
yy(date) {
|
|||
|
|
return padZero(date.getFullYear(), 2).slice(-2);
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
const separators = format.split(reFormatTokens);
|
|||
|
|
const 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
|
|||
|
|
const partFormatters = parts.map(token => formatFns[token]);
|
|||
|
|
|
|||
|
|
// collect parse function keys used in the format
|
|||
|
|
// iterate over parseFns' keys in order to keep the order of the keys.
|
|||
|
|
const partParserKeys = Object.keys(parseFns).reduce((keys, key) => {
|
|||
|
|
const token = parts.find(part => part[0] !== 'D' && part[0].toLowerCase() === key);
|
|||
|
|
if (token) {
|
|||
|
|
keys.push(key);
|
|||
|
|
}
|
|||
|
|
return keys;
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return knownFormats[format] = {
|
|||
|
|
parser(dateStr, locale) {
|
|||
|
|
const dateParts = dateStr.split(reNonDateParts).reduce((dtParts, part, index) => {
|
|||
|
|
if (part.length > 0 && parts[index]) {
|
|||
|
|
const 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((origDate, key) => {
|
|||
|
|
const newDate = parseFns[key](origDate, dateParts[key], locale);
|
|||
|
|
// ingnore the part failed to parse
|
|||
|
|
return isNaN(newDate) ? origDate : newDate;
|
|||
|
|
}, (0,_date_js__WEBPACK_IMPORTED_MODULE_0__/* .today */ .Lg)());
|
|||
|
|
},
|
|||
|
|
formatter(date, locale) {
|
|||
|
|
let dateStr = partFormatters.reduce((str, fn, index) => {
|
|||
|
|
return str += `${separators[index]}${fn(date, locale)}`;
|
|||
|
|
}, '');
|
|||
|
|
// separators' length is always parts' length + 1,
|
|||
|
|
return dateStr += (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__/* .lastItemOf */ .Jm)(separators);
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function parseDate(dateStr, format, locale) {
|
|||
|
|
if (dateStr instanceof Date || typeof dateStr === 'number') {
|
|||
|
|
const date = (0,_date_js__WEBPACK_IMPORTED_MODULE_0__/* .stripTime */ .xR)(dateStr);
|
|||
|
|
return isNaN(date) ? undefined : date;
|
|||
|
|
}
|
|||
|
|
if (!dateStr) {
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
if (dateStr === 'today') {
|
|||
|
|
return (0,_date_js__WEBPACK_IMPORTED_MODULE_0__/* .today */ .Lg)();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (format && format.toValue) {
|
|||
|
|
const date = format.toValue(dateStr, format, locale);
|
|||
|
|
return isNaN(date) ? undefined : (0,_date_js__WEBPACK_IMPORTED_MODULE_0__/* .stripTime */ .xR)(date);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return parseFormatString(format).parser(dateStr, locale);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDate(date, format, locale) {
|
|||
|
|
if (isNaN(date) || (!date && date !== 0)) {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const dateObj = typeof date === 'number' ? new Date(date) : date;
|
|||
|
|
|
|||
|
|
if (format.toDisplay) {
|
|||
|
|
return format.toDisplay(dateObj, format, locale);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return parseFormatString(format).formatter(dateObj, locale);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 560:
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "Bc": function() { return /* binding */ addYears; },
|
|||
|
|
/* harmony export */ "E4": function() { return /* binding */ addDays; },
|
|||
|
|
/* harmony export */ "Lg": function() { return /* binding */ today; },
|
|||
|
|
/* harmony export */ "Qk": function() { return /* binding */ getWeek; },
|
|||
|
|
/* harmony export */ "ak": function() { return /* binding */ startOfYearPeriod; },
|
|||
|
|
/* harmony export */ "by": function() { return /* binding */ dateValue; },
|
|||
|
|
/* harmony export */ "fr": function() { return /* binding */ dayOfTheWeekOf; },
|
|||
|
|
/* harmony export */ "jh": function() { return /* binding */ addWeeks; },
|
|||
|
|
/* harmony export */ "xR": function() { return /* binding */ stripTime; },
|
|||
|
|
/* harmony export */ "zI": function() { return /* binding */ addMonths; }
|
|||
|
|
/* harmony export */ });
|
|||
|
|
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(...args) {
|
|||
|
|
switch (args.length) {
|
|||
|
|
case 0:
|
|||
|
|
return today();
|
|||
|
|
case 1:
|
|||
|
|
return stripTime(args[0]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// use setFullYear() to keep 2-digit year from being mapped to 1900-1999
|
|||
|
|
const newDate = new Date(0);
|
|||
|
|
newDate.setFullYear(...args);
|
|||
|
|
return newDate.setHours(0, 0, 0, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addDays(date, amount) {
|
|||
|
|
const 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)
|
|||
|
|
const newDate = new Date(date);
|
|||
|
|
const monthsToSet = newDate.getMonth() + amount;
|
|||
|
|
let expectedMonth = monthsToSet % 12;
|
|||
|
|
if (expectedMonth < 0) {
|
|||
|
|
expectedMonth += 12;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const 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.
|
|||
|
|
const newDate = new Date(date);
|
|||
|
|
const expectedMonth = newDate.getMonth();
|
|||
|
|
const 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, weekStart = 0) {
|
|||
|
|
const 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
|
|||
|
|
const thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
|
|||
|
|
// 1st week == the week where the 4th of January is in
|
|||
|
|
const 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 */
|
|||
|
|
const year = new Date(date).getFullYear();
|
|||
|
|
return Math.floor(year / years) * years;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 698:
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "He": function() { return /* binding */ findElementInEventPath; },
|
|||
|
|
/* harmony export */ "cF": function() { return /* binding */ registerListeners; },
|
|||
|
|
/* harmony export */ "uV": function() { return /* binding */ unregisterListeners; }
|
|||
|
|
/* harmony export */ });
|
|||
|
|
const listenerRegistry = new WeakMap();
|
|||
|
|
const {addEventListener, removeEventListener} = EventTarget.prototype;
|
|||
|
|
|
|||
|
|
// 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) {
|
|||
|
|
let registered = listenerRegistry.get(keyObj);
|
|||
|
|
if (!registered) {
|
|||
|
|
registered = [];
|
|||
|
|
listenerRegistry.set(keyObj, registered);
|
|||
|
|
}
|
|||
|
|
listeners.forEach((listener) => {
|
|||
|
|
addEventListener.call(...listener);
|
|||
|
|
registered.push(listener);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function unregisterListeners(keyObj) {
|
|||
|
|
let listeners = listenerRegistry.get(keyObj);
|
|||
|
|
if (!listeners) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
listeners.forEach((listener) => {
|
|||
|
|
removeEventListener.call(...listener);
|
|||
|
|
});
|
|||
|
|
listenerRegistry.delete(keyObj);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Event.composedPath() polyfill for Edge
|
|||
|
|
// based on https://gist.github.com/kleinfreund/e9787d73776c0e3750dcfcdc89f100ec
|
|||
|
|
if (!Event.prototype.composedPath) {
|
|||
|
|
const getComposedPath = (node, path = []) => {
|
|||
|
|
path.push(node);
|
|||
|
|
|
|||
|
|
let 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, index = 0) {
|
|||
|
|
const 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) {
|
|||
|
|
const criteria = typeof selector === 'function' ? selector : el => el.matches(selector);
|
|||
|
|
return findFromPath(ev.composedPath(), criteria, ev.currentTarget);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 105:
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|||
|
|
/* harmony export */ "$C": function() { return /* binding */ pushUnique; },
|
|||
|
|
/* harmony export */ "Jm": function() { return /* binding */ lastItemOf; },
|
|||
|
|
/* harmony export */ "W7": function() { return /* binding */ stringToArray; },
|
|||
|
|
/* harmony export */ "em": function() { return /* binding */ createTagRepeat; },
|
|||
|
|
/* harmony export */ "jG": function() { return /* binding */ limitToRange; },
|
|||
|
|
/* harmony export */ "l$": function() { return /* binding */ hasProperty; },
|
|||
|
|
/* harmony export */ "mh": function() { return /* binding */ isInRange; },
|
|||
|
|
/* harmony export */ "zh": function() { return /* binding */ optimizeTemplateHTML; }
|
|||
|
|
/* harmony export */ });
|
|||
|
|
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, ...items) {
|
|||
|
|
items.forEach((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) {
|
|||
|
|
const minOK = min === undefined || testVal >= min;
|
|||
|
|
const 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, attributes = {}, index = 0, html = '') {
|
|||
|
|
const openTagSrc = Object.keys(attributes).reduce((src, attr) => {
|
|||
|
|
let val = attributes[attr];
|
|||
|
|
if (typeof val === 'function') {
|
|||
|
|
val = val(index);
|
|||
|
|
}
|
|||
|
|
return `${src} ${attr}="${val}"`;
|
|||
|
|
}, tagName);
|
|||
|
|
html += `<${openTagSrc}></${tagName}>`;
|
|||
|
|
|
|||
|
|
const 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+</, '<');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
|
|||
|
|
/***/ 947:
|
|||
|
|
/***/ (function(__unused_webpack_module, exports) {
|
|||
|
|
|
|||
|
|
var __webpack_unused_export__;
|
|||
|
|
|
|||
|
|
__webpack_unused_export__ = ({ value: true });
|
|||
|
|
var Events = /** @class */ (function () {
|
|||
|
|
function Events(eventType, eventFunctions) {
|
|||
|
|
if (eventFunctions === void 0) { eventFunctions = []; }
|
|||
|
|
this._eventType = eventType;
|
|||
|
|
this._eventFunctions = eventFunctions;
|
|||
|
|
}
|
|||
|
|
Events.prototype.init = function () {
|
|||
|
|
var _this = this;
|
|||
|
|
this._eventFunctions.forEach(function (eventFunction) {
|
|||
|
|
if (typeof window !== 'undefined') {
|
|||
|
|
window.addEventListener(_this._eventType, eventFunction);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
return Events;
|
|||
|
|
}());
|
|||
|
|
exports["default"] = Events;
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ })
|
|||
|
|
|
|||
|
|
/******/ });
|
|||
|
|
/************************************************************************/
|
|||
|
|
/******/ // The module cache
|
|||
|
|
/******/ var __webpack_module_cache__ = {};
|
|||
|
|
/******/
|
|||
|
|
/******/ // The require function
|
|||
|
|
/******/ function __webpack_require__(moduleId) {
|
|||
|
|
/******/ // Check if module is in cache
|
|||
|
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|||
|
|
/******/ if (cachedModule !== undefined) {
|
|||
|
|
/******/ return cachedModule.exports;
|
|||
|
|
/******/ }
|
|||
|
|
/******/ // Create a new module (and put it into the cache)
|
|||
|
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|||
|
|
/******/ // no module.id needed
|
|||
|
|
/******/ // no module.loaded needed
|
|||
|
|
/******/ exports: {}
|
|||
|
|
/******/ };
|
|||
|
|
/******/
|
|||
|
|
/******/ // Execute the module function
|
|||
|
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|||
|
|
/******/
|
|||
|
|
/******/ // Return the exports of the module
|
|||
|
|
/******/ return module.exports;
|
|||
|
|
/******/ }
|
|||
|
|
/******/
|
|||
|
|
/************************************************************************/
|
|||
|
|
/******/ /* webpack/runtime/define property getters */
|
|||
|
|
/******/ !function() {
|
|||
|
|
/******/ // define getter functions for harmony exports
|
|||
|
|
/******/ __webpack_require__.d = function(exports, definition) {
|
|||
|
|
/******/ for(var key in definition) {
|
|||
|
|
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|||
|
|
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|||
|
|
/******/ }
|
|||
|
|
/******/ }
|
|||
|
|
/******/ };
|
|||
|
|
/******/ }();
|
|||
|
|
/******/
|
|||
|
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|||
|
|
/******/ !function() {
|
|||
|
|
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
|
|||
|
|
/******/ }();
|
|||
|
|
/******/
|
|||
|
|
/******/ /* webpack/runtime/make namespace object */
|
|||
|
|
/******/ !function() {
|
|||
|
|
/******/ // define __esModule on exports
|
|||
|
|
/******/ __webpack_require__.r = function(exports) {
|
|||
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|||
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|||
|
|
/******/ }
|
|||
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|||
|
|
/******/ };
|
|||
|
|
/******/ }();
|
|||
|
|
/******/
|
|||
|
|
/************************************************************************/
|
|||
|
|
var __webpack_exports__ = {};
|
|||
|
|
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
|
|||
|
|
!function() {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony import */ var _datepicker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(781);
|
|||
|
|
/* harmony import */ var flowbite_datepicker_Datepicker__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(770);
|
|||
|
|
/* harmony import */ var flowbite_datepicker_DateRangePicker__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(482);
|
|||
|
|
/* harmony import */ var _dom_events__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(947);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var turboLoadEvents = new _dom_events__WEBPACK_IMPORTED_MODULE_3__["default"]('turbo:load', [_datepicker__WEBPACK_IMPORTED_MODULE_0__.initDatepickers]);
|
|||
|
|
var turboFrameLoadEvents = new _dom_events__WEBPACK_IMPORTED_MODULE_3__["default"]('turbo:frame-load', [_datepicker__WEBPACK_IMPORTED_MODULE_0__.initDatepickers]);
|
|||
|
|
turboLoadEvents.init();
|
|||
|
|
turboFrameLoadEvents.init();
|
|||
|
|
/* harmony default export */ __webpack_exports__["default"] = ({
|
|||
|
|
Datepicker: flowbite_datepicker_Datepicker__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z,
|
|||
|
|
DateRangePicker: flowbite_datepicker_DateRangePicker__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z
|
|||
|
|
});
|
|||
|
|
}();
|
|||
|
|
/******/ return __webpack_exports__;
|
|||
|
|
/******/ })()
|
|||
|
|
;
|
|||
|
|
});
|
|||
|
|
//# sourceMappingURL=datepicker.turbo.js.map
|