Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.dist.js.datepicker-full.js Maven / Gradle / Ivy
(function () {
'use strict';
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}>`;
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+ 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;
}, today());
},
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 += lastItemOf(separators);
},
};
}
function parseDate(dateStr, format, locale) {
if (dateStr instanceof Date || typeof dateStr === 'number') {
const date = stripTime(dateStr);
return isNaN(date) ? undefined : date;
}
if (!dateStr) {
return undefined;
}
if (dateStr === 'today') {
return today();
}
if (format && format.toValue) {
const date = format.toValue(dateStr, format, locale);
return isNaN(date) ? undefined : stripTime(date);
}
return parseFormatString(format).parser(dateStr, locale);
}
function formatDate(date, format, locale) {
if (isNaN(date) || (!date && date !== 0)) {
return '';
}
const dateObj = typeof date === 'number' ? new Date(date) : date;
if (format.toDisplay) {
return format.toDisplay(dateObj, format, locale);
}
return parseFormatString(format).formatter(dateObj, locale);
}
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
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);
}
// 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"
}
};
// 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: '
${createTagRepeat('span', 7, {class: 'dow block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm'})}
${createTagRepeat('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'})}
`);
const calendarWeeksTemplate = optimizeTemplateHTML(`
${createTagRepeat('span', 6, {class: 'week block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm'})}
`);
// Base class of the view classes
class View {
constructor(picker, config) {
Object.assign(this, config, {
picker,
element: parseHTML(`
`).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');
pushUnique(this.disabled, current);
}
if (result.classes) {
const extraClasses = result.classes.split(/\s+/);
el.classList.add(...extraClasses);
if (extraClasses.includes('disabled')) {
pushUnique(this.disabled, current);
}
}
if (result.content) {
replaceChildNodes(el, result.content);
}
}
}
}
class DaysView extends View {
constructor(picker) {
super(picker, {
id: 0,
name: 'days',
cellClass: 'day',
});
}
init(options, onConstruction = true) {
if (onConstruction) {
const inner = parseHTML(daysTemplate).firstChild;
this.dow = inner.firstChild;
this.grid = inner.lastChild;
this.element.appendChild(inner);
}
super.init(options);
}
setOptions(options) {
let updateDOW;
if (hasProperty(options, 'minDate')) {
this.minDate = options.minDate;
}
if (hasProperty(options, 'maxDate')) {
this.maxDate = options.maxDate;
}
if (options.datesDisabled) {
this.datesDisabled = options.datesDisabled;
}
if (options.daysOfWeekDisabled) {
this.daysOfWeekDisabled = options.daysOfWeekDisabled;
updateDOW = true;
}
if (options.daysOfWeekHighlighted) {
this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
}
if (options.todayHighlight !== undefined) {
this.todayHighlight = options.todayHighlight;
}
if (options.weekStart !== undefined) {
this.weekStart = options.weekStart;
this.weekEnd = options.weekEnd;
updateDOW = true;
}
if (options.locale) {
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(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 = dateValue(viewYear, viewMonth, 1);
const start = dayOfTheWeekOf(firstOfMonth, this.weekStart, this.weekStart);
this.first = firstOfMonth;
this.last = dateValue(viewYear, viewMonth + 1, 0);
this.start = start;
this.focused = this.picker.viewDate;
}
// Apply update on the selected dates to view's settings
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 ? today() : 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 = formatDate(this.focused, this.switchLabelFormat, this.locale);
this.picker.setViewSwitchLabel(switchLabel);
this.picker.setPrevBtnDisabled(this.first <= this.minDate);
this.picker.setNextBtnDisabled(this.last >= this.maxDate);
if (this.calendarWeeks) {
// start of the UTC week (Monday) of the 1st of the month
const startOfWeek = dayOfTheWeekOf(this.first, 1, 1);
Array.from(this.calendarWeeks.weeks.children).forEach((el, index) => {
el.textContent = getWeek(addWeeks(startOfWeek, index));
});
}
Array.from(this.grid.children).forEach((el, index) => {
const classList = el.classList;
const current = addDays(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', 'text-gray-400', 'dark:text-gray-500');
classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
}
if (this.daysOfWeekDisabled.includes(day)) {
classList.add('disabled', 'cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
classList.remove('hover:bg-gray-100', 'dark:hover:bg-gray-600', 'text-gray-900', 'dark:text-white', 'cursor-pointer');
pushUnique(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', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-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', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-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',);
}
if (current === rangeEnd) {
classList.add('range-end', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-r-lg');
classList.remove('rounded-lg',);
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-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');
}
}
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(createTagRepeat('span', 12, {'data-month': ix => ix})));
}
super.init(options);
}
setOptions(options) {
if (options.locale) {
this.monthNames = options.locale.monthsShort;
}
if (hasProperty(options, 'minDate')) {
if (options.minDate === undefined) {
this.minYear = this.minMonth = this.minDate = undefined;
} else {
const minDateObj = new Date(options.minDate);
this.minYear = minDateObj.getFullYear();
this.minMonth = minDateObj.getMonth();
this.minDate = minDateObj.setDate(1);
}
}
if (hasProperty(options, 'maxDate')) {
if (options.maxDate === undefined) {
this.maxYear = this.maxMonth = this.maxDate = undefined;
} else {
const maxDateObj = new Date(options.maxDate);
this.maxYear = maxDateObj.getFullYear();
this.maxMonth = maxDateObj.getMonth();
this.maxDate = dateValue(this.maxYear, this.maxMonth + 1, 0);
}
}
if (options.beforeShowMonth !== undefined) {
this.beforeShow = typeof options.beforeShowMonth === 'function'
? options.beforeShowMonth
: undefined;
}
}
// Update view's settings to reflect the viewDate set on the picker
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 {
pushUnique(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 = dateValue(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', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-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', '!bg-primary-700', 'dark:bg-blue-600', 'dark:!bg-primary-700', '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', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-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');
}
}
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(createTagRepeat('span', 12)));
}
super.init(options);
}
setOptions(options) {
if (hasProperty(options, 'minDate')) {
if (options.minDate === undefined) {
this.minYear = this.minDate = undefined;
} else {
this.minYear = startOfYearPeriod(options.minDate, this.step);
this.minDate = dateValue(this.minYear, 0, 1);
}
}
if (hasProperty(options, 'maxDate')) {
if (options.maxDate === undefined) {
this.maxYear = this.maxDate = undefined;
} else {
this.maxYear = startOfYearPeriod(options.maxDate, this.step);
this.maxDate = dateValue(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 = startOfYearPeriod(viewDate, this.navStep);
const last = first + 9 * this.step;
this.first = first;
this.last = last;
this.start = first - this.step;
this.focused = startOfYearPeriod(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 pushUnique(years, startOfYearPeriod(timeValue, this.step));
}, []);
if (rangepicker && rangepicker.dates) {
this.range = rangepicker.dates.map(timeValue => {
if (timeValue !== undefined) {
return startOfYearPeriod(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 = dateValue(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', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-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', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark!bg-primary-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', '!bg-primary-700', 'text-white', 'dark:bg-blue-600', 'dark:!bg-primary-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');
}
}
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 = addMonths(viewDate, direction);
break;
case 1:
newViewDate = addYears(viewDate, direction);
break;
default:
newViewDate = addYears(viewDate, direction * currentView.navStep);
}
newViewDate = limitToRange(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();
}
}
function goToSelectedMonthOrYear(datepicker, selection) {
const picker = datepicker.picker;
const viewDate = new Date(picker.viewDate);
const viewId = picker.currentView.id;
const newDate = viewId === 1
? addMonths(viewDate, selection - viewDate.getMonth())
: addYears(viewDate, selection - viewDate.getFullYear());
picker.changeFocus(newDate).changeView(viewId - 1).render();
}
function onClickTodayBtn(datepicker) {
const picker = datepicker.picker;
const currentDate = today();
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 = findElementInEventPath(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();
}
}
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 (hasProperty(options, 'minDate') || hasProperty(options, 'maxDate')) {
const {minDate, maxDate} = picker.datepicker.config;
picker.controls.todayBtn.disabled = !isInRange(today(), 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 ? lastItemOf(dates) : config.defaultViewDate;
return limitToRange(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 = 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
registerListeners(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]();
}
}
// 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 (!isInRange(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 = addDays(viewDate, direction * 7);
} else if (ev.ctrlKey || ev.metaKey) {
viewDate = addYears(viewDate, direction);
} else {
viewDate = addDays(viewDate, direction);
}
addFn = addDays;
testFn = (date) => currentView.disabled.includes(date);
break;
case 1:
viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
addFn = addMonths;
testFn = (date) => {
const dt = new Date(date);
const {year, disabled} = currentView;
return dt.getFullYear() === year && disabled.includes(dt.getMonth());
};
break;
default:
viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
addFn = addYears;
testFn = date => currentView.disabled.includes(startOfYearPeriod(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();
}
}
// 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 (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
return;
}
unfocus(datepicker);
}
function stringifyDates(dates, config) {
return dates
.map(dt => formatDate(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 = parseDate(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 (
isInRange(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: today(),
maxDate: undefined,
minDate: undefined,
}, processOptions(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 = stringToArray(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 = stringToArray(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)]
];
registerListeners(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 formatDate(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 parseDate(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();
unregisterListeners(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 => formatDate(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 = lastItemOf(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 = stringToArray(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', '!border-primary-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', '!border-primary-700');
if (opts.update) {
this.update(opts);
}
}
}
// 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) {
registerListeners(rangepicker, [
[el, 'changeDate', changeDateListener],
]);
new Datepicker(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();
unregisterListeners(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 => formatDate(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]});
}
}
}
window.Datepicker = Datepicker;
window.DateRangePicker = DateRangePicker;
})();
