3076 lines
99 KiB
JavaScript
3076 lines
99 KiB
JavaScript
(function () {
|
||
'use strict';
|
||
|
||
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+</, '<');
|
||
}
|
||
|
||
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));
|
||
}
|
||
|
||
function calcWeekNum(dayOfTheWeek, sameDayOfFirstWeek) {
|
||
return Math.round((dayOfTheWeek - sameDayOfFirstWeek) / 604800000) + 1;
|
||
}
|
||
|
||
// Get the ISO week number of a date
|
||
function getIsoWeek(date) {
|
||
// - Start of ISO week is Monday
|
||
// - Use Thursday for culculation because the first Thursday of ISO week is
|
||
// always in January
|
||
const thuOfTheWeek = dayOfTheWeekOf(date, 4, 1);
|
||
// - Week 1 in ISO week is the week including Jan 04
|
||
// - Use the Thu of given date's week (instead of given date itself) to
|
||
// calculate week 1 of the year so that Jan 01 - 03 won't be miscalculated
|
||
// as week 0 when Jan 04 is Mon - Wed
|
||
const firstThu = dayOfTheWeekOf(new Date(thuOfTheWeek).setMonth(0, 4), 4, 1);
|
||
// return Math.round((thuOfTheWeek - firstThu) / 604800000) + 1;
|
||
return calcWeekNum(thuOfTheWeek, firstThu);
|
||
}
|
||
|
||
// Calculate week number in traditional week number system
|
||
// @see https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems
|
||
function calcTraditionalWeekNumber(date, weekStart) {
|
||
// - Week 1 of traditional week is the week including the Jan 01
|
||
// - Use Jan 01 of given date's year to calculate the start of week 1
|
||
const startOfFirstWeek = dayOfTheWeekOf(new Date(date).setMonth(0, 1), weekStart, weekStart);
|
||
const startOfTheWeek = dayOfTheWeekOf(date, weekStart, weekStart);
|
||
const weekNum = calcWeekNum(startOfTheWeek, startOfFirstWeek);
|
||
if (weekNum < 53) {
|
||
return weekNum;
|
||
}
|
||
// If the 53rd week includes Jan 01, it's actually next year's week 1
|
||
const weekOneOfNextYear = dayOfTheWeekOf(new Date(date).setDate(32), weekStart, weekStart);
|
||
return startOfTheWeek === weekOneOfNextYear ? 1 : weekNum;
|
||
}
|
||
|
||
// Get the Western traditional week number of a date
|
||
function getWesternTradWeek(date) {
|
||
// Start of Western traditionl week is Sunday
|
||
return calcTraditionalWeekNumber(date, 0);
|
||
}
|
||
|
||
// Get the Middle Eastern week number of a date
|
||
function getMidEasternWeek(date) {
|
||
// Start of Middle Eastern week is Saturday
|
||
return calcTraditionalWeekNumber(date, 6);
|
||
}
|
||
|
||
// 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;
|
||
}
|
||
|
||
// Convert date to the first/last date of the month/year of the date
|
||
function regularizeDate(date, timeSpan, useLastDate) {
|
||
if (timeSpan !== 1 && timeSpan !== 2) {
|
||
return date;
|
||
}
|
||
const newDate = new Date(date);
|
||
if (timeSpan === 1) {
|
||
useLastDate
|
||
? newDate.setMonth(newDate.getMonth() + 1, 0)
|
||
: newDate.setDate(1);
|
||
} else {
|
||
useLastDate
|
||
? newDate.setFullYear(newDate.getFullYear() + 1, 0, 0)
|
||
: newDate.setMonth(0, 1);
|
||
}
|
||
return newDate.setHours(0, 0, 0, 0);
|
||
}
|
||
|
||
// 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;
|
||
}, 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 range = document.createRange();
|
||
|
||
function parseHTML(html) {
|
||
return range.createContextualFragment(html);
|
||
}
|
||
|
||
function getParent(el) {
|
||
return el.parentElement
|
||
|| (el.parentNode instanceof ShadowRoot ? el.parentNode.host : undefined);
|
||
}
|
||
|
||
function isActiveElement(el) {
|
||
return el.getRootNode().activeElement === el;
|
||
}
|
||
|
||
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);
|
||
});
|
||
}
|
||
}
|
||
|
||
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) {
|
||
const [node, ...rest] = path;
|
||
if (criteria(node)) {
|
||
return node;
|
||
}
|
||
if (node === currentTarget || node.tagName === 'HTML' || rest.length === 0) {
|
||
// stop when reaching currentTarget or <html>
|
||
return;
|
||
}
|
||
return findFromPath(rest, criteria, currentTarget);
|
||
}
|
||
|
||
// Search for the actual target of a delegated event
|
||
function findElementInEventPath(ev, selector) {
|
||
const criteria = typeof selector === 'function'
|
||
? selector
|
||
: el => el instanceof Element && 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,
|
||
clearButton: false,
|
||
dateDelimiter: ',',
|
||
datesDisabled: [],
|
||
daysOfWeekDisabled: [],
|
||
daysOfWeekHighlighted: [],
|
||
defaultViewDate: undefined, // placeholder, defaults to today() by the program
|
||
disableTouchKeyboard: false,
|
||
enableOnReadonly: true,
|
||
format: 'mm/dd/yyyy',
|
||
language: 'en',
|
||
maxDate: null,
|
||
maxNumberOfDates: 1,
|
||
maxView: 3,
|
||
minDate: null,
|
||
nextArrow: '»',
|
||
orientation: 'auto',
|
||
pickLevel: 0,
|
||
prevArrow: '«',
|
||
showDaysOfWeek: true,
|
||
showOnClick: true,
|
||
showOnFocus: true,
|
||
startView: 0,
|
||
title: '',
|
||
todayButton: false,
|
||
todayButtonMode: 0,
|
||
todayHighlight: false,
|
||
updateOnBlur: true,
|
||
weekNumbers: 0,
|
||
weekStart: 0,
|
||
};
|
||
|
||
const {
|
||
language: defaultLang,
|
||
format: defaultFormat,
|
||
weekStart: defaultWeekStart,
|
||
} = 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
|
||
? pushUnique(dow, day)
|
||
: dow;
|
||
}
|
||
|
||
function determineGetWeekMethod(numberingMode, weekStart) {
|
||
const methodId = numberingMode === 4
|
||
? (weekStart === 6 ? 3 : !weekStart + 1)
|
||
: numberingMode;
|
||
switch (methodId) {
|
||
case 1:
|
||
return getIsoWeek;
|
||
case 2:
|
||
return getWesternTradWeek;
|
||
case 3:
|
||
return getMidEasternWeek;
|
||
}
|
||
}
|
||
|
||
function updateWeekStart(newValue, config, weekNumbers) {
|
||
config.weekStart = newValue;
|
||
config.weekEnd = (newValue + 6) % 7;
|
||
if (weekNumbers === 4) {
|
||
config.getWeekNumber = determineGetWeekMethod(4, newValue);
|
||
}
|
||
return newValue;
|
||
}
|
||
|
||
// validate input date. if invalid, fallback to the original value
|
||
function validateDate(value, format, locale, origValue) {
|
||
const date = parseDate(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;
|
||
}
|
||
|
||
function replaceOptions(options, from, to, convert = undefined) {
|
||
if (from in options) {
|
||
if (!(to in options)) {
|
||
options[to] = convert ? convert(options[from]) : options[from];
|
||
}
|
||
delete options[from];
|
||
}
|
||
}
|
||
|
||
// Create Datepicker configuration to set
|
||
function processOptions(options, datepicker) {
|
||
const inOpts = Object.assign({}, options);
|
||
const config = {};
|
||
const locales = datepicker.constructor.locales;
|
||
const rangeEnd = !!datepicker.rangeSideIndex;
|
||
let {
|
||
datesDisabled,
|
||
format,
|
||
language,
|
||
locale,
|
||
maxDate,
|
||
maxView,
|
||
minDate,
|
||
pickLevel,
|
||
startView,
|
||
weekNumbers,
|
||
weekStart,
|
||
} = datepicker.config || {};
|
||
|
||
// for backword compatibility
|
||
replaceOptions(inOpts, 'calendarWeeks', 'weekNumbers', val => val ? 1 : 0);
|
||
replaceOptions(inOpts, 'clearBtn', 'clearButton');
|
||
replaceOptions(inOpts, 'todayBtn', 'todayButton');
|
||
replaceOptions(inOpts, 'todayBtnMode', 'todayButtonMode');
|
||
|
||
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]) {
|
||
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 = updateWeekStart(locale.weekStart, config, weekNumbers);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (inOpts.format) {
|
||
const hasToDisplay = typeof inOpts.format.toDisplay === 'function';
|
||
const hasToValue = typeof inOpts.format.toValue === 'function';
|
||
const validFormatString = reFormatTokens.test(inOpts.format);
|
||
if ((hasToDisplay && hasToValue) || validFormatString) {
|
||
format = config.format = inOpts.format;
|
||
}
|
||
delete inOpts.format;
|
||
}
|
||
|
||
//*** pick level ***//
|
||
let newPickLevel = pickLevel;
|
||
if ('pickLevel' in inOpts) {
|
||
newPickLevel = validateViewId(inOpts.pickLevel, pickLevel, 2);
|
||
delete inOpts.pickLevel;
|
||
}
|
||
if (newPickLevel !== pickLevel) {
|
||
if (newPickLevel > pickLevel) {
|
||
// complement current minDate/madDate so that the existing range will be
|
||
// expanded to fit the new level later
|
||
if (!('minDate' in inOpts)) {
|
||
inOpts.minDate = minDate;
|
||
}
|
||
if (!('maxDate' in inOpts)) {
|
||
inOpts.maxDate = maxDate;
|
||
}
|
||
}
|
||
// complement datesDisabled so that it will be reset later
|
||
if (datesDisabled && !inOpts.datesDisabled) {
|
||
inOpts.datesDisabled = [];
|
||
}
|
||
pickLevel = config.pickLevel = newPickLevel;
|
||
}
|
||
|
||
//*** 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 ('minDate' in inOpts) {
|
||
const defaultMinDt = dateValue(0, 0, 1);
|
||
minDt = inOpts.minDate === null
|
||
? defaultMinDt // set 0000-01-01 to prevent negative values for year
|
||
: validateDate(inOpts.minDate, format, locale, minDt);
|
||
if (minDt !== defaultMinDt) {
|
||
minDt = regularizeDate(minDt, pickLevel, false);
|
||
}
|
||
delete inOpts.minDate;
|
||
}
|
||
if ('maxDate' in inOpts) {
|
||
maxDt = inOpts.maxDate === null
|
||
? undefined
|
||
: validateDate(inOpts.maxDate, format, locale, maxDt);
|
||
if (maxDt !== undefined) {
|
||
maxDt = regularizeDate(maxDt, pickLevel, true);
|
||
}
|
||
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) {
|
||
const dtsDisabled = inOpts.datesDisabled;
|
||
if (typeof dtsDisabled === 'function') {
|
||
config.datesDisabled = null;
|
||
config.checkDisabled = (timeValue, viewId) => dtsDisabled(
|
||
new Date(timeValue),
|
||
viewId,
|
||
rangeEnd
|
||
);
|
||
} else {
|
||
const disabled = config.datesDisabled = dtsDisabled.reduce((dates, dt) => {
|
||
const date = parseDate(dt, format, locale);
|
||
return date !== undefined
|
||
? pushUnique(dates, regularizeDate(date, pickLevel, rangeEnd))
|
||
: dates;
|
||
}, []);
|
||
config.checkDisabled = timeValue => disabled.includes(timeValue);
|
||
}
|
||
delete inOpts.datesDisabled;
|
||
}
|
||
if ('defaultViewDate' in inOpts) {
|
||
const viewDate = parseDate(inOpts.defaultViewDate, format, locale);
|
||
if (viewDate !== undefined) {
|
||
config.defaultViewDate = viewDate;
|
||
}
|
||
delete inOpts.defaultViewDate;
|
||
}
|
||
|
||
//*** days of week ***//
|
||
if ('weekStart' in inOpts) {
|
||
const wkStart = Number(inOpts.weekStart) % 7;
|
||
if (!isNaN(wkStart)) {
|
||
weekStart = updateWeekStart(wkStart, config, weekNumbers);
|
||
}
|
||
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;
|
||
}
|
||
|
||
//*** week numbers ***//
|
||
if ('weekNumbers' in inOpts) {
|
||
let method = inOpts.weekNumbers;
|
||
if (method) {
|
||
const getWeekNumber = typeof method === 'function'
|
||
? (timeValue, startOfWeek) => method(new Date(timeValue), startOfWeek)
|
||
: determineGetWeekMethod((method = parseInt(method, 10)), weekStart);
|
||
if (getWeekNumber) {
|
||
weekNumbers = config.weekNumbers = method;
|
||
config.getWeekNumber = getWeekNumber;
|
||
}
|
||
} else {
|
||
weekNumbers = config.weekNumbers = 0;
|
||
config.getWeekNumber = null;
|
||
}
|
||
delete inOpts.weekNumbers;
|
||
}
|
||
|
||
//*** multi date ***//
|
||
if ('maxNumberOfDates' in inOpts) {
|
||
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;
|
||
}
|
||
|
||
//*** view ***//
|
||
let newMaxView = maxView;
|
||
if ('maxView' in inOpts) {
|
||
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 ('startView' in inOpts) {
|
||
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 ('disableTouchKeyboard' in inOpts) {
|
||
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 ('todayButtonMode' in inOpts) {
|
||
switch(inOpts.todayButtonMode) {
|
||
case 0:
|
||
case 1:
|
||
config.todayButtonMode = inOpts.todayButtonMode;
|
||
}
|
||
delete inOpts.todayButtonMode;
|
||
}
|
||
|
||
//*** copy the rest ***//
|
||
Object.entries(inOpts).forEach(([key, value]) => {
|
||
if (value !== undefined && key in defaultOptions) {
|
||
config[key] = value;
|
||
}
|
||
});
|
||
|
||
return config;
|
||
}
|
||
|
||
const defaultShortcutKeys = {
|
||
show: {key: 'ArrowDown'},
|
||
hide: null,
|
||
toggle: {key: 'Escape'},
|
||
prevButton: {key: 'ArrowLeft', ctrlOrMetaKey: true},
|
||
nextButton: {key: 'ArrowRight', ctrlOrMetaKey: true},
|
||
viewSwitch: {key: 'ArrowUp', ctrlOrMetaKey: true},
|
||
clearButton: {key: 'Backspace', ctrlOrMetaKey: true},
|
||
todayButton: {key: '.', ctrlOrMetaKey: true},
|
||
exitEditMode: {key: 'ArrowDown', ctrlOrMetaKey: true},
|
||
};
|
||
|
||
function createShortcutKeyConfig(options) {
|
||
return Object.keys(defaultShortcutKeys).reduce((keyDefs, shortcut) => {
|
||
const keyDef = options[shortcut] === undefined
|
||
? defaultShortcutKeys[shortcut]
|
||
: options[shortcut];
|
||
const key = keyDef && keyDef.key;
|
||
if (!key || typeof key !== 'string') {
|
||
return keyDefs;
|
||
}
|
||
|
||
const normalizedDef = {
|
||
key,
|
||
ctrlOrMetaKey: !!(keyDef.ctrlOrMetaKey || keyDef.ctrlKey || keyDef.metaKey),
|
||
};
|
||
if (key.length > 1) {
|
||
normalizedDef.altKey = !!keyDef.altKey;
|
||
normalizedDef.shiftKey = !!keyDef.shiftKey;
|
||
}
|
||
keyDefs[shortcut] = normalizedDef;
|
||
return keyDefs;
|
||
}, {});
|
||
}
|
||
|
||
const getButtons = buttonList => buttonList
|
||
.map(classes => `<button type="button" class="%buttonClass% ${classes}" tabindex="-1"></button>`)
|
||
.join('');
|
||
|
||
const pickerTemplate = optimizeTemplateHTML(`<div class="datepicker">
|
||
<div class="datepicker-picker">
|
||
<div class="datepicker-header">
|
||
<div class="datepicker-title"></div>
|
||
<div class="datepicker-controls">
|
||
${getButtons([
|
||
'prev-button prev-btn',
|
||
'view-switch',
|
||
'next-button next-btn',
|
||
])}
|
||
</div>
|
||
</div>
|
||
<div class="datepicker-main"></div>
|
||
<div class="datepicker-footer">
|
||
<div class="datepicker-controls">
|
||
${getButtons([
|
||
'today-button today-btn',
|
||
'clear-button clear-btn',
|
||
])}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`);
|
||
|
||
const daysTemplate = optimizeTemplateHTML(`<div class="days">
|
||
<div class="days-of-week">${createTagRepeat('span', 7, {class: 'dow'})}</div>
|
||
<div class="datepicker-grid">${createTagRepeat('span', 42)}</div>
|
||
</div>`);
|
||
|
||
const weekNumbersTemplate = optimizeTemplateHTML(`<div class="week-numbers calendar-weeks">
|
||
<div class="days-of-week"><span class="dow"></span></div>
|
||
<div class="weeks">${createTagRepeat('span', 6, {class: 'week'})}</div>
|
||
</div>`);
|
||
|
||
// Base class of the view classes
|
||
class View {
|
||
constructor(picker, config) {
|
||
Object.assign(this, config, {
|
||
picker,
|
||
element: parseHTML(`<div class="datepicker-view"></div>`).firstChild,
|
||
selected: [],
|
||
isRangeEnd: !!picker.datepicker.rangeSideIndex,
|
||
});
|
||
this.init(this.picker.datepicker.config);
|
||
}
|
||
|
||
init(options) {
|
||
if ('pickLevel' in options) {
|
||
this.isMinView = this.id === options.pickLevel;
|
||
}
|
||
this.setOptions(options);
|
||
this.updateFocus();
|
||
this.updateSelection();
|
||
}
|
||
|
||
prepareForRender(switchLabel, prevButtonDisabled, nextButtonDisabled) {
|
||
// refresh disabled years on every render in order to clear the ones added
|
||
// by beforeShow hook at previous render
|
||
this.disabled = [];
|
||
|
||
const picker = this.picker;
|
||
picker.setViewSwitchLabel(switchLabel);
|
||
picker.setPrevButtonDisabled(prevButtonDisabled);
|
||
picker.setNextButtonDisabled(nextButtonDisabled);
|
||
}
|
||
|
||
setDisabled(date, classList) {
|
||
classList.add('disabled');
|
||
pushUnique(this.disabled, date);
|
||
}
|
||
|
||
// Execute beforeShow() callback and apply the result to the element
|
||
// args:
|
||
performBeforeHook(el, timeValue) {
|
||
let result = this.beforeShow(new Date(timeValue));
|
||
switch (typeof result) {
|
||
case 'boolean':
|
||
result = {enabled: result};
|
||
break;
|
||
case 'string':
|
||
result = {classes: result};
|
||
}
|
||
|
||
if (result) {
|
||
const classList = el.classList;
|
||
if (result.enabled === false) {
|
||
this.setDisabled(timeValue, classList);
|
||
}
|
||
if (result.classes) {
|
||
const extraClasses = result.classes.split(/\s+/);
|
||
classList.add(...extraClasses);
|
||
if (extraClasses.includes('disabled')) {
|
||
this.setDisabled(timeValue, classList);
|
||
}
|
||
}
|
||
if (result.content) {
|
||
replaceChildNodes(el, result.content);
|
||
}
|
||
}
|
||
}
|
||
|
||
renderCell(el, content, cellVal, date, {selected, range}, outOfScope, extraClasses = []) {
|
||
el.textContent = content;
|
||
if (this.isMinView) {
|
||
el.dataset.date = date;
|
||
}
|
||
|
||
const classList = el.classList;
|
||
el.className = `datepicker-cell ${this.cellClass}`;
|
||
if (cellVal < this.first) {
|
||
classList.add('prev');
|
||
} else if (cellVal > this.last) {
|
||
classList.add('next');
|
||
}
|
||
classList.add(...extraClasses);
|
||
if (outOfScope || this.checkDisabled(date, this.id)) {
|
||
this.setDisabled(date, classList);
|
||
}
|
||
if (range) {
|
||
const [rangeStart, rangeEnd] = range;
|
||
if (cellVal > rangeStart && cellVal < rangeEnd) {
|
||
classList.add('range');
|
||
}
|
||
if (cellVal === rangeStart) {
|
||
classList.add('range-start');
|
||
}
|
||
if (cellVal === rangeEnd) {
|
||
classList.add('range-end');
|
||
}
|
||
}
|
||
if (selected.includes(cellVal)) {
|
||
classList.add('selected');
|
||
}
|
||
if (cellVal === this.focused) {
|
||
classList.add('focused');
|
||
}
|
||
|
||
if (this.beforeShow) {
|
||
this.performBeforeHook(el, date);
|
||
}
|
||
}
|
||
|
||
refreshCell(el, cellVal, selected, [rangeStart, rangeEnd]) {
|
||
const classList = el.classList;
|
||
classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');
|
||
if (cellVal > rangeStart && cellVal < rangeEnd) {
|
||
classList.add('range');
|
||
}
|
||
if (cellVal === rangeStart) {
|
||
classList.add('range-start');
|
||
}
|
||
if (cellVal === rangeEnd) {
|
||
classList.add('range-end');
|
||
}
|
||
if (selected.includes(cellVal)) {
|
||
classList.add('selected');
|
||
}
|
||
if (cellVal === this.focused) {
|
||
classList.add('focused');
|
||
}
|
||
}
|
||
|
||
changeFocusedCell(cellIndex) {
|
||
this.grid.querySelectorAll('.focused').forEach((el) => {
|
||
el.classList.remove('focused');
|
||
});
|
||
this.grid.children[cellIndex].classList.add('focused');
|
||
}
|
||
}
|
||
|
||
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 ('minDate' in options) {
|
||
this.minDate = options.minDate;
|
||
}
|
||
if ('maxDate' in options) {
|
||
this.maxDate = options.maxDate;
|
||
}
|
||
if (options.checkDisabled) {
|
||
this.checkDisabled = options.checkDisabled;
|
||
}
|
||
if (options.daysOfWeekDisabled) {
|
||
this.daysOfWeekDisabled = options.daysOfWeekDisabled;
|
||
updateDOW = true;
|
||
}
|
||
if (options.daysOfWeekHighlighted) {
|
||
this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
|
||
}
|
||
if ('todayHighlight' in options) {
|
||
this.todayHighlight = options.todayHighlight;
|
||
}
|
||
if ('weekStart' in options) {
|
||
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 ('beforeShowDay' in options) {
|
||
this.beforeShow = typeof options.beforeShowDay === 'function'
|
||
? options.beforeShowDay
|
||
: undefined;
|
||
}
|
||
|
||
if ('weekNumbers' in options) {
|
||
if (options.weekNumbers && !this.weekNumbers) {
|
||
const weeksElem = parseHTML(weekNumbersTemplate).firstChild;
|
||
this.weekNumbers = {
|
||
element: weeksElem,
|
||
dow: weeksElem.firstChild,
|
||
weeks: weeksElem.lastChild,
|
||
};
|
||
this.element.insertBefore(weeksElem, this.element.firstChild);
|
||
} else if (this.weekNumbers && !options.weekNumbers) {
|
||
this.element.removeChild(this.weekNumbers.element);
|
||
this.weekNumbers = null;
|
||
}
|
||
}
|
||
|
||
if ('getWeekNumber' in options) {
|
||
this.getWeekNumber = options.getWeekNumber;
|
||
}
|
||
|
||
if ('showDaysOfWeek' in options) {
|
||
if (options.showDaysOfWeek) {
|
||
showElement(this.dow);
|
||
if (this.weekNumbers) {
|
||
showElement(this.weekNumbers.dow);
|
||
}
|
||
} else {
|
||
hideElement(this.dow);
|
||
if (this.weekNumbers) {
|
||
hideElement(this.weekNumbers.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' : 'dow';
|
||
});
|
||
}
|
||
}
|
||
|
||
// 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;
|
||
|
||
this.prepareForRender(
|
||
formatDate(this.focused, this.switchLabelFormat, this.locale),
|
||
this.first <= this.minDate,
|
||
this.last >= this.maxDate
|
||
);
|
||
|
||
if (this.weekNumbers) {
|
||
const weekStart = this.weekStart;
|
||
const startOfWeek = dayOfTheWeekOf(this.first, weekStart, weekStart);
|
||
Array.from(this.weekNumbers.weeks.children).forEach((el, index) => {
|
||
const dateOfWeekStart = addWeeks(startOfWeek, index);
|
||
el.textContent = this.getWeekNumber(dateOfWeekStart, weekStart);
|
||
if (index > 3) {
|
||
el.classList[dateOfWeekStart > this.last ? 'add' : 'remove']('next');
|
||
}
|
||
});
|
||
}
|
||
Array.from(this.grid.children).forEach((el, index) => {
|
||
const current = addDays(this.start, index);
|
||
const dateObj = new Date(current);
|
||
const day = dateObj.getDay();
|
||
const extraClasses = [];
|
||
|
||
if (this.today === current) {
|
||
extraClasses.push('today');
|
||
}
|
||
if (this.daysOfWeekHighlighted.includes(day)) {
|
||
extraClasses.push('highlighted');
|
||
}
|
||
|
||
this.renderCell(
|
||
el,
|
||
dateObj.getDate(),
|
||
current,
|
||
current,
|
||
this,
|
||
current < this.minDate
|
||
|| current > this.maxDate
|
||
|| this.daysOfWeekDisabled.includes(day),
|
||
extraClasses
|
||
);
|
||
});
|
||
}
|
||
|
||
// Update the view UI by applying the changes of selected and focused items
|
||
refresh() {
|
||
const range = this.range || [];
|
||
Array.from(this.grid.children).forEach((el) => {
|
||
this.refreshCell(el, Number(el.dataset.date), this.selected, range);
|
||
});
|
||
}
|
||
|
||
// Update the view UI by applying the change of focused item
|
||
refreshFocus() {
|
||
this.changeFocusedCell(Math.round((this.focused - this.start) / 86400000));
|
||
}
|
||
}
|
||
|
||
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');
|
||
this.grid.appendChild(parseHTML(createTagRepeat('span', 12, {'data-month': ix => ix})));
|
||
this.first = 0;
|
||
this.last = 11;
|
||
}
|
||
super.init(options);
|
||
}
|
||
|
||
setOptions(options) {
|
||
if (options.locale) {
|
||
this.monthNames = options.locale.monthsShort;
|
||
}
|
||
if ('minDate' in options) {
|
||
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 ('maxDate' in options) {
|
||
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.checkDisabled) {
|
||
this.checkDisabled = this.isMinView || options.datesDisabled === null
|
||
? options.checkDisabled
|
||
: () => false;
|
||
}
|
||
if ('beforeShowMonth' in options) {
|
||
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() {
|
||
this.prepareForRender(
|
||
this.year,
|
||
this.year <= this.minYear,
|
||
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 date = regularizeDate(new Date(this.year, index, 1), 1, this.isRangeEnd);
|
||
|
||
this.renderCell(
|
||
el,
|
||
this.monthNames[index],
|
||
index,
|
||
date,
|
||
{selected, range},
|
||
yrOutOfRange
|
||
|| isMinYear && index < this.minMonth
|
||
|| isMaxYear && index > this.maxMonth
|
||
);
|
||
});
|
||
}
|
||
|
||
// Update the view UI by applying the changes of selected and focused items
|
||
refresh() {
|
||
const selected = this.selected[this.year] || [];
|
||
const range = computeMonthRange(this.range, this.year) || [];
|
||
Array.from(this.grid.children).forEach((el, index) => {
|
||
this.refreshCell(el, index, selected, range);
|
||
});
|
||
}
|
||
|
||
// Update the view UI by applying the change of focused item
|
||
refreshFocus() {
|
||
this.changeFocusedCell(this.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');
|
||
this.grid.appendChild(parseHTML(createTagRepeat('span', 12)));
|
||
}
|
||
super.init(options);
|
||
}
|
||
|
||
setOptions(options) {
|
||
if ('minDate' in options) {
|
||
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 ('maxDate' in options) {
|
||
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.checkDisabled) {
|
||
this.checkDisabled = this.isMinView || options.datesDisabled === null
|
||
? options.checkDisabled
|
||
: () => false;
|
||
}
|
||
if (this.beforeShowOption in options) {
|
||
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() {
|
||
this.prepareForRender(
|
||
`${this.first}-${this.last}`,
|
||
this.first <= this.minYear,
|
||
this.last >= this.maxYear
|
||
);
|
||
|
||
Array.from(this.grid.children).forEach((el, index) => {
|
||
const current = this.start + (index * this.step);
|
||
const date = regularizeDate(new Date(current, 0, 1), 2, this.isRangeEnd);
|
||
|
||
el.dataset.year = current;
|
||
this.renderCell(
|
||
el,
|
||
current,
|
||
current,
|
||
date,
|
||
this,
|
||
current < this.minYear || current > this.maxYear
|
||
);
|
||
});
|
||
}
|
||
|
||
// Update the view UI by applying the changes of selected and focused items
|
||
refresh() {
|
||
const range = this.range || [];
|
||
Array.from(this.grid.children).forEach((el) => {
|
||
this.refreshCell(el, Number(el.textContent), this.selected, range);
|
||
});
|
||
}
|
||
|
||
// Update the view UI by applying the change of focused item
|
||
refreshFocus() {
|
||
this.changeFocusedCell(Math.round((this.focused - this.start) / this.step));
|
||
}
|
||
}
|
||
|
||
function triggerDatepickerEvent(datepicker, type) {
|
||
const options = {
|
||
bubbles: true,
|
||
cancelable: true,
|
||
detail: {
|
||
date: datepicker.getDate(),
|
||
viewDate: new Date(datepicker.picker.viewDate),
|
||
viewId: datepicker.picker.currentView.id,
|
||
datepicker,
|
||
},
|
||
};
|
||
datepicker.element.dispatchEvent(new CustomEvent(type, options));
|
||
}
|
||
|
||
// direction: -1 (to previous), 1 (to next)
|
||
function goToPrevOrNext(datepicker, direction) {
|
||
const {config, picker} = datepicker;
|
||
const {currentView, viewDate} = 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, config.minDate, config.maxDate);
|
||
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 clearSelection(datepicker) {
|
||
datepicker.setDate({clear: true});
|
||
}
|
||
|
||
function goToOrSelectToday(datepicker) {
|
||
const currentDate = today();
|
||
if (datepicker.config.todayButtonMode === 1) {
|
||
datepicker.setDate(currentDate, {forceRefresh: true, viewDate: currentDate});
|
||
} else {
|
||
datepicker.setFocusedDate(currentDate, true);
|
||
}
|
||
}
|
||
|
||
function unfocus(datepicker) {
|
||
const onBlur = () => {
|
||
if (datepicker.config.updateOnBlur) {
|
||
datepicker.update({revert: true});
|
||
} else {
|
||
datepicker.refresh('input');
|
||
}
|
||
datepicker.hide();
|
||
};
|
||
const element = datepicker.element;
|
||
|
||
if (isActiveElement(element)) {
|
||
element.addEventListener('blur', onBlur, {once: true});
|
||
} else {
|
||
onBlur();
|
||
}
|
||
}
|
||
|
||
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 onClickViewSwitch(datepicker) {
|
||
switchView(datepicker);
|
||
}
|
||
|
||
function onClickPrevButton(datepicker) {
|
||
goToPrevOrNext(datepicker, -1);
|
||
}
|
||
|
||
function onClickNextButton(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;
|
||
const data = target.dataset;
|
||
if (isMinView) {
|
||
datepicker.setDate(Number(data.date));
|
||
} else if (id === 1) {
|
||
goToSelectedMonthOrYear(datepicker, Number(data.month));
|
||
} else {
|
||
goToSelectedMonthOrYear(datepicker, Number(data.year));
|
||
}
|
||
}
|
||
|
||
function onMousedownPicker(ev) {
|
||
ev.preventDefault();
|
||
}
|
||
|
||
const orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {
|
||
obj[key] = `datepicker-orient-${key}`;
|
||
return obj;
|
||
}, {});
|
||
const toPx = num => num ? `${num}px` : num;
|
||
|
||
function processPickerOptions(picker, options) {
|
||
if ('title' in options) {
|
||
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 prevButton = picker.controls.prevButton;
|
||
emptyChildNodes(prevButton);
|
||
options.prevArrow.forEach((node) => {
|
||
prevButton.appendChild(node.cloneNode(true));
|
||
});
|
||
}
|
||
if (options.nextArrow) {
|
||
const nextButton = picker.controls.nextButton;
|
||
emptyChildNodes(nextButton);
|
||
options.nextArrow.forEach((node) => {
|
||
nextButton.appendChild(node.cloneNode(true));
|
||
});
|
||
}
|
||
if (options.locale) {
|
||
picker.controls.todayButton.textContent = options.locale.today;
|
||
picker.controls.clearButton.textContent = options.locale.clear;
|
||
}
|
||
if ('todayButton' in options) {
|
||
if (options.todayButton) {
|
||
showElement(picker.controls.todayButton);
|
||
} else {
|
||
hideElement(picker.controls.todayButton);
|
||
}
|
||
}
|
||
if ('minDate' in options || 'maxDate' in options) {
|
||
const {minDate, maxDate} = picker.datepicker.config;
|
||
picker.controls.todayButton.disabled = !isInRange(today(), minDate, maxDate);
|
||
}
|
||
if ('clearButton' in options) {
|
||
if (options.clearButton) {
|
||
showElement(picker.controls.clearButton);
|
||
} else {
|
||
hideElement(picker.controls.clearButton);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 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, rangeSideIndex} = datepicker;
|
||
const viewDate = dates.length > 0
|
||
? lastItemOf(dates)
|
||
: regularizeDate(config.defaultViewDate, config.pickLevel, rangeSideIndex);
|
||
return limitToRange(viewDate, config.minDate, config.maxDate);
|
||
}
|
||
|
||
// Change current view's view date
|
||
function setViewDate(picker, newDate) {
|
||
if (!('_oldViewDate' in picker) && newDate !== picker.viewDate) {
|
||
picker._oldViewDate = picker.viewDate;
|
||
}
|
||
picker.viewDate = newDate;
|
||
|
||
// 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.
|
||
const {id, year, first, last} = picker.currentView;
|
||
const viewYear = new Date(newDate).getFullYear();
|
||
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;
|
||
}
|
||
|
||
// find the closet scrollable ancestor elemnt under the body
|
||
function findScrollParents(el) {
|
||
const parent = getParent(el);
|
||
if (parent === document.body || !parent) {
|
||
return;
|
||
}
|
||
|
||
// checking overflow only is enough because computed overflow cannot be
|
||
// visible or a combination of visible and other when either axis is set
|
||
// to other than visible.
|
||
// (Setting one axis to other than 'visible' while the other is 'visible'
|
||
// results in the other axis turning to 'auto')
|
||
return window.getComputedStyle(parent).overflow !== 'visible'
|
||
? parent
|
||
: findScrollParents(parent);
|
||
}
|
||
|
||
// Class representing the picker UI
|
||
class Picker {
|
||
constructor(datepicker) {
|
||
const {config, inputField} = this.datepicker = datepicker;
|
||
|
||
const template = pickerTemplate.replace(/%buttonClass%/g, config.buttonClass);
|
||
const element = this.element = parseHTML(template).firstChild;
|
||
const [header, main, footer] = element.firstChild.children;
|
||
const title = header.firstElementChild;
|
||
const [prevButton, viewSwitch, nextButton] = header.lastElementChild.children;
|
||
const [todayButton, clearButton] = footer.firstChild.children;
|
||
const controls = {
|
||
title,
|
||
prevButton,
|
||
viewSwitch,
|
||
nextButton,
|
||
todayButton,
|
||
clearButton,
|
||
};
|
||
this.main = main;
|
||
this.controls = controls;
|
||
|
||
const elementClass = inputField ? 'dropdown' : 'inline';
|
||
element.classList.add(`datepicker-${elementClass}`);
|
||
|
||
processPickerOptions(this, config);
|
||
this.viewDate = computeResetViewDate(datepicker);
|
||
|
||
// set up event listeners
|
||
registerListeners(datepicker, [
|
||
[element, 'mousedown', onMousedownPicker],
|
||
[main, 'click', onClickView.bind(null, datepicker)],
|
||
[controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],
|
||
[controls.prevButton, 'click', onClickPrevButton.bind(null, datepicker)],
|
||
[controls.nextButton, 'click', onClickNextButton.bind(null, datepicker)],
|
||
[controls.todayButton, 'click', goToOrSelectToday.bind(null, datepicker)],
|
||
[controls.clearButton, 'click', clearSelection.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[config.startView];
|
||
|
||
this.currentView.render();
|
||
this.main.appendChild(this.currentView.element);
|
||
if (config.container) {
|
||
config.container.appendChild(this.element);
|
||
} else {
|
||
inputField.after(this.element);
|
||
}
|
||
}
|
||
|
||
setOptions(options) {
|
||
processPickerOptions(this, options);
|
||
this.views.forEach((view) => {
|
||
view.init(options, false);
|
||
});
|
||
this.currentView.render();
|
||
}
|
||
|
||
detach() {
|
||
this.element.remove();
|
||
}
|
||
|
||
show() {
|
||
if (this.active) {
|
||
return;
|
||
}
|
||
|
||
const {datepicker, element} = this;
|
||
const inputField = datepicker.inputField;
|
||
if (inputField) {
|
||
// ensure picker's direction matches input's
|
||
const inputDirection = getTextDirection(inputField);
|
||
if (inputDirection !== getTextDirection(getParent(element))) {
|
||
element.dir = inputDirection;
|
||
} else if (element.dir) {
|
||
element.removeAttribute('dir');
|
||
}
|
||
|
||
// Determine the picker's position first to prevent `orientation: 'auto'`
|
||
// from being miscalculated to 'bottom' after the picker temporarily
|
||
// shown below the input field expands the document height if the field
|
||
// is at the bottom edge of the document
|
||
this.place();
|
||
element.classList.add('active');
|
||
|
||
if (datepicker.config.disableTouchKeyboard) {
|
||
inputField.blur();
|
||
}
|
||
} else {
|
||
element.classList.add('active');
|
||
}
|
||
this.active = true;
|
||
triggerDatepickerEvent(datepicker, 'show');
|
||
}
|
||
|
||
hide() {
|
||
if (!this.active) {
|
||
return;
|
||
}
|
||
this.datepicker.exitEditMode();
|
||
this.element.classList.remove('active');
|
||
this.active = false;
|
||
triggerDatepickerEvent(this.datepicker, 'hide');
|
||
}
|
||
|
||
place() {
|
||
const {classList, style} = this.element;
|
||
// temporarily display the picker to get its size and offset parent
|
||
style.display = 'block';
|
||
|
||
const {
|
||
width: calendarWidth,
|
||
height: calendarHeight,
|
||
} = this.element.getBoundingClientRect();
|
||
const offsetParent = this.element.offsetParent;
|
||
// turn the picker back to hidden so that the position is determined with
|
||
// the state before it is shown.
|
||
style.display = '';
|
||
|
||
const {config, inputField} = this.datepicker;
|
||
const {
|
||
left: inputLeft,
|
||
top: inputTop,
|
||
right: inputRight,
|
||
bottom: inputBottom,
|
||
width: inputWidth,
|
||
height: inputHeight
|
||
} = inputField.getBoundingClientRect();
|
||
let {x: orientX, y: orientY} = config.orientation;
|
||
let left = inputLeft;
|
||
let top = inputTop;
|
||
|
||
// caliculate offsetLeft/Top of inputField
|
||
if (offsetParent === document.body || !offsetParent) {
|
||
left += window.scrollX;
|
||
top += window.scrollY;
|
||
} else {
|
||
const offsetParentRect = offsetParent.getBoundingClientRect();
|
||
left -= offsetParentRect.left - offsetParent.scrollLeft;
|
||
top -= offsetParentRect.top - offsetParent.scrollTop;
|
||
}
|
||
|
||
// caliculate the boundaries of the visible area that contains inputField
|
||
const scrollParent = findScrollParents(inputField);
|
||
let scrollAreaLeft = 0;
|
||
let scrollAreaTop = 0;
|
||
let {
|
||
clientWidth: scrollAreaRight,
|
||
clientHeight: scrollAreaBottom,
|
||
} = document.documentElement;
|
||
|
||
if (scrollParent) {
|
||
const scrollParentRect = scrollParent.getBoundingClientRect();
|
||
if (scrollParentRect.top > 0) {
|
||
scrollAreaTop = scrollParentRect.top;
|
||
}
|
||
if (scrollParentRect.left > 0) {
|
||
scrollAreaLeft = scrollParentRect.left;
|
||
}
|
||
if (scrollParentRect.right < scrollAreaRight) {
|
||
scrollAreaRight = scrollParentRect.right;
|
||
}
|
||
if (scrollParentRect.bottom < scrollAreaBottom) {
|
||
scrollAreaBottom = scrollParentRect.bottom;
|
||
}
|
||
}
|
||
|
||
// determine the horizontal orientation and left position
|
||
let adjustment = 0;
|
||
if (orientX === 'auto') {
|
||
if (inputLeft < scrollAreaLeft) {
|
||
orientX = 'left';
|
||
adjustment = scrollAreaLeft - inputLeft;
|
||
} else if (inputLeft + calendarWidth > scrollAreaRight) {
|
||
orientX = 'right';
|
||
if (scrollAreaRight < inputRight) {
|
||
adjustment = scrollAreaRight - inputRight;
|
||
}
|
||
} else if (getTextDirection(inputField) === 'rtl') {
|
||
orientX = inputRight - calendarWidth < scrollAreaLeft ? 'left' : 'right';
|
||
} else {
|
||
orientX = 'left';
|
||
}
|
||
}
|
||
if (orientX === 'right') {
|
||
left += inputWidth - calendarWidth;
|
||
}
|
||
left += adjustment;
|
||
|
||
// determine the vertical orientation and top position
|
||
if (orientY === 'auto') {
|
||
if (inputTop - calendarHeight > scrollAreaTop) {
|
||
orientY = inputBottom + calendarHeight > scrollAreaBottom ? 'top' : 'bottom';
|
||
} else {
|
||
orientY = 'bottom';
|
||
}
|
||
}
|
||
if (orientY === 'top') {
|
||
top -= calendarHeight;
|
||
} else {
|
||
top += inputHeight;
|
||
}
|
||
|
||
classList.remove(...Object.values(orientClasses));
|
||
classList.add(orientClasses[orientX], orientClasses[orientY]);
|
||
|
||
style.left = toPx(left);
|
||
style.top = toPx(top);
|
||
}
|
||
|
||
setViewSwitchLabel(labelText) {
|
||
this.controls.viewSwitch.textContent = labelText;
|
||
}
|
||
|
||
setPrevButtonDisabled(disabled) {
|
||
this.controls.prevButton.disabled = disabled;
|
||
}
|
||
|
||
setNextButtonDisabled(disabled) {
|
||
this.controls.nextButton.disabled = disabled;
|
||
}
|
||
|
||
changeView(viewId) {
|
||
const currentView = this.currentView;
|
||
if (viewId !== currentView.id) {
|
||
if (!this._oldView) {
|
||
this._oldView = currentView;
|
||
}
|
||
this.currentView = this.views[viewId];
|
||
this._renderMethod = 'render';
|
||
}
|
||
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(viewDate = undefined) {
|
||
const newViewDate = viewDate === undefined
|
||
? computeResetViewDate(this.datepicker)
|
||
: viewDate;
|
||
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 {currentView, datepicker, _oldView: oldView} = this;
|
||
const oldViewDate = new Date(this._oldViewDate);
|
||
const renderMethod = (quickRender && this._renderMethod) || 'render';
|
||
delete this._oldView;
|
||
delete this._oldViewDate;
|
||
delete this._renderMethod;
|
||
|
||
currentView[renderMethod]();
|
||
if (oldView) {
|
||
this.main.replaceChild(currentView.element, oldView.element);
|
||
triggerDatepickerEvent(datepicker, 'changeView');
|
||
}
|
||
if (!isNaN(oldViewDate)) {
|
||
const newViewDate = new Date(this.viewDate);
|
||
if (newViewDate.getFullYear() !== oldViewDate.getFullYear()) {
|
||
triggerDatepickerEvent(datepicker, 'changeYear');
|
||
}
|
||
if (newViewDate.getMonth() !== oldViewDate.getMonth()) {
|
||
triggerDatepickerEvent(datepicker, 'changeMonth');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 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 unavailability of the date
|
||
// - args: time value; return: 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, direction, vertical) {
|
||
const picker = datepicker.picker;
|
||
const currentView = picker.currentView;
|
||
const step = currentView.step || 1;
|
||
let viewDate = picker.viewDate;
|
||
let addFn;
|
||
switch (currentView.id) {
|
||
case 0:
|
||
viewDate = addDays(viewDate, vertical ? direction * 7 : direction);
|
||
addFn = addDays;
|
||
break;
|
||
case 1:
|
||
viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);
|
||
addFn = addMonths;
|
||
break;
|
||
default:
|
||
viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);
|
||
addFn = addYears;
|
||
}
|
||
viewDate = findNextAvailableOne(
|
||
viewDate,
|
||
addFn,
|
||
direction < 0 ? -step : step,
|
||
(date) => currentView.disabled.includes(date),
|
||
currentView.minDate,
|
||
currentView.maxDate
|
||
);
|
||
if (viewDate !== undefined) {
|
||
picker.changeFocus(viewDate).render();
|
||
}
|
||
}
|
||
|
||
function onKeydown(datepicker, ev) {
|
||
const {config, picker, editMode} = datepicker;
|
||
const active = picker.active;
|
||
const {key, altKey, shiftKey} = ev;
|
||
const ctrlOrMetaKey = ev.ctrlKey || ev.metaKey;
|
||
const cancelEvent = () => {
|
||
ev.preventDefault();
|
||
ev.stopPropagation();
|
||
};
|
||
|
||
// tab/enter keys should not be taken by shortcut keys
|
||
if (key === 'Tab') {
|
||
unfocus(datepicker);
|
||
return;
|
||
}
|
||
if (key === 'Enter') {
|
||
if (!active) {
|
||
datepicker.update();
|
||
} else if (editMode) {
|
||
datepicker.exitEditMode({update: true, autohide: config.autohide});
|
||
} else {
|
||
const currentView = picker.currentView;
|
||
if (currentView.isMinView) {
|
||
datepicker.setDate(picker.viewDate);
|
||
} else {
|
||
picker.changeView(currentView.id - 1).render();
|
||
cancelEvent();
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
|
||
const shortcutKeys = config.shortcutKeys;
|
||
const keyInfo = {key, ctrlOrMetaKey, altKey, shiftKey};
|
||
const shortcut = Object.keys(shortcutKeys).find((item) => {
|
||
const keyDef = shortcutKeys[item];
|
||
return !Object.keys(keyDef).find(prop => keyDef[prop] !== keyInfo[prop]);
|
||
});
|
||
if (shortcut) {
|
||
let action;
|
||
if (shortcut === 'toggle') {
|
||
action = shortcut;
|
||
} else if (editMode) {
|
||
if (shortcut === 'exitEditMode') {
|
||
action = shortcut;
|
||
}
|
||
} else if (active) {
|
||
if (shortcut === 'hide') {
|
||
action = shortcut;
|
||
} else if (shortcut === 'prevButton') {
|
||
action = [goToPrevOrNext, [datepicker, -1]];
|
||
} else if (shortcut === 'nextButton') {
|
||
action = [goToPrevOrNext, [datepicker, 1]];
|
||
} else if (shortcut === 'viewSwitch') {
|
||
action = [switchView, [datepicker]];
|
||
} else if (config.clearButton && shortcut === 'clearButton') {
|
||
action = [clearSelection, [datepicker]];
|
||
} else if (config.todayButton && shortcut === 'todayButton') {
|
||
action = [goToOrSelectToday, [datepicker]];
|
||
}
|
||
} else if (shortcut === 'show') {
|
||
action = shortcut;
|
||
}
|
||
if (action) {
|
||
if (Array.isArray(action)) {
|
||
action[0].apply(null, action[1]);
|
||
} else {
|
||
datepicker[action]();
|
||
}
|
||
cancelEvent();
|
||
return;
|
||
}
|
||
}
|
||
|
||
// perform as a regular <input> when picker in hidden or in edit mode
|
||
if (!active || editMode) {
|
||
return;
|
||
}
|
||
|
||
const handleArrowKeyPress = (direction, vertical) => {
|
||
if (shiftKey || ctrlOrMetaKey || altKey) {
|
||
datepicker.enterEditMode();
|
||
} else {
|
||
moveByArrowKey(datepicker, direction, vertical);
|
||
ev.preventDefault();
|
||
}
|
||
};
|
||
|
||
if (key === 'ArrowLeft') {
|
||
handleArrowKeyPress(-1, false);
|
||
} else if (key === 'ArrowRight') {
|
||
handleArrowKeyPress(1, false);
|
||
} else if (key === 'ArrowUp') {
|
||
handleArrowKeyPress(-1, true);
|
||
} else if (key === 'ArrowDown') {
|
||
handleArrowKeyPress(1, true);
|
||
} else if (
|
||
key === 'Backspace'
|
||
|| key === 'Delete'
|
||
// When autofill is performed, Chromium-based browsers trigger fake
|
||
// keydown/keyup events that don't have the `key` property (on Edge,
|
||
// keyup only) in addition to the input event. Therefore, we need to
|
||
// check the existence of `key`'s value before checking the length.
|
||
// (issue #144)
|
||
|| (key && key.length === 1 && !ctrlOrMetaKey)
|
||
) {
|
||
datepicker.enterEditMode();
|
||
}
|
||
}
|
||
|
||
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 = isActiveElement(el);
|
||
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, picker} = datepicker;
|
||
// check both picker's and input's activeness to make updateOnBlur work in
|
||
// the cases where...
|
||
// - picker is hidden by ESC key press → input stays focused
|
||
// - input is unfocused by closing mobile keyboard → piker is kept shown
|
||
if (!picker.active && !isActiveElement(element)) {
|
||
return;
|
||
}
|
||
const pickerElem = 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) {
|
||
if (inputDates.length === 0) {
|
||
// empty input is considered valid unless origiDates is passed
|
||
return clear ? [] : undefined;
|
||
}
|
||
|
||
const {config, dates: origDates, rangeSideIndex} = datepicker;
|
||
const {pickLevel, maxNumberOfDates} = config;
|
||
let newDates = inputDates.reduce((dates, dt) => {
|
||
let date = parseDate(dt, config.format, config.locale);
|
||
if (date === undefined) {
|
||
return dates;
|
||
}
|
||
// 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
|
||
date = regularizeDate(date, pickLevel, rangeSideIndex);
|
||
if (
|
||
isInRange(date, config.minDate, config.maxDate)
|
||
&& !dates.includes(date)
|
||
&& !config.checkDisabled(date, pickLevel)
|
||
&& (pickLevel > 0 || !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 maxNumberOfDates && newDates.length > maxNumberOfDates
|
||
? newDates.slice(maxNumberOfDates * -1)
|
||
: newDates;
|
||
}
|
||
|
||
// refresh the UI elements
|
||
// modes: 1: input only, 2, picker only, 3 both
|
||
function refreshUI(datepicker, mode = 3, quickRender = true, viewDate = undefined) {
|
||
const {config, picker, inputField} = datepicker;
|
||
if (mode & 2) {
|
||
const newView = picker.active ? config.pickLevel : config.startView;
|
||
picker.update(viewDate).changeView(newView).render(quickRender);
|
||
}
|
||
if (mode & 1 && inputField) {
|
||
inputField.value = stringifyDates(datepicker.dates, config);
|
||
}
|
||
}
|
||
|
||
function setDate(datepicker, inputDates, options) {
|
||
const config = datepicker.config;
|
||
let {clear, render, autohide, revert, forceRefresh, viewDate} = options;
|
||
if (render === undefined) {
|
||
render = true;
|
||
}
|
||
if (!render) {
|
||
autohide = forceRefresh = false;
|
||
} else if (autohide === undefined) {
|
||
autohide = config.autohide;
|
||
}
|
||
viewDate = parseDate(viewDate, config.format, config.locale);
|
||
|
||
const newDates = processInputDates(datepicker, inputDates, clear);
|
||
if (!newDates && !revert) {
|
||
return;
|
||
}
|
||
if (newDates && newDates.toString() !== datepicker.dates.toString()) {
|
||
datepicker.dates = newDates;
|
||
refreshUI(datepicker, render ? 3 : 1, true, viewDate);
|
||
triggerDatepickerEvent(datepicker, 'changeDate');
|
||
} else {
|
||
refreshUI(datepicker, forceRefresh ? 3 : 1, true, viewDate);
|
||
}
|
||
|
||
if (autohide) {
|
||
datepicker.hide();
|
||
}
|
||
}
|
||
|
||
function getOutputConverter(datepicker, format) {
|
||
return format
|
||
? date => formatDate(date, format, datepicker.config.locale)
|
||
: date => new Date(date);
|
||
}
|
||
|
||
/**
|
||
* 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;
|
||
this.dates = [];
|
||
|
||
// initialize config
|
||
const config = this.config = Object.assign({
|
||
buttonClass: (options.buttonClass && String(options.buttonClass)) || 'button',
|
||
container: null,
|
||
defaultViewDate: today(),
|
||
maxDate: undefined,
|
||
minDate: undefined,
|
||
}, processOptions(defaultOptions, this));
|
||
|
||
// configure by type
|
||
let inputField;
|
||
if (element.tagName === 'INPUT') {
|
||
inputField = this.inputField = element;
|
||
inputField.classList.add('datepicker-input');
|
||
if (options.container) {
|
||
// omit string type check because it doesn't guarantee to avoid errors
|
||
// (invalid selector string causes abend with sytax error)
|
||
config.container = options.container instanceof HTMLElement
|
||
? options.container
|
||
: document.querySelector(options.container);
|
||
}
|
||
} else {
|
||
config.container = element;
|
||
}
|
||
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;
|
||
this.rangepicker = rangepicker;
|
||
this.rangeSideIndex = index;
|
||
}
|
||
|
||
// set up config
|
||
this._options = options;
|
||
Object.assign(config, processOptions(options, this));
|
||
config.shortcutKeys = createShortcutKeyConfig(options.shortcutKeys || {});
|
||
|
||
// process initial value
|
||
const initialDates = stringToArray(
|
||
element.value || element.dataset.date,
|
||
config.dateDelimiter
|
||
);
|
||
delete element.dataset.date;
|
||
const inputDateValues = processInputDates(this, initialDates);
|
||
if (inputDateValues && inputDateValues.length > 0) {
|
||
this.dates = inputDateValues;
|
||
}
|
||
if (inputField) {
|
||
inputField.value = stringifyDates(this.dates, config);
|
||
}
|
||
|
||
// set up picekr element
|
||
const picker = this.picker = new Picker(this);
|
||
|
||
const keydownListener = [element, 'keydown', onKeydown.bind(null, this)];
|
||
if (inputField) {
|
||
registerListeners(this, [
|
||
keydownListener,
|
||
[inputField, 'focus', onFocus.bind(null, this)],
|
||
[inputField, 'mousedown', onMousedown.bind(null, this)],
|
||
[inputField, 'click', onClickInput.bind(null, this)],
|
||
[inputField, 'paste', onPaste.bind(null, this)],
|
||
// To detect a click on outside, just listening to mousedown is enough,
|
||
// no need to listen to touchstart.
|
||
// Actually, listening to touchstart can be a problem because, while
|
||
// mousedown is fired only on tapping but not on swiping/pinching,
|
||
// touchstart is fired on swiping/pinching as well.
|
||
// (issue #95)
|
||
[document, 'mousedown', onClickOutside.bind(null, this)],
|
||
[window, 'resize', picker.place.bind(picker)]
|
||
]);
|
||
} else {
|
||
registerListeners(this, [keydownListener]);
|
||
this.show();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 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 newOptions = processOptions(options, this);
|
||
Object.assign(this._options, options);
|
||
Object.assign(this.config, newOptions);
|
||
this.picker.setOptions(newOptions);
|
||
|
||
refreshUI(this, 3);
|
||
}
|
||
|
||
/**
|
||
* Show the picker element
|
||
*/
|
||
show() {
|
||
if (this.inputField) {
|
||
const {config, inputField} = this;
|
||
if (inputField.disabled || (inputField.readOnly && !config.enableOnReadonly)) {
|
||
return;
|
||
}
|
||
if (!isActiveElement(inputField) && !config.disableTouchKeyboard) {
|
||
this._showing = true;
|
||
inputField.focus();
|
||
delete this._showing;
|
||
}
|
||
}
|
||
this.picker.show();
|
||
}
|
||
|
||
/**
|
||
* Hide the picker element
|
||
* Not available on inline picker
|
||
*/
|
||
hide() {
|
||
if (!this.inputField) {
|
||
return;
|
||
}
|
||
this.picker.hide();
|
||
this.picker.update().changeView(this.config.startView).render();
|
||
}
|
||
|
||
/**
|
||
* Toggle the display of the picker element
|
||
* Not available on inline picker
|
||
*
|
||
* Unlike hide(), the picker does not return to the start view when hiding.
|
||
*/
|
||
toggle() {
|
||
if (!this.picker.active) {
|
||
this.show();
|
||
} else if (this.inputField) {
|
||
this.picker.hide();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Destroy the Datepicker instance
|
||
* @return {Detepicker} - the instance destroyed
|
||
*/
|
||
destroy() {
|
||
this.hide();
|
||
unregisterListeners(this);
|
||
this.picker.detach();
|
||
const element = this.element;
|
||
element.classList.remove('datepicker-input');
|
||
delete 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 undefined in sigledate mode
|
||
*/
|
||
getDate(format = undefined) {
|
||
const callback = getOutputConverter(this, format);
|
||
|
||
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. (The input field also remains untouched unless revert: true
|
||
* option is used.)
|
||
* Replacing the selection with the same date(s) also causes a similar
|
||
* situation. In both cases, the method does not refresh the picker element
|
||
* unless forceRefresh: true option is used.
|
||
*
|
||
* If viewDate option is used, the method changes the focused date to the
|
||
* specified date instead of the last item of the selection.
|
||
*
|
||
* @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
|
||
* - revert: {boolean} - Whether to refresh the input field when all the
|
||
* passed dates are invalid
|
||
* default: false
|
||
* - forceRefresh: {boolean} - Whether to refresh the picker element when
|
||
* passed dates don't change the existing selection
|
||
* default: false
|
||
* - viewDate: {Date|Number|String} - Date to be focused after setiing date(s)
|
||
* default: The last item of the resulting selection, or defaultViewDate
|
||
* config option if none is selected
|
||
*/
|
||
setDate(...args) {
|
||
const dates = [...args];
|
||
const opts = {};
|
||
const lastArg = lastItemOf(args);
|
||
if (
|
||
lastArg
|
||
&& typeof lastArg === 'object'
|
||
&& !Array.isArray(lastArg)
|
||
&& !(lastArg instanceof Date)
|
||
) {
|
||
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.
|
||
*
|
||
* In the case that all the entered dates are invalid (unparsable, repeated,
|
||
* disabled or out-of-range), which is distinguished from empty input field,
|
||
* the method leaves the input field untouched as well as the selection by
|
||
* default. If revert: true option is used in this case, the input field is
|
||
* refreshed with the existing selection.
|
||
* The method also doesn't refresh the picker element in this case and when
|
||
* the entered dates are the same as the existing selection. If
|
||
* forceRefresh: true option is used, the picker element is refreshed in
|
||
* these cases too.
|
||
*
|
||
* @param {Object} [options] - function options
|
||
* - autohide: {boolean} - whether to hide the picker element after refresh
|
||
* default: false
|
||
* - revert: {boolean} - Whether to refresh the input field when all the
|
||
* passed dates are invalid
|
||
* default: false
|
||
* - forceRefresh: {boolean} - Whether to refresh the picer element when
|
||
* input field's value doesn't change the existing selection
|
||
* default: false
|
||
*/
|
||
update(options = undefined) {
|
||
if (!this.inputField) {
|
||
return;
|
||
}
|
||
|
||
const opts = Object.assign(options || {}, {clear: true, render: true, viewDate: undefined});
|
||
const inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);
|
||
setDate(this, inputDates, opts);
|
||
}
|
||
|
||
/**
|
||
* Get the focused date
|
||
*
|
||
* The method returns a Date object of focused date by default. If format
|
||
* string is passed, it returns date string formatted in given format.
|
||
*
|
||
* @param {String} [format] - format string to stringify the date
|
||
* @return {Date|String} - focused date (viewDate)
|
||
*/
|
||
getFocusedDate(format = undefined) {
|
||
return getOutputConverter(this, format)(this.picker.viewDate);
|
||
}
|
||
|
||
/**
|
||
* Set focused date
|
||
*
|
||
* By default, the method updates the focus on the view shown at the time,
|
||
* or the one set to the startView config option if the picker is hidden.
|
||
* When resetView: true is passed, the view displayed is changed to the
|
||
* pickLevel config option's if the picker is shown.
|
||
*
|
||
* @param {Date|Number|String} viewDate - date string, Date object, time
|
||
* values of the date to focus
|
||
* @param {Boolean} [resetView] - whether to change the view to pickLevel
|
||
* config option's when the picker is shown. Ignored when the picker is
|
||
* hidden
|
||
*/
|
||
setFocusedDate(viewDate, resetView = false) {
|
||
const {config, picker, active, rangeSideIndex} = this;
|
||
const pickLevel = config.pickLevel;
|
||
const newViewDate = parseDate(viewDate, config.format, config.locale);
|
||
if (newViewDate === undefined) {
|
||
return;
|
||
}
|
||
|
||
picker.changeFocus(regularizeDate(newViewDate, pickLevel, rangeSideIndex));
|
||
if (active && resetView) {
|
||
picker.changeView(pickLevel);
|
||
}
|
||
picker.render();
|
||
}
|
||
|
||
/**
|
||
* 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() {
|
||
const inputField = this.inputField;
|
||
if (!inputField || inputField.readOnly || !this.picker.active || this.editMode) {
|
||
return;
|
||
}
|
||
this.editMode = true;
|
||
inputField.classList.add('in-edit');
|
||
}
|
||
|
||
/**
|
||
* 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.inputField || !this.editMode) {
|
||
return;
|
||
}
|
||
const opts = Object.assign({update: false}, options);
|
||
delete this.editMode;
|
||
this.inputField.classList.remove('in-edit');
|
||
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 [datepicker0, datepicker1] = 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) {
|
||
datepicker0.setDate(otherDate, setDateOptions);
|
||
datepicker1.setDate(changedDate, setDateOptions);
|
||
} else if (changedSide === 1 && changedDate < otherDate) {
|
||
datepicker0.setDate(changedDate, setDateOptions);
|
||
datepicker1.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.forEach((datepicker) => {
|
||
datepicker.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 = {}) {
|
||
let 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 = inputs.slice(0, 2);
|
||
Object.freeze(inputs);
|
||
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 = this.datepickers = [];
|
||
inputs.forEach((input) => {
|
||
setupDatepicker(this, changeDateListener, input, cleanOptions);
|
||
});
|
||
Object.freeze(datepickers);
|
||
Object.defineProperty(this, 'dates', {
|
||
get() {
|
||
return datepickers.map(datepicker => datepicker.dates[0]);
|
||
},
|
||
});
|
||
// normalize the range if inital dates are given
|
||
if (datepickers[0].dates.length > 0) {
|
||
onChangeDate(this, {target: inputs[0]});
|
||
} else if (datepickers[1].dates.length > 0) {
|
||
onChangeDate(this, {target: inputs[1]});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 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.forEach((datepicker) => {
|
||
datepicker.setOptions(cleanOptions);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Destroy the DateRangePicker instance
|
||
* @return {DateRangePicker} - the instance destroyed
|
||
*/
|
||
destroy() {
|
||
this.datepickers.forEach((datepicker) => {
|
||
datepicker.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 {
|
||
datepickers: [datepicker0, datepicker1],
|
||
inputs: [input0, input1],
|
||
dates: [origDate0, origDate1],
|
||
} = this;
|
||
|
||
// 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] !== origDate1) {
|
||
onChangeDate(this, {target: input1});
|
||
} else if (datepicker0.dates[0] !== origDate0) {
|
||
onChangeDate(this, {target: input0});
|
||
}
|
||
}
|
||
}
|
||
|
||
window.Datepicker = Datepicker;
|
||
window.DateRangePicker = DateRangePicker;
|
||
|
||
})();
|