5857 lines
311 KiB
JavaScript
5857 lines
311 KiB
JavaScript
/*!
|
|
react-datepicker v9.1.0
|
|
https://github.com/Hacker0x01/react-datepicker
|
|
Released under the MIT License.
|
|
*/
|
|
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('clsx'), require('react'), require('date-fns'), require('@floating-ui/react'), require('react-dom')) :
|
|
typeof define === 'function' && define.amd ? define(['exports', 'clsx', 'react', 'date-fns', '@floating-ui/react', 'react-dom'], factory) :
|
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DatePicker = {}, global.clsx, global.React, global.dateFns, global.FloatingUIReact, global.ReactDOM));
|
|
})(this, (function (exports, clsx, React, dateFns, react, ReactDOM) { 'use strict';
|
|
|
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
|
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
|
|
|
|
/******************************************************************************
|
|
Copyright (c) Microsoft Corporation.
|
|
|
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
purpose with or without fee is hereby granted.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
PERFORMANCE OF THIS SOFTWARE.
|
|
***************************************************************************** */
|
|
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
|
|
var _extendStatics = function extendStatics(d, b) {
|
|
_extendStatics = Object.setPrototypeOf || {
|
|
__proto__: []
|
|
} instanceof Array && function (d, b) {
|
|
d.__proto__ = b;
|
|
} || function (d, b) {
|
|
for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
|
|
};
|
|
return _extendStatics(d, b);
|
|
};
|
|
function __extends(d, b) {
|
|
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
_extendStatics(d, b);
|
|
function __() {
|
|
this.constructor = d;
|
|
}
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
}
|
|
var _assign = function __assign() {
|
|
_assign = Object.assign || function __assign(t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
}
|
|
return t;
|
|
};
|
|
return _assign.apply(this, arguments);
|
|
};
|
|
function __spreadArray(to, from, pack) {
|
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
if (ar || !(i in from)) {
|
|
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
ar[i] = from[i];
|
|
}
|
|
}
|
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
}
|
|
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
var e = new Error(message);
|
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
};
|
|
|
|
var CalendarContainer = function (_a) {
|
|
var _b = _a.showTimeSelectOnly, showTimeSelectOnly = _b === void 0 ? false : _b, _c = _a.showTime, showTime = _c === void 0 ? false : _c, className = _a.className, children = _a.children, inline = _a.inline;
|
|
var ariaLabel = showTimeSelectOnly
|
|
? "Choose Time"
|
|
: "Choose Date".concat(showTime ? " and Time" : "");
|
|
return (React__default.default.createElement("div", { className: className, "aria-label": ariaLabel, role: inline ? undefined : "dialog", "aria-modal": inline ? undefined : "true", translate: "no" }, children));
|
|
};
|
|
|
|
var useDetectClickOutside = function (onClickOutside, ignoreClass) {
|
|
var ref = React.useRef(null);
|
|
var onClickOutsideRef = React.useRef(onClickOutside);
|
|
React.useEffect(function () {
|
|
onClickOutsideRef.current = onClickOutside;
|
|
}, [onClickOutside]);
|
|
var handleClickOutside = React.useCallback(function (event) {
|
|
var _a;
|
|
var target = (event.composed &&
|
|
event.composedPath &&
|
|
event
|
|
.composedPath()
|
|
.find(function (eventTarget) { return eventTarget instanceof Node; })) ||
|
|
event.target;
|
|
if (ref.current && !ref.current.contains(target)) {
|
|
if (!(ignoreClass &&
|
|
target instanceof HTMLElement &&
|
|
target.classList.contains(ignoreClass))) {
|
|
(_a = onClickOutsideRef.current) === null || _a === void 0 ? void 0 : _a.call(onClickOutsideRef, event);
|
|
}
|
|
}
|
|
}, [ignoreClass]);
|
|
React.useEffect(function () {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return function () {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [handleClickOutside]);
|
|
return ref;
|
|
};
|
|
var ClickOutsideWrapper = function (_a) {
|
|
var children = _a.children, onClickOutside = _a.onClickOutside, className = _a.className, containerRef = _a.containerRef, style = _a.style, ignoreClass = _a.ignoreClass;
|
|
var detectRef = useDetectClickOutside(onClickOutside, ignoreClass);
|
|
return (React__default.default.createElement("div", { className: className, style: style, ref: function (node) {
|
|
detectRef.current = node;
|
|
if (containerRef) {
|
|
containerRef.current = node;
|
|
}
|
|
} }, children));
|
|
};
|
|
|
|
// Cache for the date-fns-tz module
|
|
var dateFnsTz = null;
|
|
var dateFnsTzLoadAttempted = false;
|
|
/**
|
|
* Attempts to load date-fns-tz module.
|
|
* Returns null if the module is not installed.
|
|
*/
|
|
function getDateFnsTz() {
|
|
if (dateFnsTzLoadAttempted) {
|
|
return dateFnsTz;
|
|
}
|
|
dateFnsTzLoadAttempted = true;
|
|
try {
|
|
// Dynamic require for date-fns-tz
|
|
// Use a variable to prevent webpack from statically analyzing the require
|
|
// and showing warnings when the optional dependency is not installed
|
|
// See: https://github.com/Hacker0x01/react-datepicker/issues/6154
|
|
var dateFnsTzModuleName = "date-fns-tz";
|
|
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
dateFnsTz = require(dateFnsTzModuleName);
|
|
}
|
|
catch (_a) {
|
|
/* istanbul ignore next - only executes when date-fns-tz is not installed */
|
|
dateFnsTz = null;
|
|
}
|
|
return dateFnsTz;
|
|
}
|
|
/**
|
|
* Converts a date to the specified timezone.
|
|
* If no timezone is specified or date-fns-tz is not installed, returns the original date.
|
|
*
|
|
* @param date - The date to convert
|
|
* @param timeZone - The IANA timezone identifier (e.g., "America/New_York", "UTC")
|
|
* @returns The date in the specified timezone
|
|
*/
|
|
function toZonedTime(date, timeZone) {
|
|
if (!timeZone) {
|
|
return date;
|
|
}
|
|
var tz = getDateFnsTz();
|
|
if (!tz) {
|
|
if (process.env.NODE_ENV !== "production") {
|
|
console.warn('react-datepicker: timeZone prop requires "date-fns-tz" package. ' +
|
|
"Please install it: npm install date-fns-tz");
|
|
}
|
|
return date;
|
|
}
|
|
return tz.toZonedTime(date, timeZone);
|
|
}
|
|
/**
|
|
* Converts a date from the specified timezone to UTC.
|
|
* If no timezone is specified or date-fns-tz is not installed, returns the original date.
|
|
*
|
|
* @param date - The date in the specified timezone
|
|
* @param timeZone - The IANA timezone identifier (e.g., "America/New_York", "UTC")
|
|
* @returns The date in UTC
|
|
*/
|
|
function fromZonedTime(date, timeZone) {
|
|
if (!timeZone) {
|
|
return date;
|
|
}
|
|
var tz = getDateFnsTz();
|
|
if (!tz) {
|
|
if (process.env.NODE_ENV !== "production") {
|
|
console.warn('react-datepicker: timeZone prop requires "date-fns-tz" package. ' +
|
|
"Please install it: npm install date-fns-tz");
|
|
}
|
|
return date;
|
|
}
|
|
return tz.fromZonedTime(date, timeZone);
|
|
}
|
|
var KeyType;
|
|
(function (KeyType) {
|
|
KeyType["ArrowUp"] = "ArrowUp";
|
|
KeyType["ArrowDown"] = "ArrowDown";
|
|
KeyType["ArrowLeft"] = "ArrowLeft";
|
|
KeyType["ArrowRight"] = "ArrowRight";
|
|
KeyType["PageUp"] = "PageUp";
|
|
KeyType["PageDown"] = "PageDown";
|
|
KeyType["Home"] = "Home";
|
|
KeyType["End"] = "End";
|
|
KeyType["Enter"] = "Enter";
|
|
KeyType["Space"] = " ";
|
|
KeyType["Tab"] = "Tab";
|
|
KeyType["Escape"] = "Escape";
|
|
KeyType["Backspace"] = "Backspace";
|
|
KeyType["X"] = "x";
|
|
})(KeyType || (KeyType = {}));
|
|
function getLocaleScope() {
|
|
// Use this cast to avoid messing with users globalThis (like window) and the rest of keys in the globalThis object we don't care about
|
|
var scope = (typeof window !== "undefined"
|
|
? window
|
|
: globalThis);
|
|
return scope;
|
|
}
|
|
var DEFAULT_YEAR_ITEM_NUMBER = 12;
|
|
// ** Date Constructors **
|
|
function newDate(value) {
|
|
if (value == null) {
|
|
return new Date();
|
|
}
|
|
var d = typeof value === "string" ? dateFns.parseISO(value) : dateFns.toDate(value);
|
|
return isValid(d) ? d : new Date();
|
|
}
|
|
/**
|
|
* Parses a date.
|
|
*
|
|
* @param value - The string representing the Date in a parsable form, e.g., ISO 1861
|
|
* @param dateFormat - The date format.
|
|
* @param locale - The locale.
|
|
* @param strictParsing - The strict parsing flag.
|
|
* @param refDate - The base date to be passed to date-fns parse() function.
|
|
* @returns - The parsed date or null.
|
|
*/
|
|
function parseDate(value, dateFormat, locale, strictParsing, refDate) {
|
|
if (refDate === void 0) { refDate = newDate(); }
|
|
var localeObject = getLocaleObject(locale) || getLocaleObject(getDefaultLocale());
|
|
var formats = Array.isArray(dateFormat) ? dateFormat : [dateFormat];
|
|
for (var _i = 0, formats_1 = formats; _i < formats_1.length; _i++) {
|
|
var format_1 = formats_1[_i];
|
|
var parsedDate = dateFns.parse(value, format_1, refDate, {
|
|
locale: localeObject,
|
|
useAdditionalWeekYearTokens: true,
|
|
useAdditionalDayOfYearTokens: true,
|
|
});
|
|
if (isValid(parsedDate) &&
|
|
(!strictParsing || value === formatDate(parsedDate, format_1, locale))) {
|
|
return parsedDate;
|
|
}
|
|
}
|
|
// When strictParsing is false, try native Date parsing as a fallback
|
|
// This allows flexible input formats like "12/05/2025" or "2025-12-16"
|
|
// even when the dateFormat prop specifies a different format.
|
|
// Only attempt this for inputs that look like complete dates (minimum
|
|
// length of 8 characters, e.g., "1/1/2000") to avoid parsing partial
|
|
// inputs like "03/" or "2000" which should be handled by parseDateForNavigation.
|
|
if (!strictParsing && value && value.length >= 8) {
|
|
var nativeDate = new Date(value);
|
|
if (dateFns.isValid(nativeDate)) {
|
|
return nativeDate;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
/**
|
|
* Parses a partial date string for calendar navigation purposes.
|
|
* Unlike parseDate, this function attempts to extract whatever date
|
|
* information is available (year, month) from a partial input,
|
|
* returning a date suitable for navigating the calendar view.
|
|
*
|
|
* @param value - The date string to parse.
|
|
* @param refDate - The reference date to use for missing components.
|
|
* @returns - A date for navigation or null if no date info could be extracted.
|
|
*/
|
|
function parseDateForNavigation(value, refDate) {
|
|
if (refDate === void 0) { refDate = newDate(); }
|
|
if (!value)
|
|
return null;
|
|
// Try to extract a 4-digit year from the input
|
|
var yearMatch = value.match(/\b(1\d{3}|2\d{3})\b/);
|
|
if (!yearMatch || !yearMatch[1])
|
|
return null;
|
|
var year = parseInt(yearMatch[1], 10);
|
|
// Try to extract a month (1-12) from the input
|
|
// Look for patterns like "03/", "/03", "03-", "-03" or standalone "03" at start
|
|
var monthMatch = value.match(/(?:^|[/\-\s])?(0?[1-9]|1[0-2])(?:[/\-\s]|$)/);
|
|
var month = monthMatch && monthMatch[1]
|
|
? parseInt(monthMatch[1], 10) - 1
|
|
: refDate.getMonth();
|
|
// Return a date with the extracted year and month, using day 1
|
|
return new Date(year, month, 1);
|
|
}
|
|
/**
|
|
* Checks if a given date is a valid Date object.
|
|
* @param date - The date to be checked.
|
|
* @returns A boolean value indicating whether the date is valid.
|
|
*/
|
|
function isValid(date) {
|
|
return dateFns.isValid(date);
|
|
}
|
|
/**
|
|
* Safely returns a valid Date or null.
|
|
* This handles cases where a value might be passed as a string or other
|
|
* invalid type at runtime, even though TypeScript expects a Date.
|
|
* @param date - The value to check (typed as Date but could be anything at runtime)
|
|
* @returns The date if it's a valid Date object, otherwise null
|
|
*/
|
|
function safeToDate(date) {
|
|
if (date == null) {
|
|
return null;
|
|
}
|
|
// Check if it's actually a Date object AND is valid
|
|
if (dateFns.isDate(date) && dateFns.isValid(date)) {
|
|
return date;
|
|
}
|
|
return null;
|
|
}
|
|
// ** Date Formatting **
|
|
/**
|
|
* Formats a date.
|
|
*
|
|
* @param date - The date.
|
|
* @param formatStr - The format string.
|
|
* @param locale - The locale.
|
|
* @returns - The formatted date.
|
|
*/
|
|
function formatDate(date, formatStr, locale) {
|
|
if (locale === "en") {
|
|
return dateFns.format(date, formatStr, {
|
|
useAdditionalWeekYearTokens: true,
|
|
useAdditionalDayOfYearTokens: true,
|
|
});
|
|
}
|
|
var localeObj = locale ? getLocaleObject(locale) : undefined;
|
|
if (locale && !localeObj) {
|
|
console.warn("A locale object was not found for the provided string [\"".concat(locale, "\"]."));
|
|
}
|
|
localeObj = localeObj || getLocaleObject(getDefaultLocale());
|
|
return dateFns.format(date, formatStr, {
|
|
locale: localeObj,
|
|
useAdditionalWeekYearTokens: true,
|
|
useAdditionalDayOfYearTokens: true,
|
|
});
|
|
}
|
|
/**
|
|
* Safely formats a date.
|
|
*
|
|
* @param date - The date.
|
|
* @param options - An object containing the dateFormat and locale.
|
|
* @returns - The formatted date or an empty string.
|
|
*/
|
|
function safeDateFormat(date, _a) {
|
|
var dateFormat = _a.dateFormat, locale = _a.locale;
|
|
var formatStr = (Array.isArray(dateFormat) && dateFormat.length > 0
|
|
? dateFormat[0]
|
|
: dateFormat); // Cast to string because it's impossible to get `string | string[] | undefined` here and typescript doesn't know that
|
|
return (date && formatDate(date, formatStr, locale)) || "";
|
|
}
|
|
/**
|
|
* Used as a delimiter to separate two dates when formatting a date range
|
|
*/
|
|
var DATE_RANGE_SEPARATOR = " - ";
|
|
/**
|
|
* Safely formats a date range.
|
|
*
|
|
* @param startDate - The start date.
|
|
* @param endDate - The end date.
|
|
* @param props - The props.
|
|
* @returns - The formatted date range or an empty string.
|
|
*/
|
|
function safeDateRangeFormat(startDate, endDate, props) {
|
|
if (!startDate && !endDate) {
|
|
return "";
|
|
}
|
|
var formattedStartDate = startDate ? safeDateFormat(startDate, props) : "";
|
|
var formattedEndDate = endDate ? safeDateFormat(endDate, props) : "";
|
|
var dateRangeSeparator = props.rangeSeparator || DATE_RANGE_SEPARATOR;
|
|
return "".concat(formattedStartDate).concat(dateRangeSeparator).concat(formattedEndDate);
|
|
}
|
|
/**
|
|
* Safely formats multiple dates.
|
|
*
|
|
* @param dates - The dates.
|
|
* @param props - The props.
|
|
* @returns - The formatted dates or an empty string.
|
|
*/
|
|
function safeMultipleDatesFormat(dates, props) {
|
|
if (!(dates === null || dates === void 0 ? void 0 : dates.length)) {
|
|
return "";
|
|
}
|
|
var formattedFirstDate = dates[0] ? safeDateFormat(dates[0], props) : "";
|
|
if (dates.length === 1) {
|
|
return formattedFirstDate;
|
|
}
|
|
if (dates.length === 2 && dates[1]) {
|
|
var formattedSecondDate = safeDateFormat(dates[1], props);
|
|
return "".concat(formattedFirstDate, ", ").concat(formattedSecondDate);
|
|
}
|
|
var extraDatesCount = dates.length - 1;
|
|
return "".concat(formattedFirstDate, " (+").concat(extraDatesCount, ")");
|
|
}
|
|
// ** Date Setters **
|
|
/**
|
|
* Sets the time for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @param time - An object containing the hour, minute, and second.
|
|
* @returns - The date with the time set.
|
|
*/
|
|
function setTime(date, _a) {
|
|
var _b = _a.hour, hour = _b === void 0 ? 0 : _b, _c = _a.minute, minute = _c === void 0 ? 0 : _c, _d = _a.second, second = _d === void 0 ? 0 : _d;
|
|
return dateFns.setHours(dateFns.setMinutes(dateFns.setSeconds(date, second), minute), hour);
|
|
}
|
|
/**
|
|
* Gets the week of the year for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The week of the year.
|
|
*/
|
|
function getWeek(date) {
|
|
return dateFns.getISOWeek(date);
|
|
}
|
|
/**
|
|
* Gets the day of the week code for a given day.
|
|
*
|
|
* @param day - The day.
|
|
* @param locale - The locale.
|
|
* @returns - The day of the week code.
|
|
*/
|
|
function getDayOfWeekCode(day, locale) {
|
|
return formatDate(day, "ddd", locale);
|
|
}
|
|
// *** Start of ***
|
|
/**
|
|
* Gets the start of the day for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The start of the day.
|
|
*/
|
|
function getStartOfDay(date) {
|
|
return dateFns.startOfDay(date);
|
|
}
|
|
/**
|
|
* Gets the start of the week for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @param locale - The locale.
|
|
* @param calendarStartDay - The day the calendar starts on.
|
|
* @returns - The start of the week.
|
|
*/
|
|
function getStartOfWeek(date, locale, calendarStartDay) {
|
|
var localeObj = locale
|
|
? getLocaleObject(locale)
|
|
: getLocaleObject(getDefaultLocale());
|
|
return dateFns.startOfWeek(date, {
|
|
locale: localeObj,
|
|
weekStartsOn: calendarStartDay,
|
|
});
|
|
}
|
|
/**
|
|
* Gets the start of the month for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The start of the month.
|
|
*/
|
|
function getStartOfMonth(date) {
|
|
return dateFns.startOfMonth(date);
|
|
}
|
|
/**
|
|
* Gets the start of the year for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The start of the year.
|
|
*/
|
|
function getStartOfYear(date) {
|
|
return dateFns.startOfYear(date);
|
|
}
|
|
/**
|
|
* Gets the start of the quarter for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The start of the quarter.
|
|
*/
|
|
function getStartOfQuarter(date) {
|
|
return dateFns.startOfQuarter(date);
|
|
}
|
|
/**
|
|
* Gets the start of today.
|
|
*
|
|
* @returns - The start of today.
|
|
*/
|
|
function getStartOfToday() {
|
|
return dateFns.startOfDay(newDate());
|
|
}
|
|
// *** End of ***
|
|
/**
|
|
* Gets the end of the day for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The end of the day.
|
|
*/
|
|
function getEndOfDay(date) {
|
|
return dateFns.endOfDay(date);
|
|
}
|
|
/**
|
|
* Gets the end of the week for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The end of the week.
|
|
*/
|
|
function getEndOfWeek(date) {
|
|
return dateFns.endOfWeek(date);
|
|
}
|
|
/**
|
|
* Gets the end of the month for a given date.
|
|
*
|
|
* @param date - The date.
|
|
* @returns - The end of the month.
|
|
*/
|
|
function getEndOfMonth(date) {
|
|
return dateFns.endOfMonth(date);
|
|
}
|
|
/**
|
|
* Checks if two dates are in the same year.
|
|
*
|
|
* @param date1 - The first date.
|
|
* @param date2 - The second date.
|
|
* @returns - True if the dates are in the same year, false otherwise.
|
|
*/
|
|
function isSameYear(date1, date2) {
|
|
if (date1 && date2) {
|
|
return dateFns.isSameYear(date1, date2);
|
|
}
|
|
else {
|
|
return !date1 && !date2;
|
|
}
|
|
}
|
|
/**
|
|
* Checks if two dates are in the same month.
|
|
*
|
|
* @param date1 - The first date.
|
|
* @param date2 - The second date.
|
|
* @returns - True if the dates are in the same month, false otherwise.
|
|
*/
|
|
function isSameMonth(date1, date2) {
|
|
if (date1 && date2) {
|
|
return dateFns.isSameMonth(date1, date2);
|
|
}
|
|
else {
|
|
return !date1 && !date2;
|
|
}
|
|
}
|
|
/**
|
|
* Checks if two dates are in the same quarter.
|
|
*
|
|
* @param date1 - The first date.
|
|
* @param date2 - The second date.
|
|
* @returns - True if the dates are in the same quarter, false otherwise.
|
|
*/
|
|
function isSameQuarter(date1, date2) {
|
|
if (date1 && date2) {
|
|
return dateFns.isSameQuarter(date1, date2);
|
|
}
|
|
else {
|
|
return !date1 && !date2;
|
|
}
|
|
}
|
|
/**
|
|
* Checks if two dates are on the same day.
|
|
*
|
|
* @param date1 - The first date.
|
|
* @param date2 - The second date.
|
|
* @returns - True if the dates are on the same day, false otherwise.
|
|
*/
|
|
function isSameDay(date1, date2) {
|
|
if (date1 && date2) {
|
|
return dateFns.isSameDay(date1, date2);
|
|
}
|
|
else {
|
|
return !date1 && !date2;
|
|
}
|
|
}
|
|
/**
|
|
* Checks if two dates are equal.
|
|
*
|
|
* @param date1 - The first date.
|
|
* @param date2 - The second date.
|
|
* @returns - True if the dates are equal, false otherwise.
|
|
*/
|
|
function isEqual(date1, date2) {
|
|
if (date1 && date2) {
|
|
return dateFns.isEqual(date1, date2);
|
|
}
|
|
else {
|
|
return !date1 && !date2;
|
|
}
|
|
}
|
|
/**
|
|
* Checks if a day is within a date range.
|
|
*
|
|
* @param day - The day to check.
|
|
* @param startDate - The start date of the range.
|
|
* @param endDate - The end date of the range.
|
|
* @returns - True if the day is within the range, false otherwise.
|
|
*/
|
|
function isDayInRange(day, startDate, endDate) {
|
|
var valid;
|
|
var start = dateFns.startOfDay(startDate);
|
|
var end = dateFns.endOfDay(endDate);
|
|
try {
|
|
valid = dateFns.isWithinInterval(day, { start: start, end: end });
|
|
}
|
|
catch (err) {
|
|
valid = false;
|
|
}
|
|
return valid;
|
|
}
|
|
// ** Date Localization **
|
|
/**
|
|
* Registers a locale.
|
|
*
|
|
* @param localeName - The name of the locale.
|
|
* @param localeData - The data of the locale.
|
|
*/
|
|
function registerLocale(localeName, localeData) {
|
|
var scope = getLocaleScope();
|
|
if (!scope.__localeData__) {
|
|
scope.__localeData__ = {};
|
|
}
|
|
scope.__localeData__[localeName] = localeData;
|
|
}
|
|
/**
|
|
* Sets the default locale.
|
|
*
|
|
* @param localeName - The name of the locale.
|
|
*/
|
|
function setDefaultLocale(localeName) {
|
|
var scope = getLocaleScope();
|
|
scope.__localeId__ = localeName;
|
|
}
|
|
/**
|
|
* Gets the default locale.
|
|
*
|
|
* @returns - The default locale.
|
|
*/
|
|
function getDefaultLocale() {
|
|
var scope = getLocaleScope();
|
|
return scope.__localeId__;
|
|
}
|
|
/**
|
|
* Gets the locale object.
|
|
*
|
|
* @param localeSpec - The locale specification.
|
|
* @returns - The locale object.
|
|
*/
|
|
function getLocaleObject(localeSpec) {
|
|
if (typeof localeSpec === "string") {
|
|
// Treat it as a locale name registered by registerLocale
|
|
var scope = getLocaleScope();
|
|
// Null was replaced with undefined to avoid type coercion
|
|
return scope.__localeData__ ? scope.__localeData__[localeSpec] : undefined;
|
|
}
|
|
else {
|
|
// Treat it as a raw date-fns locale object
|
|
return localeSpec;
|
|
}
|
|
}
|
|
/**
|
|
* Formats the weekday in a given locale.
|
|
*
|
|
* @param date - The date to format.
|
|
* @param formatFunc - The formatting function.
|
|
* @param locale - The locale to use for formatting.
|
|
* @returns - The formatted weekday.
|
|
*/
|
|
function getFormattedWeekdayInLocale(date, formatFunc, locale) {
|
|
return formatFunc(formatDate(date, "EEEE", locale));
|
|
}
|
|
/**
|
|
* Gets the minimum weekday in a given locale.
|
|
*
|
|
* @param date - The date to format.
|
|
* @param locale - The locale to use for formatting.
|
|
* @returns - The minimum weekday.
|
|
*/
|
|
function getWeekdayMinInLocale(date, locale) {
|
|
return formatDate(date, "EEEEEE", locale);
|
|
}
|
|
/**
|
|
* Gets the short weekday in a given locale.
|
|
*
|
|
* @param date - The date to format.
|
|
* @param locale - The locale to use for formatting.
|
|
* @returns - The short weekday.
|
|
*/
|
|
function getWeekdayShortInLocale(date, locale) {
|
|
return formatDate(date, "EEE", locale);
|
|
}
|
|
/**
|
|
* Gets the month in a given locale.
|
|
*
|
|
* @param month - The month to format.
|
|
* @param locale - The locale to use for formatting.
|
|
* @returns - The month.
|
|
*/
|
|
function getMonthInLocale(month, locale) {
|
|
return formatDate(dateFns.setMonth(newDate(), month), "LLLL", locale);
|
|
}
|
|
/**
|
|
* Gets the short month in a given locale.
|
|
*
|
|
* @param month - The month to format.
|
|
* @param locale - The locale to use for formatting.
|
|
* @returns - The short month.
|
|
*/
|
|
function getMonthShortInLocale(month, locale) {
|
|
return formatDate(dateFns.setMonth(newDate(), month), "LLL", locale);
|
|
}
|
|
/**
|
|
* Gets the short quarter in a given locale.
|
|
*
|
|
* @param quarter - The quarter to format.
|
|
* @param locale - The locale to use for formatting.
|
|
* @returns - The short quarter.
|
|
*/
|
|
function getQuarterShortInLocale(quarter, locale) {
|
|
return formatDate(dateFns.setQuarter(newDate(), quarter), "QQQ", locale);
|
|
}
|
|
/**
|
|
* Checks if a day is disabled.
|
|
*
|
|
* @param day - The day to check.
|
|
* @param options - The options to consider when checking.
|
|
* @returns - Returns true if the day is disabled, false otherwise.
|
|
*/
|
|
function isDayDisabled(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, maxDate = _b.maxDate, excludeDates = _b.excludeDates, excludeDateIntervals = _b.excludeDateIntervals, includeDates = _b.includeDates, includeDateIntervals = _b.includeDateIntervals, filterDate = _b.filterDate, disabled = _b.disabled;
|
|
if (disabled) {
|
|
return true;
|
|
}
|
|
return (isOutOfBounds(day, { minDate: minDate, maxDate: maxDate }) ||
|
|
(excludeDates &&
|
|
excludeDates.some(function (excludeDate) {
|
|
if (excludeDate instanceof Date) {
|
|
return isSameDay(day, excludeDate);
|
|
}
|
|
else {
|
|
return isSameDay(day, excludeDate.date);
|
|
}
|
|
})) ||
|
|
(excludeDateIntervals &&
|
|
excludeDateIntervals.some(function (_a) {
|
|
var start = _a.start, end = _a.end;
|
|
return dateFns.isWithinInterval(day, { start: start, end: end });
|
|
})) ||
|
|
(includeDates &&
|
|
!includeDates.some(function (includeDate) { return isSameDay(day, includeDate); })) ||
|
|
(includeDateIntervals &&
|
|
!includeDateIntervals.some(function (_a) {
|
|
var start = _a.start, end = _a.end;
|
|
return dateFns.isWithinInterval(day, { start: start, end: end });
|
|
})) ||
|
|
(filterDate && !filterDate(newDate(day))) ||
|
|
false);
|
|
}
|
|
/**
|
|
* Checks if a day is excluded.
|
|
*
|
|
* @param day - The day to check.
|
|
* @param options - The options to consider when checking.
|
|
* @returns - Returns true if the day is excluded, false otherwise.
|
|
*/
|
|
function isDayExcluded(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, excludeDates = _b.excludeDates, excludeDateIntervals = _b.excludeDateIntervals;
|
|
if (excludeDateIntervals && excludeDateIntervals.length > 0) {
|
|
return excludeDateIntervals.some(function (_a) {
|
|
var start = _a.start, end = _a.end;
|
|
return dateFns.isWithinInterval(day, { start: start, end: end });
|
|
});
|
|
}
|
|
return ((excludeDates &&
|
|
excludeDates.some(function (excludeDate) {
|
|
var _a;
|
|
if (excludeDate instanceof Date) {
|
|
return isSameDay(day, excludeDate);
|
|
}
|
|
else {
|
|
return isSameDay(day, (_a = excludeDate.date) !== null && _a !== void 0 ? _a : new Date());
|
|
}
|
|
})) ||
|
|
false);
|
|
}
|
|
function isMonthDisabled(month, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, maxDate = _b.maxDate, excludeDates = _b.excludeDates, includeDates = _b.includeDates, filterDate = _b.filterDate;
|
|
return (isOutOfBounds(month, {
|
|
minDate: minDate ? dateFns.startOfMonth(minDate) : undefined,
|
|
maxDate: maxDate ? dateFns.endOfMonth(maxDate) : undefined,
|
|
}) ||
|
|
(excludeDates === null || excludeDates === void 0 ? void 0 : excludeDates.some(function (excludeDate) {
|
|
return isSameMonth(month, excludeDate instanceof Date ? excludeDate : excludeDate.date);
|
|
})) ||
|
|
(includeDates &&
|
|
!includeDates.some(function (includeDate) { return isSameMonth(month, includeDate); })) ||
|
|
(filterDate && !filterDate(newDate(month))) ||
|
|
false);
|
|
}
|
|
function isMonthInRange(startDate, endDate, m, day) {
|
|
var startDateYear = dateFns.getYear(startDate);
|
|
var startDateMonth = dateFns.getMonth(startDate);
|
|
var endDateYear = dateFns.getYear(endDate);
|
|
var endDateMonth = dateFns.getMonth(endDate);
|
|
var dayYear = dateFns.getYear(day);
|
|
if (startDateYear === endDateYear && startDateYear === dayYear) {
|
|
return startDateMonth <= m && m <= endDateMonth;
|
|
}
|
|
else if (startDateYear < endDateYear) {
|
|
return ((dayYear === startDateYear && startDateMonth <= m) ||
|
|
(dayYear === endDateYear && endDateMonth >= m) ||
|
|
(dayYear < endDateYear && dayYear > startDateYear));
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* To check if a date's month and year are disabled/excluded
|
|
* @param date Date to check
|
|
* @returns {boolean} true if month and year are disabled/excluded, false otherwise
|
|
*/
|
|
function isMonthYearDisabled(date, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, maxDate = _b.maxDate, excludeDates = _b.excludeDates, includeDates = _b.includeDates;
|
|
return (isOutOfBounds(date, { minDate: minDate, maxDate: maxDate }) ||
|
|
(excludeDates &&
|
|
excludeDates.some(function (excludedDate) {
|
|
return isSameMonth(excludedDate instanceof Date ? excludedDate : excludedDate.date, date);
|
|
})) ||
|
|
(includeDates &&
|
|
!includeDates.some(function (includedDate) { return isSameMonth(includedDate, date); })) ||
|
|
false);
|
|
}
|
|
function isQuarterDisabled(quarter, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, maxDate = _b.maxDate, excludeDates = _b.excludeDates, includeDates = _b.includeDates, filterDate = _b.filterDate, disabled = _b.disabled;
|
|
if (disabled) {
|
|
return true;
|
|
}
|
|
return (isOutOfBounds(quarter, { minDate: minDate, maxDate: maxDate }) ||
|
|
(excludeDates === null || excludeDates === void 0 ? void 0 : excludeDates.some(function (excludeDate) {
|
|
return isSameQuarter(quarter, excludeDate instanceof Date ? excludeDate : excludeDate.date);
|
|
})) ||
|
|
(includeDates &&
|
|
!includeDates.some(function (includeDate) {
|
|
return isSameQuarter(quarter, includeDate);
|
|
})) ||
|
|
(filterDate && !filterDate(newDate(quarter))) ||
|
|
false);
|
|
}
|
|
function isYearInRange(year, start, end) {
|
|
if (!start || !end)
|
|
return false;
|
|
if (!dateFns.isValid(start) || !dateFns.isValid(end))
|
|
return false;
|
|
var startYear = dateFns.getYear(start);
|
|
var endYear = dateFns.getYear(end);
|
|
return startYear <= year && endYear >= year;
|
|
}
|
|
function isYearDisabled(year, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, maxDate = _b.maxDate, excludeDates = _b.excludeDates, includeDates = _b.includeDates, filterDate = _b.filterDate, disabled = _b.disabled;
|
|
if (disabled) {
|
|
return true;
|
|
}
|
|
var date = new Date(year, 0, 1);
|
|
return (isOutOfBounds(date, {
|
|
minDate: minDate ? dateFns.startOfYear(minDate) : undefined,
|
|
maxDate: maxDate ? dateFns.endOfYear(maxDate) : undefined,
|
|
}) ||
|
|
(excludeDates === null || excludeDates === void 0 ? void 0 : excludeDates.some(function (excludeDate) {
|
|
return isSameYear(date, excludeDate instanceof Date ? excludeDate : excludeDate.date);
|
|
})) ||
|
|
(includeDates &&
|
|
!includeDates.some(function (includeDate) { return isSameYear(date, includeDate); })) ||
|
|
(filterDate && !filterDate(newDate(date))) ||
|
|
false);
|
|
}
|
|
function isQuarterInRange(startDate, endDate, q, day) {
|
|
var startDateYear = dateFns.getYear(startDate);
|
|
var startDateQuarter = dateFns.getQuarter(startDate);
|
|
var endDateYear = dateFns.getYear(endDate);
|
|
var endDateQuarter = dateFns.getQuarter(endDate);
|
|
var dayYear = dateFns.getYear(day);
|
|
if (startDateYear === endDateYear && startDateYear === dayYear) {
|
|
return startDateQuarter <= q && q <= endDateQuarter;
|
|
}
|
|
else if (startDateYear < endDateYear) {
|
|
return ((dayYear === startDateYear && startDateQuarter <= q) ||
|
|
(dayYear === endDateYear && endDateQuarter >= q) ||
|
|
(dayYear < endDateYear && dayYear > startDateYear));
|
|
}
|
|
return false;
|
|
}
|
|
function isOutOfBounds(day, _a) {
|
|
var _b;
|
|
var _c = _a === void 0 ? {} : _a, minDate = _c.minDate, maxDate = _c.maxDate;
|
|
return ((_b = ((minDate && dateFns.differenceInCalendarDays(day, minDate) < 0) ||
|
|
(maxDate && dateFns.differenceInCalendarDays(day, maxDate) > 0))) !== null && _b !== void 0 ? _b : false);
|
|
}
|
|
function isTimeInList(time, times) {
|
|
return times.some(function (listTime) {
|
|
return dateFns.getHours(listTime) === dateFns.getHours(time) &&
|
|
dateFns.getMinutes(listTime) === dateFns.getMinutes(time) &&
|
|
dateFns.getSeconds(listTime) === dateFns.getSeconds(time);
|
|
});
|
|
}
|
|
function isTimeDisabled(time, _a) {
|
|
var _b = _a === void 0 ? {} : _a, excludeTimes = _b.excludeTimes, includeTimes = _b.includeTimes, filterTime = _b.filterTime;
|
|
return ((excludeTimes && isTimeInList(time, excludeTimes)) ||
|
|
(includeTimes && !isTimeInList(time, includeTimes)) ||
|
|
(filterTime && !filterTime(time)) ||
|
|
false);
|
|
}
|
|
function isTimeInDisabledRange(time, _a) {
|
|
var minTime = _a.minTime, maxTime = _a.maxTime;
|
|
if (!minTime || !maxTime) {
|
|
throw new Error("Both minTime and maxTime props required");
|
|
}
|
|
var baseTime = newDate();
|
|
baseTime = dateFns.setHours(baseTime, dateFns.getHours(time));
|
|
baseTime = dateFns.setMinutes(baseTime, dateFns.getMinutes(time));
|
|
baseTime = dateFns.setSeconds(baseTime, dateFns.getSeconds(time));
|
|
var min = newDate();
|
|
min = dateFns.setHours(min, dateFns.getHours(minTime));
|
|
min = dateFns.setMinutes(min, dateFns.getMinutes(minTime));
|
|
min = dateFns.setSeconds(min, dateFns.getSeconds(minTime));
|
|
var max = newDate();
|
|
max = dateFns.setHours(max, dateFns.getHours(maxTime));
|
|
max = dateFns.setMinutes(max, dateFns.getMinutes(maxTime));
|
|
max = dateFns.setSeconds(max, dateFns.getSeconds(maxTime));
|
|
var valid;
|
|
try {
|
|
valid = !dateFns.isWithinInterval(baseTime, { start: min, end: max });
|
|
}
|
|
catch (err) {
|
|
/* istanbul ignore next - date-fns historically threw on invalid intervals */
|
|
valid = false;
|
|
}
|
|
return valid;
|
|
}
|
|
function monthDisabledBefore(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, includeDates = _b.includeDates;
|
|
var previousMonth = dateFns.subMonths(day, 1);
|
|
return ((minDate && dateFns.differenceInCalendarMonths(minDate, previousMonth) > 0) ||
|
|
(includeDates &&
|
|
includeDates.every(function (includeDate) {
|
|
return dateFns.differenceInCalendarMonths(includeDate, previousMonth) > 0;
|
|
})) ||
|
|
false);
|
|
}
|
|
function monthDisabledAfter(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, maxDate = _b.maxDate, includeDates = _b.includeDates;
|
|
var nextMonth = dateFns.addMonths(day, 1);
|
|
return ((maxDate && dateFns.differenceInCalendarMonths(nextMonth, maxDate) > 0) ||
|
|
(includeDates &&
|
|
includeDates.every(function (includeDate) { return dateFns.differenceInCalendarMonths(nextMonth, includeDate) > 0; })) ||
|
|
false);
|
|
}
|
|
function quarterDisabledBefore(date, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, includeDates = _b.includeDates;
|
|
var firstDateOfYear = dateFns.startOfYear(date);
|
|
var previousQuarter = dateFns.subQuarters(firstDateOfYear, 1);
|
|
return ((minDate && dateFns.differenceInCalendarQuarters(minDate, previousQuarter) > 0) ||
|
|
(includeDates &&
|
|
includeDates.every(function (includeDate) {
|
|
return dateFns.differenceInCalendarQuarters(includeDate, previousQuarter) > 0;
|
|
})) ||
|
|
false);
|
|
}
|
|
function quarterDisabledAfter(date, _a) {
|
|
var _b = _a === void 0 ? {} : _a, maxDate = _b.maxDate, includeDates = _b.includeDates;
|
|
var lastDateOfYear = dateFns.endOfYear(date);
|
|
var nextQuarter = dateFns.addQuarters(lastDateOfYear, 1);
|
|
return ((maxDate && dateFns.differenceInCalendarQuarters(nextQuarter, maxDate) > 0) ||
|
|
(includeDates &&
|
|
includeDates.every(function (includeDate) {
|
|
return dateFns.differenceInCalendarQuarters(nextQuarter, includeDate) > 0;
|
|
})) ||
|
|
false);
|
|
}
|
|
function yearDisabledBefore(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, includeDates = _b.includeDates;
|
|
var previousYear = dateFns.subYears(day, 1);
|
|
return ((minDate && dateFns.differenceInCalendarYears(minDate, previousYear) > 0) ||
|
|
(includeDates &&
|
|
includeDates.every(function (includeDate) {
|
|
return dateFns.differenceInCalendarYears(includeDate, previousYear) > 0;
|
|
})) ||
|
|
false);
|
|
}
|
|
function yearsDisabledBefore(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, minDate = _b.minDate, _c = _b.yearItemNumber, yearItemNumber = _c === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _c;
|
|
var previousYear = getStartOfYear(dateFns.subYears(day, yearItemNumber));
|
|
var endPeriod = getYearsPeriod(previousYear, yearItemNumber).endPeriod;
|
|
var minDateYear = minDate && dateFns.getYear(minDate);
|
|
return (minDateYear && minDateYear > endPeriod) || false;
|
|
}
|
|
function yearDisabledAfter(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, maxDate = _b.maxDate, includeDates = _b.includeDates;
|
|
var nextYear = dateFns.addYears(day, 1);
|
|
return ((maxDate && dateFns.differenceInCalendarYears(nextYear, maxDate) > 0) ||
|
|
(includeDates &&
|
|
includeDates.every(function (includeDate) { return dateFns.differenceInCalendarYears(nextYear, includeDate) > 0; })) ||
|
|
false);
|
|
}
|
|
function yearsDisabledAfter(day, _a) {
|
|
var _b = _a === void 0 ? {} : _a, maxDate = _b.maxDate, _c = _b.yearItemNumber, yearItemNumber = _c === void 0 ? DEFAULT_YEAR_ITEM_NUMBER : _c;
|
|
var nextYear = dateFns.addYears(day, yearItemNumber);
|
|
var startPeriod = getYearsPeriod(nextYear, yearItemNumber).startPeriod;
|
|
var maxDateYear = maxDate && dateFns.getYear(maxDate);
|
|
return (maxDateYear && maxDateYear < startPeriod) || false;
|
|
}
|
|
function getEffectiveMinDate(_a) {
|
|
var minDate = _a.minDate, includeDates = _a.includeDates;
|
|
if (includeDates && minDate) {
|
|
var minDates = includeDates.filter(function (includeDate) { return dateFns.differenceInCalendarDays(includeDate, minDate) >= 0; });
|
|
return dateFns.min(minDates);
|
|
}
|
|
else if (includeDates) {
|
|
return dateFns.min(includeDates);
|
|
}
|
|
else {
|
|
return minDate;
|
|
}
|
|
}
|
|
function getEffectiveMaxDate(_a) {
|
|
var maxDate = _a.maxDate, includeDates = _a.includeDates;
|
|
if (includeDates && maxDate) {
|
|
var maxDates = includeDates.filter(function (includeDate) { return dateFns.differenceInCalendarDays(includeDate, maxDate) <= 0; });
|
|
return dateFns.max(maxDates);
|
|
}
|
|
else if (includeDates) {
|
|
return dateFns.max(includeDates);
|
|
}
|
|
else {
|
|
return maxDate;
|
|
}
|
|
}
|
|
/**
|
|
* Get a map of highlighted dates with their corresponding classes.
|
|
* @param highlightDates The dates to highlight.
|
|
* @param defaultClassName The default class to use for highlighting.
|
|
* @returns A map with dates as keys and arrays of class names as values.
|
|
*/
|
|
function getHighLightDaysMap(highlightDates, defaultClassName) {
|
|
var _a;
|
|
if (highlightDates === void 0) { highlightDates = []; }
|
|
if (defaultClassName === void 0) { defaultClassName = "react-datepicker__day--highlighted"; }
|
|
var dateClasses = new Map();
|
|
for (var i = 0, len = highlightDates.length; i < len; i++) {
|
|
var obj = highlightDates[i];
|
|
if (dateFns.isDate(obj)) {
|
|
var key = formatDate(obj, "MM.dd.yyyy");
|
|
var classNamesArr = dateClasses.get(key) || [];
|
|
if (!classNamesArr.includes(defaultClassName)) {
|
|
classNamesArr.push(defaultClassName);
|
|
dateClasses.set(key, classNamesArr);
|
|
}
|
|
}
|
|
else if (typeof obj === "object") {
|
|
var keys = Object.keys(obj);
|
|
var className = (_a = keys[0]) !== null && _a !== void 0 ? _a : "";
|
|
var arrOfDates = obj[className];
|
|
if (typeof className === "string" && Array.isArray(arrOfDates)) {
|
|
for (var k = 0, len_1 = arrOfDates.length; k < len_1; k++) {
|
|
var dateK = arrOfDates[k];
|
|
if (dateK) {
|
|
var key = formatDate(dateK, "MM.dd.yyyy");
|
|
var classNamesArr = dateClasses.get(key) || [];
|
|
if (!classNamesArr.includes(className)) {
|
|
classNamesArr.push(className);
|
|
dateClasses.set(key, classNamesArr);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return dateClasses;
|
|
}
|
|
/**
|
|
* Compare the two arrays
|
|
* @param array1 The first array to compare.
|
|
* @param array2 The second array to compare.
|
|
* @returns true, if the passed arrays are equal, false otherwise.
|
|
*/
|
|
function arraysAreEqual(array1, array2) {
|
|
if (array1.length !== array2.length) {
|
|
return false;
|
|
}
|
|
return array1.every(function (value, index) { return value === array2[index]; });
|
|
}
|
|
/**
|
|
* Assign the custom class to each date
|
|
* @param holidayDates array of object containing date and name of the holiday
|
|
* @param defaultClassName className to be added.
|
|
* @returns Map containing date as key and array of className and holiday name as value
|
|
*/
|
|
function getHolidaysMap(holidayDates, defaultClassName) {
|
|
if (holidayDates === void 0) { holidayDates = []; }
|
|
if (defaultClassName === void 0) { defaultClassName = "react-datepicker__day--holidays"; }
|
|
var dateClasses = new Map();
|
|
holidayDates.forEach(function (holiday) {
|
|
var dateObj = holiday.date, holidayName = holiday.holidayName;
|
|
if (!dateFns.isDate(dateObj)) {
|
|
return;
|
|
}
|
|
var key = formatDate(dateObj, "MM.dd.yyyy");
|
|
var classNamesObj = dateClasses.get(key) || {
|
|
className: "",
|
|
holidayNames: [],
|
|
};
|
|
if ("className" in classNamesObj &&
|
|
classNamesObj["className"] === defaultClassName &&
|
|
arraysAreEqual(classNamesObj["holidayNames"], [holidayName])) {
|
|
return;
|
|
}
|
|
classNamesObj["className"] = defaultClassName;
|
|
var holidayNameArr = classNamesObj["holidayNames"];
|
|
classNamesObj["holidayNames"] = holidayNameArr
|
|
? __spreadArray(__spreadArray([], holidayNameArr, true), [holidayName], false) : [holidayName];
|
|
dateClasses.set(key, classNamesObj);
|
|
});
|
|
return dateClasses;
|
|
}
|
|
/**
|
|
* Determines the times to inject after a given start of day, current time, and multiplier.
|
|
* @param startOfDay The start of the day.
|
|
* @param currentTime The current time.
|
|
* @param currentMultiplier The current multiplier.
|
|
* @param intervals The intervals.
|
|
* @param injectedTimes The times to potentially inject.
|
|
* @returns An array of times to inject.
|
|
*/
|
|
function timesToInjectAfter(startOfDay, currentTime, currentMultiplier, intervals, injectedTimes) {
|
|
var l = injectedTimes.length;
|
|
var times = [];
|
|
for (var i = 0; i < l; i++) {
|
|
var injectedTime = startOfDay;
|
|
var injectedTimeValue = injectedTimes[i];
|
|
if (injectedTimeValue) {
|
|
injectedTime = dateFns.addHours(injectedTime, dateFns.getHours(injectedTimeValue));
|
|
injectedTime = dateFns.addMinutes(injectedTime, dateFns.getMinutes(injectedTimeValue));
|
|
injectedTime = dateFns.addSeconds(injectedTime, dateFns.getSeconds(injectedTimeValue));
|
|
}
|
|
var nextTime = dateFns.addMinutes(startOfDay, (currentMultiplier + 1) * intervals);
|
|
if (dateFns.isAfter(injectedTime, currentTime) &&
|
|
dateFns.isBefore(injectedTime, nextTime) &&
|
|
injectedTimeValue != undefined) {
|
|
times.push(injectedTimeValue);
|
|
}
|
|
}
|
|
return times;
|
|
}
|
|
/**
|
|
* Adds a leading zero to a number if it's less than 10.
|
|
* @param i The number to add a leading zero to.
|
|
* @returns The number as a string, with a leading zero if it was less than 10.
|
|
*/
|
|
function addZero(i) {
|
|
return i < 10 ? "0".concat(i) : "".concat(i);
|
|
}
|
|
/**
|
|
* Gets the start and end years for a period.
|
|
* @param date The date to get the period for.
|
|
* @param yearItemNumber The number of years in the period. Defaults to DEFAULT_YEAR_ITEM_NUMBER.
|
|
* @returns An object with the start and end years for the period.
|
|
*/
|
|
function getYearsPeriod(date, yearItemNumber) {
|
|
if (yearItemNumber === void 0) { yearItemNumber = DEFAULT_YEAR_ITEM_NUMBER; }
|
|
var endPeriod = Math.ceil(dateFns.getYear(date) / yearItemNumber) * yearItemNumber;
|
|
var startPeriod = endPeriod - (yearItemNumber - 1);
|
|
return { startPeriod: startPeriod, endPeriod: endPeriod };
|
|
}
|
|
/**
|
|
* Gets the number of hours in a day.
|
|
* @param d The date to get the number of hours for.
|
|
* @returns The number of hours in the day.
|
|
*/
|
|
function getHoursInDay(d) {
|
|
var startOfDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
var startOfTheNextDay = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 24);
|
|
return Math.round((+startOfTheNextDay - +startOfDay) / 3600000);
|
|
}
|
|
/**
|
|
* Returns the start of the minute for the given date
|
|
*
|
|
* NOTE: this function is a DST and timezone-safe analog of `date-fns/startOfMinute`
|
|
* do not make changes unless you know what you're doing
|
|
*
|
|
* See comments on https://github.com/Hacker0x01/react-datepicker/pull/4244
|
|
* for more details
|
|
*
|
|
* @param d date
|
|
* @returns start of the minute
|
|
*/
|
|
function startOfMinute(d) {
|
|
var seconds = d.getSeconds();
|
|
var milliseconds = d.getMilliseconds();
|
|
return dateFns.toDate(d.getTime() - seconds * 1000 - milliseconds);
|
|
}
|
|
/**
|
|
* Returns whether the given dates are in the same minute
|
|
*
|
|
* This function is a DST and timezone-safe analog of `date-fns/isSameMinute`
|
|
*
|
|
* @param d1
|
|
* @param d2
|
|
* @returns
|
|
*/
|
|
function isSameMinute(d1, d2) {
|
|
return startOfMinute(d1).getTime() === startOfMinute(d2).getTime();
|
|
}
|
|
/**
|
|
* Returns a new datetime object representing the input date with midnight time
|
|
* @param date The date to get the midnight time for
|
|
* @returns A new datetime object representing the input date with midnight time
|
|
*/
|
|
function getMidnightDate(date) {
|
|
if (!dateFns.isDate(date)) {
|
|
throw new Error("Invalid date");
|
|
}
|
|
var dateWithoutTime = new Date(date);
|
|
dateWithoutTime.setHours(0, 0, 0, 0);
|
|
return dateWithoutTime;
|
|
}
|
|
/**
|
|
* Is the first date before the second one?
|
|
* @param date The date that should be before the other one to return true
|
|
* @param dateToCompare The date to compare with
|
|
* @returns The first date is before the second date
|
|
*
|
|
* Note:
|
|
* This function considers the mid-night of the given dates for comparison.
|
|
* It evaluates whether date is before dateToCompare based on their mid-night timestamps.
|
|
*/
|
|
function isDateBefore(date, dateToCompare) {
|
|
if (!dateFns.isDate(date) || !dateFns.isDate(dateToCompare)) {
|
|
throw new Error("Invalid date received");
|
|
}
|
|
var midnightDate = getMidnightDate(date);
|
|
var midnightDateToCompare = getMidnightDate(dateToCompare);
|
|
return dateFns.isBefore(midnightDate, midnightDateToCompare);
|
|
}
|
|
/**
|
|
* Checks if the space key was pressed down.
|
|
*
|
|
* @param event - The keyboard event.
|
|
* @returns - Returns true if the space key was pressed down, false otherwise.
|
|
*/
|
|
function isSpaceKeyDown(event) {
|
|
return event.key === KeyType.Space;
|
|
}
|
|
|
|
/**
|
|
* `InputTime` is a React component that manages time input.
|
|
*
|
|
* @component
|
|
* @example
|
|
* <InputTime timeString="12:00" />
|
|
*
|
|
* @param props - The properties that define the `InputTime` component.
|
|
* @param props.onChange - Function that is called when the date changes.
|
|
* @param props.date - The initial date value.
|
|
* @param props.timeString - The initial time string value.
|
|
* @param props.timeInputLabel - The label for the time input.
|
|
* @param props.customTimeInput - An optional custom time input element.
|
|
*
|
|
* @returns The `InputTime` component.
|
|
*/
|
|
var InputTime = /** @class */ (function (_super) {
|
|
__extends(InputTime, _super);
|
|
function InputTime(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this.inputRef = React__default.default.createRef();
|
|
_this.onTimeChange = function (time) {
|
|
var _a, _b;
|
|
_this.setState({ time: time });
|
|
var propDate = _this.props.date;
|
|
var isPropDateValid = propDate instanceof Date && !isNaN(+propDate);
|
|
var date = isPropDateValid ? propDate : new Date();
|
|
if (time === null || time === void 0 ? void 0 : time.includes(":")) {
|
|
var _c = time.split(":"), hours = _c[0], minutes = _c[1];
|
|
date.setHours(Number(hours));
|
|
date.setMinutes(Number(minutes));
|
|
}
|
|
(_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, date);
|
|
};
|
|
_this.renderTimeInput = function () {
|
|
var time = _this.state.time;
|
|
var _a = _this.props, date = _a.date, timeString = _a.timeString, customTimeInput = _a.customTimeInput;
|
|
if (customTimeInput) {
|
|
return React.cloneElement(customTimeInput, {
|
|
date: date,
|
|
value: time,
|
|
onChange: _this.onTimeChange,
|
|
});
|
|
}
|
|
return (React__default.default.createElement("input", { type: "time", className: "react-datepicker-time__input", placeholder: "Time", name: "time-input", ref: _this.inputRef, onClick: function () {
|
|
var _a;
|
|
(_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
}, required: true, value: time, onChange: function (event) {
|
|
_this.onTimeChange(event.target.value || timeString);
|
|
} }));
|
|
};
|
|
_this.state = {
|
|
time: _this.props.timeString,
|
|
};
|
|
return _this;
|
|
}
|
|
InputTime.getDerivedStateFromProps = function (props, state) {
|
|
if (props.timeString !== state.time) {
|
|
return {
|
|
time: props.timeString,
|
|
};
|
|
}
|
|
// Return null to indicate no change to state.
|
|
return null;
|
|
};
|
|
InputTime.prototype.render = function () {
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__input-time-container" },
|
|
React__default.default.createElement("div", { className: "react-datepicker-time__caption" }, this.props.timeInputLabel),
|
|
React__default.default.createElement("div", { className: "react-datepicker-time__input-container" },
|
|
React__default.default.createElement("div", { className: "react-datepicker-time__input" }, this.renderTimeInput()))));
|
|
};
|
|
return InputTime;
|
|
}(React.Component));
|
|
|
|
/**
|
|
* `Day` is a React component that represents a single day in a date picker.
|
|
* It handles the rendering and interaction of a day.
|
|
*
|
|
* @prop ariaLabelPrefixWhenEnabled - Aria label prefix when the day is enabled.
|
|
* @prop ariaLabelPrefixWhenDisabled - Aria label prefix when the day is disabled.
|
|
* @prop disabledKeyboardNavigation - Whether keyboard navigation is disabled.
|
|
* @prop day - The day to be displayed.
|
|
* @prop dayClassName - Function to customize the CSS class of the day.
|
|
* @prop endDate - The end date in a range.
|
|
* @prop highlightDates - Map of dates to be highlighted.
|
|
* @prop holidays - Map of holiday dates.
|
|
* @prop inline - Whether the date picker is inline.
|
|
* @prop shouldFocusDayInline - Whether the day should be focused when date picker is inline.
|
|
* @prop month - The month the day belongs to.
|
|
* @prop onClick - Click event handler.
|
|
* @prop onMouseEnter - Mouse enter event handler.
|
|
* @prop handleOnKeyDown - Key down event handler.
|
|
* @prop usePointerEvent - Whether to use pointer events.
|
|
* @prop preSelection - The date that is currently selected.
|
|
* @prop selected - The selected date.
|
|
* @prop selectingDate - The date currently being selected.
|
|
* @prop selectsEnd - Whether the day can be the end date in a range.
|
|
* @prop selectsStart - Whether the day can be the start date in a range.
|
|
* @prop selectsRange - Whether the day can be in a range.
|
|
* @prop showWeekPicker - Whether to show week picker.
|
|
* @prop showWeekNumber - Whether to show week numbers.
|
|
* @prop selectsDisabledDaysInRange - Whether to select disabled days in a range.
|
|
* @prop selectsMultiple - Whether to allow multiple date selection.
|
|
* @prop selectedDates - Array of selected dates.
|
|
* @prop startDate - The start date in a range.
|
|
* @prop renderDayContents - Function to customize the rendering of the day's contents.
|
|
* @prop containerRef - Ref for the container.
|
|
* @prop excludeDates - Array of dates to be excluded.
|
|
* @prop calendarStartDay - The start day of the week.
|
|
* @prop locale - The locale object.
|
|
* @prop monthShowsDuplicateDaysEnd - Whether to show duplicate days at the end of the month.
|
|
* @prop monthShowsDuplicateDaysStart - Whether to show duplicate days at the start of the month.
|
|
* @prop includeDates - Array of dates to be included.
|
|
* @prop includeDateIntervals - Array of date intervals to be included.
|
|
* @prop minDate - The minimum date that can be selected.
|
|
* @prop maxDate - The maximum date that can be selected.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* import React from 'react';
|
|
* import Day from './day';
|
|
*
|
|
* function MyComponent() {
|
|
* const handleDayClick = (event) => {
|
|
* console.log('Day clicked', event);
|
|
* };
|
|
*
|
|
* const handleDayMouseEnter = (event) => {
|
|
* console.log('Mouse entered day', event);
|
|
* };
|
|
*
|
|
* const renderDayContents = (date) => {
|
|
* return <div>{date.getDate()}</div>;
|
|
* };
|
|
*
|
|
* return (
|
|
* <Day
|
|
* day={new Date()}
|
|
* onClick={handleDayClick}
|
|
* onMouseEnter={handleDayMouseEnter}
|
|
* renderDayContents={renderDayContents}
|
|
* />
|
|
* );
|
|
* }
|
|
*
|
|
* export default MyComponent;
|
|
* ```
|
|
*/
|
|
var Day = /** @class */ (function (_super) {
|
|
__extends(Day, _super);
|
|
function Day() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.dayEl = React.createRef();
|
|
_this.handleClick = function (event) {
|
|
if (!_this.isDisabled() && _this.props.onClick) {
|
|
_this.props.onClick(event);
|
|
}
|
|
};
|
|
_this.handleMouseEnter = function (event) {
|
|
if (!_this.isDisabled() && _this.props.onMouseEnter) {
|
|
_this.props.onMouseEnter(event);
|
|
}
|
|
};
|
|
_this.handleOnKeyDown = function (event) {
|
|
var _a, _b;
|
|
var eventKey = event.key;
|
|
if (eventKey === KeyType.Space) {
|
|
event.preventDefault();
|
|
event.key = KeyType.Enter;
|
|
}
|
|
(_b = (_a = _this.props).handleOnKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
};
|
|
_this.isSameDay = function (other) {
|
|
return isSameDay(_this.props.day, other);
|
|
};
|
|
_this.isKeyboardSelected = function () {
|
|
var _a;
|
|
if (_this.props.disabledKeyboardNavigation) {
|
|
return false;
|
|
}
|
|
var isSelectedDate = _this.props.selectsMultiple
|
|
? (_a = _this.props.selectedDates) === null || _a === void 0 ? void 0 : _a.some(function (date) { return _this.isSameDayOrWeek(date); })
|
|
: _this.isSameDayOrWeek(_this.props.selected);
|
|
var isDisabled = _this.props.preSelection && _this.isDisabled(_this.props.preSelection);
|
|
return (!isSelectedDate &&
|
|
_this.isSameDayOrWeek(_this.props.preSelection) &&
|
|
!isDisabled);
|
|
};
|
|
_this.isDisabled = function (day) {
|
|
if (day === void 0) { day = _this.props.day; }
|
|
// Almost all props previously were passed as this.props w/o proper typing with prop-types
|
|
// after the migration to TS i made it explicit
|
|
return isDayDisabled(day, {
|
|
minDate: _this.props.minDate,
|
|
maxDate: _this.props.maxDate,
|
|
excludeDates: _this.props.excludeDates,
|
|
excludeDateIntervals: _this.props.excludeDateIntervals,
|
|
includeDateIntervals: _this.props.includeDateIntervals,
|
|
includeDates: _this.props.includeDates,
|
|
filterDate: _this.props.filterDate,
|
|
disabled: _this.props.disabled,
|
|
});
|
|
};
|
|
_this.isExcluded = function () {
|
|
// Almost all props previously were passed as this.props w/o proper typing with prop-types
|
|
// after the migration to TS i made it explicit
|
|
return isDayExcluded(_this.props.day, {
|
|
excludeDates: _this.props.excludeDates,
|
|
excludeDateIntervals: _this.props.excludeDateIntervals,
|
|
});
|
|
};
|
|
_this.isStartOfWeek = function () {
|
|
return isSameDay(_this.props.day, getStartOfWeek(_this.props.day, _this.props.locale, _this.props.calendarStartDay));
|
|
};
|
|
_this.isSameWeek = function (other) {
|
|
return _this.props.showWeekPicker &&
|
|
isSameDay(other, getStartOfWeek(_this.props.day, _this.props.locale, _this.props.calendarStartDay));
|
|
};
|
|
_this.isSameDayOrWeek = function (other) {
|
|
return _this.isSameDay(other) || _this.isSameWeek(other);
|
|
};
|
|
_this.getHighLightedClass = function () {
|
|
var _a = _this.props, day = _a.day, highlightDates = _a.highlightDates;
|
|
if (!highlightDates) {
|
|
return false;
|
|
}
|
|
// Looking for className in the Map of {'day string, 'className'}
|
|
var dayStr = formatDate(day, "MM.dd.yyyy");
|
|
return highlightDates.get(dayStr);
|
|
};
|
|
// Function to return the array containing className associated to the date
|
|
_this.getHolidaysClass = function () {
|
|
var _a;
|
|
var _b = _this.props, day = _b.day, holidays = _b.holidays;
|
|
if (!holidays) {
|
|
// For type consistency no other reasons
|
|
return [undefined];
|
|
}
|
|
var dayStr = formatDate(day, "MM.dd.yyyy");
|
|
// Looking for className in the Map of {day string: {className, holidayName}}
|
|
if (holidays.has(dayStr)) {
|
|
return [(_a = holidays.get(dayStr)) === null || _a === void 0 ? void 0 : _a.className];
|
|
}
|
|
// For type consistency no other reasons
|
|
return [undefined];
|
|
};
|
|
_this.isInRange = function () {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!startDate || !endDate) {
|
|
return false;
|
|
}
|
|
return isDayInRange(day, startDate, endDate);
|
|
};
|
|
_this.isInSelectingRange = function () {
|
|
var _a;
|
|
var _b = _this.props, day = _b.day, selectsStart = _b.selectsStart, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange, selectsDisabledDaysInRange = _b.selectsDisabledDaysInRange, startDate = _b.startDate, swapRange = _b.swapRange, endDate = _b.endDate;
|
|
var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
|
|
// Don't highlight days outside the current month
|
|
if (_this.isAfterMonth() || _this.isBeforeMonth()) {
|
|
return false;
|
|
}
|
|
if (!(selectsStart || selectsEnd || selectsRange) ||
|
|
!selectingDate ||
|
|
(!selectsDisabledDaysInRange && _this.isDisabled())) {
|
|
return false;
|
|
}
|
|
if (selectsStart &&
|
|
endDate &&
|
|
(dateFns.isBefore(selectingDate, endDate) || isEqual(selectingDate, endDate))) {
|
|
return isDayInRange(day, selectingDate, endDate);
|
|
}
|
|
if (selectsEnd &&
|
|
startDate &&
|
|
(dateFns.isAfter(selectingDate, startDate) || isEqual(selectingDate, startDate))) {
|
|
return isDayInRange(day, startDate, selectingDate);
|
|
}
|
|
if (selectsRange && startDate && !endDate) {
|
|
if (isEqual(selectingDate, startDate)) {
|
|
return isDayInRange(day, startDate, selectingDate);
|
|
}
|
|
if (dateFns.isAfter(selectingDate, startDate)) {
|
|
return isDayInRange(day, startDate, selectingDate);
|
|
}
|
|
if (swapRange && dateFns.isBefore(selectingDate, startDate)) {
|
|
return isDayInRange(day, selectingDate, startDate);
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
_this.isSelectingRangeStart = function () {
|
|
var _a;
|
|
if (!_this.isInSelectingRange()) {
|
|
return false;
|
|
}
|
|
var _b = _this.props, day = _b.day, startDate = _b.startDate, selectsStart = _b.selectsStart, swapRange = _b.swapRange, selectsRange = _b.selectsRange;
|
|
var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
|
|
if (selectsStart) {
|
|
return isSameDay(day, selectingDate);
|
|
}
|
|
if (selectsRange && swapRange && startDate && selectingDate) {
|
|
return isSameDay(day, dateFns.isBefore(selectingDate, startDate) ? selectingDate : startDate);
|
|
}
|
|
return isSameDay(day, startDate);
|
|
};
|
|
_this.isSelectingRangeEnd = function () {
|
|
var _a;
|
|
if (!_this.isInSelectingRange()) {
|
|
return false;
|
|
}
|
|
var _b = _this.props, day = _b.day, endDate = _b.endDate, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange, swapRange = _b.swapRange, startDate = _b.startDate;
|
|
var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
|
|
if (selectsEnd) {
|
|
return isSameDay(day, selectingDate);
|
|
}
|
|
if (selectsRange && swapRange && startDate && selectingDate) {
|
|
return isSameDay(day, dateFns.isBefore(selectingDate, startDate) ? startDate : selectingDate);
|
|
}
|
|
if (selectsRange) {
|
|
return isSameDay(day, selectingDate);
|
|
}
|
|
return isSameDay(day, endDate);
|
|
};
|
|
_this.isRangeStart = function () {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!startDate || !endDate) {
|
|
return false;
|
|
}
|
|
return isSameDay(startDate, day);
|
|
};
|
|
_this.isRangeEnd = function () {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!startDate || !endDate) {
|
|
return false;
|
|
}
|
|
return isSameDay(endDate, day);
|
|
};
|
|
_this.isWeekend = function () {
|
|
var weekday = dateFns.getDay(_this.props.day);
|
|
return weekday === 0 || weekday === 6;
|
|
};
|
|
_this.isAfterMonth = function () {
|
|
return (_this.props.month !== undefined &&
|
|
(_this.props.month + 1) % 12 === dateFns.getMonth(_this.props.day));
|
|
};
|
|
_this.isBeforeMonth = function () {
|
|
return (_this.props.month !== undefined &&
|
|
(dateFns.getMonth(_this.props.day) + 1) % 12 === _this.props.month);
|
|
};
|
|
_this.isCurrentDay = function () { return _this.isSameDay(newDate()); };
|
|
_this.isSelected = function () {
|
|
var _a;
|
|
if (_this.props.selectsMultiple) {
|
|
return (_a = _this.props.selectedDates) === null || _a === void 0 ? void 0 : _a.some(function (date) {
|
|
return _this.isSameDayOrWeek(date);
|
|
});
|
|
}
|
|
return _this.isSameDayOrWeek(_this.props.selected);
|
|
};
|
|
_this.getClassNames = function (date) {
|
|
var dayClassName = _this.props.dayClassName
|
|
? _this.props.dayClassName(date)
|
|
: undefined;
|
|
return clsx.clsx("react-datepicker__day", dayClassName, "react-datepicker__day--" + getDayOfWeekCode(_this.props.day), {
|
|
"react-datepicker__day--disabled": _this.isDisabled(),
|
|
"react-datepicker__day--excluded": _this.isExcluded(),
|
|
"react-datepicker__day--selected": _this.isSelected(),
|
|
"react-datepicker__day--keyboard-selected": _this.isKeyboardSelected(),
|
|
"react-datepicker__day--range-start": _this.isRangeStart(),
|
|
"react-datepicker__day--range-end": _this.isRangeEnd(),
|
|
"react-datepicker__day--in-range": _this.isInRange(),
|
|
"react-datepicker__day--in-selecting-range": _this.isInSelectingRange(),
|
|
"react-datepicker__day--selecting-range-start": _this.isSelectingRangeStart(),
|
|
"react-datepicker__day--selecting-range-end": _this.isSelectingRangeEnd(),
|
|
"react-datepicker__day--today": _this.isCurrentDay(),
|
|
"react-datepicker__day--weekend": _this.isWeekend(),
|
|
"react-datepicker__day--outside-month": _this.isAfterMonth() || _this.isBeforeMonth(),
|
|
}, _this.getHighLightedClass(), _this.getHolidaysClass());
|
|
};
|
|
_this.getAriaLabel = function () {
|
|
var _a = _this.props, day = _a.day, _b = _a.ariaLabelPrefixWhenEnabled, ariaLabelPrefixWhenEnabled = _b === void 0 ? "Choose" : _b, _c = _a.ariaLabelPrefixWhenDisabled, ariaLabelPrefixWhenDisabled = _c === void 0 ? "Not available" : _c;
|
|
var prefix = _this.isDisabled() || _this.isExcluded()
|
|
? ariaLabelPrefixWhenDisabled
|
|
: ariaLabelPrefixWhenEnabled;
|
|
return "".concat(prefix, " ").concat(formatDate(day, "PPPP", _this.props.locale));
|
|
};
|
|
// A function to return the holiday's name as title's content
|
|
_this.getTitle = function () {
|
|
var _a = _this.props, day = _a.day, _b = _a.holidays, holidays = _b === void 0 ? new Map() : _b, excludeDates = _a.excludeDates;
|
|
var compareDt = formatDate(day, "MM.dd.yyyy");
|
|
var titles = [];
|
|
if (holidays.has(compareDt)) {
|
|
titles.push.apply(titles, holidays.get(compareDt).holidayNames);
|
|
}
|
|
if (_this.isExcluded()) {
|
|
titles.push(excludeDates === null || excludeDates === void 0 ? void 0 : excludeDates.filter(function (excludeDate) {
|
|
if (excludeDate instanceof Date) {
|
|
return isSameDay(excludeDate, day);
|
|
}
|
|
return isSameDay(excludeDate === null || excludeDate === void 0 ? void 0 : excludeDate.date, day);
|
|
}).map(function (excludeDate) {
|
|
if (excludeDate instanceof Date) {
|
|
return undefined;
|
|
}
|
|
return excludeDate === null || excludeDate === void 0 ? void 0 : excludeDate.message;
|
|
}));
|
|
}
|
|
// I'm not sure that this is a right output, but all tests are green
|
|
return titles.join(", ");
|
|
};
|
|
_this.getTabIndex = function () {
|
|
var selectedDay = _this.props.selected;
|
|
var preSelectionDay = _this.props.preSelection;
|
|
var tabIndex = !(_this.props.showWeekPicker &&
|
|
(_this.props.showWeekNumber || !_this.isStartOfWeek())) &&
|
|
(_this.isKeyboardSelected() ||
|
|
(_this.isSameDay(selectedDay) &&
|
|
isSameDay(preSelectionDay, selectedDay)))
|
|
? 0
|
|
: -1;
|
|
return tabIndex;
|
|
};
|
|
// various cases when we need to apply focus to the preselected day
|
|
// focus the day on mount/update so that keyboard navigation works while cycling through months with up or down keys (not for prev and next month buttons)
|
|
// prevent focus for these activeElement cases so we don't pull focus from the input as the calendar opens
|
|
_this.handleFocusDay = function () {
|
|
var _a;
|
|
// only do this while the input isn't focused
|
|
// otherwise, typing/backspacing the date manually may steal focus away from the input
|
|
_this.shouldFocusDay() && ((_a = _this.dayEl.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }));
|
|
};
|
|
_this.renderDayContents = function () {
|
|
if (_this.props.monthShowsDuplicateDaysEnd && _this.isAfterMonth())
|
|
return null;
|
|
if (_this.props.monthShowsDuplicateDaysStart && _this.isBeforeMonth())
|
|
return null;
|
|
return _this.props.renderDayContents
|
|
? _this.props.renderDayContents(dateFns.getDate(_this.props.day), _this.props.day)
|
|
: dateFns.getDate(_this.props.day);
|
|
};
|
|
_this.render = function () { return (
|
|
// TODO: Use <option> instead of the "option" role to ensure accessibility across all devices.
|
|
React__default.default.createElement("div", { ref: _this.dayEl, className: _this.getClassNames(_this.props.day), onKeyDown: _this.handleOnKeyDown, onClick: _this.handleClick, onMouseEnter: !_this.props.usePointerEvent ? _this.handleMouseEnter : undefined, onPointerEnter: _this.props.usePointerEvent ? _this.handleMouseEnter : undefined, tabIndex: _this.getTabIndex(), "aria-label": _this.getAriaLabel(), role: "gridcell", title: _this.getTitle(), "aria-disabled": _this.isDisabled(), "aria-current": _this.isCurrentDay() ? "date" : undefined, "aria-selected": _this.isSelected() || _this.isInRange() },
|
|
_this.renderDayContents(),
|
|
_this.getTitle() !== "" && (React__default.default.createElement("span", { className: "overlay" }, _this.getTitle())))); };
|
|
return _this;
|
|
}
|
|
Day.prototype.componentDidMount = function () {
|
|
this.handleFocusDay();
|
|
};
|
|
Day.prototype.componentDidUpdate = function () {
|
|
this.handleFocusDay();
|
|
};
|
|
Day.prototype.shouldFocusDay = function () {
|
|
var shouldFocusDay = false;
|
|
if (this.getTabIndex() === 0 && this.isSameDay(this.props.preSelection)) {
|
|
// there is currently no activeElement and not inline
|
|
if (!document.activeElement || document.activeElement === document.body) {
|
|
shouldFocusDay = true;
|
|
}
|
|
// inline version:
|
|
// do not focus on initial render to prevent autoFocus issue
|
|
// focus after month has changed via keyboard
|
|
if (this.props.inline && !this.props.shouldFocusDayInline) {
|
|
shouldFocusDay = false;
|
|
}
|
|
if (this.isDayActiveElement()) {
|
|
shouldFocusDay = true;
|
|
}
|
|
if (this.isDuplicateDay()) {
|
|
shouldFocusDay = false;
|
|
}
|
|
}
|
|
return shouldFocusDay;
|
|
};
|
|
// the activeElement is in the container, and it is another instance of Day
|
|
Day.prototype.isDayActiveElement = function () {
|
|
var _a, _b, _c;
|
|
return (((_b = (_a = this.props.containerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement)) &&
|
|
((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.classList.contains("react-datepicker__day")));
|
|
};
|
|
Day.prototype.isDuplicateDay = function () {
|
|
return (
|
|
//day is one of the non rendered duplicate days
|
|
(this.props.monthShowsDuplicateDaysEnd && this.isAfterMonth()) ||
|
|
(this.props.monthShowsDuplicateDaysStart && this.isBeforeMonth()));
|
|
};
|
|
return Day;
|
|
}(React.Component));
|
|
|
|
var WeekNumber = /** @class */ (function (_super) {
|
|
__extends(WeekNumber, _super);
|
|
function WeekNumber() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.weekNumberEl = React.createRef();
|
|
_this.handleClick = function (event) {
|
|
if (_this.props.onClick) {
|
|
_this.props.onClick(event);
|
|
}
|
|
};
|
|
_this.handleOnKeyDown = function (event) {
|
|
var _a, _b;
|
|
var eventKey = event.key;
|
|
if (eventKey === KeyType.Space) {
|
|
event.preventDefault();
|
|
event.key = KeyType.Enter;
|
|
}
|
|
(_b = (_a = _this.props).handleOnKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
};
|
|
_this.isKeyboardSelected = function () {
|
|
return !_this.props.disabledKeyboardNavigation &&
|
|
!isSameDay(_this.props.date, _this.props.selected) &&
|
|
isSameDay(_this.props.date, _this.props.preSelection);
|
|
};
|
|
_this.getTabIndex = function () {
|
|
return _this.props.showWeekPicker &&
|
|
_this.props.showWeekNumber &&
|
|
(_this.isKeyboardSelected() ||
|
|
(isSameDay(_this.props.date, _this.props.selected) &&
|
|
isSameDay(_this.props.preSelection, _this.props.selected)))
|
|
? 0
|
|
: -1;
|
|
};
|
|
// various cases when we need to apply focus to the preselected week-number
|
|
// focus the week-number on mount/update so that keyboard navigation works while cycling through months with up or down keys (not for prev and next month buttons)
|
|
// prevent focus for these activeElement cases so we don't pull focus from the input as the calendar opens
|
|
_this.handleFocusWeekNumber = function (prevProps) {
|
|
var shouldFocusWeekNumber = false;
|
|
// only do this while the input isn't focused
|
|
// otherwise, typing/backspacing the date manually may steal focus away from the input
|
|
if (_this.getTabIndex() === 0 &&
|
|
!(prevProps === null || prevProps === void 0 ? void 0 : prevProps.isInputFocused) &&
|
|
isSameDay(_this.props.date, _this.props.preSelection)) {
|
|
// there is currently no activeElement and not inline
|
|
if (!document.activeElement || document.activeElement === document.body) {
|
|
shouldFocusWeekNumber = true;
|
|
}
|
|
// inline version:
|
|
// do not focus on initial render to prevent autoFocus issue
|
|
// focus after month has changed via keyboard
|
|
if (_this.props.inline && !_this.props.shouldFocusDayInline) {
|
|
shouldFocusWeekNumber = false;
|
|
}
|
|
// the activeElement is in the container, and it is another instance of WeekNumber
|
|
if (_this.props.containerRef &&
|
|
_this.props.containerRef.current &&
|
|
_this.props.containerRef.current.contains(document.activeElement) &&
|
|
document.activeElement &&
|
|
document.activeElement.classList.contains("react-datepicker__week-number")) {
|
|
shouldFocusWeekNumber = true;
|
|
}
|
|
}
|
|
shouldFocusWeekNumber &&
|
|
_this.weekNumberEl.current &&
|
|
_this.weekNumberEl.current.focus({ preventScroll: true });
|
|
};
|
|
return _this;
|
|
}
|
|
Object.defineProperty(WeekNumber, "defaultProps", {
|
|
get: function () {
|
|
return {
|
|
ariaLabelPrefix: "week ",
|
|
};
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
WeekNumber.prototype.componentDidMount = function () {
|
|
this.handleFocusWeekNumber();
|
|
};
|
|
WeekNumber.prototype.componentDidUpdate = function (prevProps) {
|
|
this.handleFocusWeekNumber(prevProps);
|
|
};
|
|
WeekNumber.prototype.render = function () {
|
|
var _a = this.props, weekNumber = _a.weekNumber, isWeekDisabled = _a.isWeekDisabled, _b = _a.ariaLabelPrefix, ariaLabelPrefix = _b === void 0 ? WeekNumber.defaultProps.ariaLabelPrefix : _b, onClick = _a.onClick;
|
|
var weekNumberClasses = {
|
|
"react-datepicker__week-number": true,
|
|
"react-datepicker__week-number--clickable": !!onClick && !isWeekDisabled,
|
|
"react-datepicker__week-number--selected": !!onClick && isSameDay(this.props.date, this.props.selected),
|
|
};
|
|
return (React__default.default.createElement("div", { ref: this.weekNumberEl, className: clsx.clsx(weekNumberClasses), "aria-label": "".concat(ariaLabelPrefix, " ").concat(this.props.weekNumber), onClick: this.handleClick, onKeyDown: this.handleOnKeyDown, tabIndex: this.getTabIndex(), role: "gridcell" }, weekNumber));
|
|
};
|
|
return WeekNumber;
|
|
}(React.Component));
|
|
|
|
var Week = /** @class */ (function (_super) {
|
|
__extends(Week, _super);
|
|
function Week() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.isDisabled = function (day) {
|
|
return isDayDisabled(day, {
|
|
minDate: _this.props.minDate,
|
|
maxDate: _this.props.maxDate,
|
|
excludeDates: _this.props.excludeDates,
|
|
excludeDateIntervals: _this.props.excludeDateIntervals,
|
|
includeDateIntervals: _this.props.includeDateIntervals,
|
|
includeDates: _this.props.includeDates,
|
|
filterDate: _this.props.filterDate,
|
|
});
|
|
};
|
|
_this.handleDayClick = function (day, event) {
|
|
if (_this.props.onDayClick) {
|
|
_this.props.onDayClick(day, event);
|
|
}
|
|
};
|
|
_this.handleDayMouseEnter = function (day) {
|
|
if (_this.props.onDayMouseEnter) {
|
|
_this.props.onDayMouseEnter(day);
|
|
}
|
|
};
|
|
_this.handleWeekClick = function (day, weekNumber, event) {
|
|
var _a, _b, _c;
|
|
var enabledWeekDay = new Date(day);
|
|
for (var i = 0; i < 7; i++) {
|
|
var processingDay = new Date(day);
|
|
processingDay.setDate(processingDay.getDate() + i);
|
|
var isEnabled = !_this.isDisabled(processingDay);
|
|
if (isEnabled) {
|
|
enabledWeekDay = processingDay;
|
|
break;
|
|
}
|
|
}
|
|
if (typeof _this.props.onWeekSelect === "function") {
|
|
_this.props.onWeekSelect(enabledWeekDay, weekNumber, event);
|
|
}
|
|
if (_this.props.showWeekPicker) {
|
|
_this.handleDayClick(enabledWeekDay, event);
|
|
}
|
|
if ((_a = _this.props.shouldCloseOnSelect) !== null && _a !== void 0 ? _a : Week.defaultProps.shouldCloseOnSelect) {
|
|
(_c = (_b = _this.props).setOpen) === null || _c === void 0 ? void 0 : _c.call(_b, false);
|
|
}
|
|
};
|
|
_this.formatWeekNumber = function (date) {
|
|
if (_this.props.formatWeekNumber) {
|
|
return _this.props.formatWeekNumber(date);
|
|
}
|
|
return getWeek(date);
|
|
};
|
|
_this.isWeekDisabled = function () {
|
|
var startOfWeek = _this.startOfWeek();
|
|
var endOfWeek = dateFns.addDays(startOfWeek, 6);
|
|
var processingDate = new Date(startOfWeek);
|
|
while (processingDate <= endOfWeek) {
|
|
if (!_this.isDisabled(processingDate))
|
|
return false;
|
|
processingDate = dateFns.addDays(processingDate, 1);
|
|
}
|
|
return true;
|
|
};
|
|
_this.renderDays = function () {
|
|
var startOfWeek = _this.startOfWeek();
|
|
var days = [];
|
|
var weekNumber = _this.formatWeekNumber(startOfWeek);
|
|
if (_this.props.showWeekNumber) {
|
|
var onClickAction = _this.props.onWeekSelect || _this.props.showWeekPicker
|
|
? _this.handleWeekClick.bind(_this, startOfWeek, weekNumber)
|
|
: undefined;
|
|
days.push(React__default.default.createElement(WeekNumber, _assign({ key: "W" }, Week.defaultProps, _this.props, { weekNumber: weekNumber, isWeekDisabled: _this.isWeekDisabled(), date: startOfWeek, onClick: onClickAction })));
|
|
}
|
|
return days.concat([0, 1, 2, 3, 4, 5, 6].map(function (offset) {
|
|
var day = dateFns.addDays(startOfWeek, offset);
|
|
return (React__default.default.createElement(Day, _assign({}, Week.defaultProps, _this.props, { ariaLabelPrefixWhenEnabled: _this.props.chooseDayAriaLabelPrefix, ariaLabelPrefixWhenDisabled: _this.props.disabledDayAriaLabelPrefix, key: day.valueOf(), day: day, onClick: _this.handleDayClick.bind(_this, day), onMouseEnter: _this.handleDayMouseEnter.bind(_this, day) })));
|
|
}));
|
|
};
|
|
_this.startOfWeek = function () {
|
|
return getStartOfWeek(_this.props.day, _this.props.locale, _this.props.calendarStartDay);
|
|
};
|
|
_this.isKeyboardSelected = function () {
|
|
return !_this.props.disabledKeyboardNavigation &&
|
|
!isSameDay(_this.startOfWeek(), _this.props.selected) &&
|
|
isSameDay(_this.startOfWeek(), _this.props.preSelection);
|
|
};
|
|
return _this;
|
|
}
|
|
Object.defineProperty(Week, "defaultProps", {
|
|
get: function () {
|
|
return {
|
|
shouldCloseOnSelect: true,
|
|
};
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Week.prototype.render = function () {
|
|
var weekNumberClasses = {
|
|
"react-datepicker__week": true,
|
|
"react-datepicker__week--selected": isSameDay(this.startOfWeek(), this.props.selected),
|
|
"react-datepicker__week--keyboard-selected": this.isKeyboardSelected(),
|
|
};
|
|
var customWeekClassName = this.props.weekClassName
|
|
? this.props.weekClassName(this.startOfWeek())
|
|
: undefined;
|
|
return (React__default.default.createElement("div", { className: clsx.clsx(weekNumberClasses, customWeekClassName), role: "row" }, this.renderDays()));
|
|
};
|
|
return Week;
|
|
}(React.Component));
|
|
|
|
var _a;
|
|
var FIXED_HEIGHT_STANDARD_WEEK_COUNT = 6;
|
|
var MONTH_COLUMNS_LAYOUT = {
|
|
TWO_COLUMNS: "two_columns",
|
|
THREE_COLUMNS: "three_columns",
|
|
FOUR_COLUMNS: "four_columns",
|
|
};
|
|
var MONTH_COLUMNS = (_a = {},
|
|
_a[MONTH_COLUMNS_LAYOUT.TWO_COLUMNS] = {
|
|
grid: [
|
|
[0, 1],
|
|
[2, 3],
|
|
[4, 5],
|
|
[6, 7],
|
|
[8, 9],
|
|
[10, 11],
|
|
],
|
|
verticalNavigationOffset: 2,
|
|
},
|
|
_a[MONTH_COLUMNS_LAYOUT.THREE_COLUMNS] = {
|
|
grid: [
|
|
[0, 1, 2],
|
|
[3, 4, 5],
|
|
[6, 7, 8],
|
|
[9, 10, 11],
|
|
],
|
|
verticalNavigationOffset: 3,
|
|
},
|
|
_a[MONTH_COLUMNS_LAYOUT.FOUR_COLUMNS] = {
|
|
grid: [
|
|
[0, 1, 2, 3],
|
|
[4, 5, 6, 7],
|
|
[8, 9, 10, 11],
|
|
],
|
|
verticalNavigationOffset: 4,
|
|
},
|
|
_a);
|
|
var MONTH_NAVIGATION_HORIZONTAL_OFFSET = 1;
|
|
function getMonthColumnsLayout(showFourColumnMonthYearPicker, showTwoColumnMonthYearPicker) {
|
|
if (showFourColumnMonthYearPicker) {
|
|
return MONTH_COLUMNS_LAYOUT.FOUR_COLUMNS;
|
|
}
|
|
if (showTwoColumnMonthYearPicker) {
|
|
return MONTH_COLUMNS_LAYOUT.TWO_COLUMNS;
|
|
}
|
|
return MONTH_COLUMNS_LAYOUT.THREE_COLUMNS;
|
|
}
|
|
/**
|
|
* `Month` is a React component that represents a month in a calendar.
|
|
* It accepts a `MonthProps` object as props which provides various configurations and event handlers.
|
|
*
|
|
* @prop dayClassName - Function to determine the class name for a day.
|
|
* @prop monthClassName - Function to determine the class name for a month.
|
|
* @prop filterDate - Function to filter dates.
|
|
* @prop formatWeekNumber - Function to format the week number.
|
|
* @prop onDayClick - Function to handle day click events.
|
|
* @prop onDayMouseEnter - Function to handle mouse enter events on a day.
|
|
* @prop onMouseLeave - Function to handle mouse leave events.
|
|
* @prop onWeekSelect - Function to handle week selection.
|
|
* @prop setPreSelection - Function to set pre-selection.
|
|
* @prop setOpen - Function to set open state.
|
|
* @prop renderDayContents - Function to render day contents.
|
|
* @prop renderMonthContent - Function to render month content.
|
|
* @prop renderQuarterContent - Function to render quarter content.
|
|
* @prop handleOnKeyDown - Function to handle key down events.
|
|
* @prop handleOnMonthKeyDown - Function to handle key down events on a month.
|
|
* @prop ariaLabelPrefix - Aria label prefix.
|
|
* @prop chooseDayAriaLabelPrefix - Aria label prefix for choosing a day.
|
|
* @prop disabledDayAriaLabelPrefix - Aria label prefix for disabled day.
|
|
* @prop disabledKeyboardNavigation - Flag to disable keyboard navigation.
|
|
* @prop day - The day.
|
|
* @prop endDate - The end date.
|
|
* @prop orderInDisplay - The order in display.
|
|
* @prop excludeDates - Dates to exclude.
|
|
* @prop excludeDateIntervals - Date intervals to exclude.
|
|
* @prop fixedHeight - Flag to set fixed height.
|
|
* @prop highlightDates - Dates to highlight.
|
|
* @prop holidays - Holidays.
|
|
* @prop includeDates - Dates to include.
|
|
* @prop includeDateIntervals - Date intervals to include.
|
|
* @prop inline - Flag to set inline.
|
|
* @prop shouldFocusDayInline - Flag to set focus on day inline.
|
|
* @prop locale - The locale.
|
|
* @prop maxDate - The maximum date.
|
|
* @prop minDate - The minimum date.
|
|
* @prop usePointerEvent - Flag to use pointer event.
|
|
* @prop peekNextMonth - Flag to peek next month.
|
|
* @prop preSelection - The pre-selection.
|
|
* @prop selected - The selected date.
|
|
* @prop selectingDate - The selecting date.
|
|
* @prop calendarStartDay - The calendar start day.
|
|
* @prop selectsEnd - Flag to select end.
|
|
* @prop selectsStart - Flag to select start.
|
|
* @prop selectsRange - Flag to select range.
|
|
* @prop selectsDisabledDaysInRange - Flag to select disabled days in range.
|
|
* @prop selectsMultiple - Flag to select multiple.
|
|
* @prop selectedDates - The selected dates.
|
|
* @prop showWeekNumbers - Flag to show week numbers.
|
|
* @prop startDate - The start date.
|
|
* @prop shouldCloseOnSelect - Flag to close on select.
|
|
* @prop showMonthYearPicker - Flag to show month year picker.
|
|
* @prop showFullMonthYearPicker - Flag to show full month year picker.
|
|
* @prop showTwoColumnMonthYearPicker - Flag to show two column month year picker.
|
|
* @prop showFourColumnMonthYearPicker - Flag to show four column month year picker.
|
|
* @prop showQuarterYearPicker - Flag to show quarter year picker.
|
|
* @prop showWeekPicker - Flag to show week picker.
|
|
* @prop isInputFocused - Flag to set input focus.
|
|
* @prop weekAriaLabelPrefix - Aria label prefix for week.
|
|
* @prop containerRef - The container reference.
|
|
* @prop monthShowsDuplicateDaysEnd - Flag to show duplicate days at the end of the month.
|
|
* @prop monthShowsDuplicateDaysStart - Flag to show duplicate days at the start of the month.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* function App() {
|
|
* const handleDayClick = (date) => {
|
|
* console.log('Day clicked: ', date);
|
|
* };
|
|
*
|
|
* const handleDayMouseEnter = (date) => {
|
|
* console.log('Mouse entered on day: ', date);
|
|
* };
|
|
*
|
|
* return (
|
|
* <div>
|
|
* <Month
|
|
* day={new Date()}
|
|
* endDate={new Date()}
|
|
* onDayClick={handleDayClick}
|
|
* onDayMouseEnter={handleDayMouseEnter}
|
|
* disabledKeyboardNavigation={false}
|
|
* showWeekNumbers={true}
|
|
* showMonthYearPicker={false}
|
|
* />
|
|
* </div>
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|
|
var Month = /** @class */ (function (_super) {
|
|
__extends(Month, _super);
|
|
function Month() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.MONTH_REFS = __spreadArray([], Array(12), true).map(function () { return React.createRef(); });
|
|
_this.QUARTER_REFS = __spreadArray([], Array(4), true).map(function () { return React.createRef(); });
|
|
_this.isDisabled = function (day) {
|
|
// Almost all props previously were passed as this.props w/o proper typing with prop-types
|
|
// after the migration to TS i made it explicit
|
|
return isDayDisabled(day, {
|
|
minDate: _this.props.minDate,
|
|
maxDate: _this.props.maxDate,
|
|
excludeDates: _this.props.excludeDates,
|
|
excludeDateIntervals: _this.props.excludeDateIntervals,
|
|
includeDateIntervals: _this.props.includeDateIntervals,
|
|
includeDates: _this.props.includeDates,
|
|
filterDate: _this.props.filterDate,
|
|
disabled: _this.props.disabled,
|
|
});
|
|
};
|
|
_this.isExcluded = function (day) {
|
|
// Almost all props previously were passed as this.props w/o proper typing with prop-types
|
|
// after the migration to TS i made it explicit
|
|
return isDayExcluded(day, {
|
|
excludeDates: _this.props.excludeDates,
|
|
excludeDateIntervals: _this.props.excludeDateIntervals,
|
|
});
|
|
};
|
|
_this.handleDayClick = function (day, event) {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onDayClick) === null || _b === void 0 ? void 0 : _b.call(_a, day, event, _this.props.orderInDisplay);
|
|
};
|
|
_this.handleDayMouseEnter = function (day) {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onDayMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, day);
|
|
};
|
|
_this.handleMouseLeave = function () {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
};
|
|
_this.isRangeStartMonth = function (m) {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!startDate || !endDate) {
|
|
return false;
|
|
}
|
|
return isSameMonth(dateFns.setMonth(day, m), startDate);
|
|
};
|
|
_this.isRangeStartQuarter = function (q) {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!startDate || !endDate) {
|
|
return false;
|
|
}
|
|
return isSameQuarter(dateFns.setQuarter(day, q), startDate);
|
|
};
|
|
_this.isRangeEndMonth = function (m) {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!startDate || !endDate) {
|
|
return false;
|
|
}
|
|
return isSameMonth(dateFns.setMonth(day, m), endDate);
|
|
};
|
|
_this.isRangeEndQuarter = function (q) {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!startDate || !endDate) {
|
|
return false;
|
|
}
|
|
return isSameQuarter(dateFns.setQuarter(day, q), endDate);
|
|
};
|
|
_this.isInSelectingRangeMonth = function (m) {
|
|
var _a;
|
|
var _b = _this.props, day = _b.day, selectsStart = _b.selectsStart, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange, startDate = _b.startDate, endDate = _b.endDate;
|
|
var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
|
|
if (!(selectsStart || selectsEnd || selectsRange) || !selectingDate) {
|
|
return false;
|
|
}
|
|
if (selectsStart && endDate) {
|
|
return isMonthInRange(selectingDate, endDate, m, day);
|
|
}
|
|
if (selectsEnd && startDate) {
|
|
return isMonthInRange(startDate, selectingDate, m, day);
|
|
}
|
|
if (selectsRange && startDate && !endDate) {
|
|
return isMonthInRange(startDate, selectingDate, m, day);
|
|
}
|
|
return false;
|
|
};
|
|
_this.isSelectingMonthRangeStart = function (m) {
|
|
var _a;
|
|
if (!_this.isInSelectingRangeMonth(m)) {
|
|
return false;
|
|
}
|
|
var _b = _this.props, day = _b.day, startDate = _b.startDate, selectsStart = _b.selectsStart;
|
|
var _month = dateFns.setMonth(day, m);
|
|
var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
|
|
if (selectsStart) {
|
|
return isSameMonth(_month, selectingDate);
|
|
}
|
|
else {
|
|
return isSameMonth(_month, startDate);
|
|
}
|
|
};
|
|
_this.isSelectingMonthRangeEnd = function (m) {
|
|
var _a;
|
|
if (!_this.isInSelectingRangeMonth(m)) {
|
|
return false;
|
|
}
|
|
var _b = _this.props, day = _b.day, endDate = _b.endDate, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange;
|
|
var _month = dateFns.setMonth(day, m);
|
|
var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
|
|
if (selectsEnd || selectsRange) {
|
|
return isSameMonth(_month, selectingDate);
|
|
}
|
|
else {
|
|
return isSameMonth(_month, endDate);
|
|
}
|
|
};
|
|
_this.isInSelectingRangeQuarter = function (q) {
|
|
var _a;
|
|
var _b = _this.props, day = _b.day, selectsStart = _b.selectsStart, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange, startDate = _b.startDate, endDate = _b.endDate;
|
|
var selectingDate = (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection;
|
|
if (!(selectsStart || selectsEnd || selectsRange) || !selectingDate) {
|
|
return false;
|
|
}
|
|
if (selectsStart && endDate) {
|
|
return isQuarterInRange(selectingDate, endDate, q, day);
|
|
}
|
|
if (selectsEnd && startDate) {
|
|
return isQuarterInRange(startDate, selectingDate, q, day);
|
|
}
|
|
if (selectsRange && startDate && !endDate) {
|
|
return isQuarterInRange(startDate, selectingDate, q, day);
|
|
}
|
|
return false;
|
|
};
|
|
_this.isWeekInMonth = function (startOfWeek) {
|
|
var day = _this.props.day;
|
|
var endOfWeek = dateFns.addDays(startOfWeek, 6);
|
|
return isSameMonth(startOfWeek, day) || isSameMonth(endOfWeek, day);
|
|
};
|
|
_this.isCurrentMonth = function (day, m) {
|
|
return dateFns.getYear(day) === dateFns.getYear(newDate()) && m === dateFns.getMonth(newDate());
|
|
};
|
|
_this.isCurrentQuarter = function (day, q) {
|
|
return dateFns.getYear(day) === dateFns.getYear(newDate()) && q === dateFns.getQuarter(newDate());
|
|
};
|
|
_this.isSelectedMonth = function (day, m, selected) {
|
|
return dateFns.getMonth(selected) === m && dateFns.getYear(day) === dateFns.getYear(selected);
|
|
};
|
|
_this.isSelectMonthInList = function (day, m, selectedDates) {
|
|
return selectedDates.some(function (selectedDate) {
|
|
return _this.isSelectedMonth(day, m, selectedDate);
|
|
});
|
|
};
|
|
_this.isSelectedQuarter = function (day, q, selected) {
|
|
return dateFns.getQuarter(selected) === q && dateFns.getYear(day) === dateFns.getYear(selected);
|
|
};
|
|
_this.isSelectQuarterInList = function (day, q, selectedDates) {
|
|
return selectedDates.some(function (selectedDate) {
|
|
return _this.isSelectedQuarter(day, q, selectedDate);
|
|
});
|
|
};
|
|
_this.isMonthSelected = function () {
|
|
var _a = _this.props, day = _a.day, selected = _a.selected, selectedDates = _a.selectedDates, selectsMultiple = _a.selectsMultiple;
|
|
var monthIdx = dateFns.getMonth(day);
|
|
if (selectsMultiple) {
|
|
return selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.some(function (date) {
|
|
return _this.isSelectedMonth(day, monthIdx, date);
|
|
});
|
|
}
|
|
return !!selected && _this.isSelectedMonth(day, monthIdx, selected);
|
|
};
|
|
_this.isQuarterSelected = function () {
|
|
var _a = _this.props, day = _a.day, selected = _a.selected, selectedDates = _a.selectedDates, selectsMultiple = _a.selectsMultiple;
|
|
var quarterIdx = dateFns.getQuarter(day);
|
|
if (selectsMultiple) {
|
|
return selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.some(function (selectedDate) {
|
|
return _this.isSelectedQuarter(day, quarterIdx, selectedDate);
|
|
});
|
|
}
|
|
return !!selected && _this.isSelectedQuarter(day, quarterIdx, selected);
|
|
};
|
|
_this.renderWeeks = function () {
|
|
// Return empty array if day is invalid
|
|
if (!isValid(_this.props.day)) {
|
|
return [];
|
|
}
|
|
var weeks = [];
|
|
var isFixedHeight = _this.props.fixedHeight;
|
|
var i = 0;
|
|
var breakAfterNextPush = false;
|
|
var currentWeekStart = getStartOfWeek(getStartOfMonth(_this.props.day), _this.props.locale, _this.props.calendarStartDay);
|
|
var isPreSelected = function (preSelection) {
|
|
return _this.props.showWeekPicker
|
|
? getStartOfWeek(preSelection, _this.props.locale, _this.props.calendarStartDay)
|
|
: _this.props.preSelection;
|
|
};
|
|
var isSelected = function (selected) {
|
|
return _this.props.showWeekPicker
|
|
? getStartOfWeek(selected, _this.props.locale, _this.props.calendarStartDay)
|
|
: _this.props.selected;
|
|
};
|
|
var selected = _this.props.selected
|
|
? isSelected(_this.props.selected)
|
|
: undefined;
|
|
var preSelection = _this.props.preSelection
|
|
? isPreSelected(_this.props.preSelection)
|
|
: undefined;
|
|
while (true) {
|
|
weeks.push(React__default.default.createElement(Week, _assign({}, _this.props, { ariaLabelPrefix: _this.props.weekAriaLabelPrefix, key: i, day: currentWeekStart, month: dateFns.getMonth(_this.props.day), onDayClick: _this.handleDayClick, onDayMouseEnter: _this.handleDayMouseEnter, selected: selected, preSelection: preSelection, showWeekNumber: _this.props.showWeekNumbers })));
|
|
if (breakAfterNextPush)
|
|
break;
|
|
i++;
|
|
currentWeekStart = dateFns.addWeeks(currentWeekStart, 1);
|
|
// If one of these conditions is true, we will either break on this week
|
|
// or break on the next week
|
|
var isFixedAndFinalWeek = isFixedHeight && i >= FIXED_HEIGHT_STANDARD_WEEK_COUNT;
|
|
var isNonFixedAndOutOfMonth = !isFixedHeight && !_this.isWeekInMonth(currentWeekStart);
|
|
if (isFixedAndFinalWeek || isNonFixedAndOutOfMonth) {
|
|
if (_this.props.peekNextMonth) {
|
|
breakAfterNextPush = true;
|
|
}
|
|
else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return weeks;
|
|
};
|
|
_this.onMonthClick = function (event, m) {
|
|
var _a = _this.isMonthDisabledForLabelDate(m), isDisabled = _a.isDisabled, labelDate = _a.labelDate;
|
|
if (isDisabled) {
|
|
return;
|
|
}
|
|
_this.handleDayClick(getStartOfMonth(labelDate), event);
|
|
};
|
|
_this.onMonthMouseEnter = function (m) {
|
|
var _a = _this.isMonthDisabledForLabelDate(m), isDisabled = _a.isDisabled, labelDate = _a.labelDate;
|
|
if (isDisabled) {
|
|
return;
|
|
}
|
|
_this.handleDayMouseEnter(getStartOfMonth(labelDate));
|
|
};
|
|
_this.handleMonthNavigation = function (newMonth, newDate) {
|
|
var _a, _b, _c, _d;
|
|
(_b = (_a = _this.props).setPreSelection) === null || _b === void 0 ? void 0 : _b.call(_a, newDate);
|
|
(_d = (_c = _this.MONTH_REFS[newMonth]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
|
|
};
|
|
_this.handleKeyboardNavigation = function (event, eventKey, month) {
|
|
var _a;
|
|
var _b = _this.props, selected = _b.selected, preSelection = _b.preSelection, setPreSelection = _b.setPreSelection, minDate = _b.minDate, maxDate = _b.maxDate, showFourColumnMonthYearPicker = _b.showFourColumnMonthYearPicker, showTwoColumnMonthYearPicker = _b.showTwoColumnMonthYearPicker;
|
|
if (!preSelection)
|
|
return;
|
|
var monthColumnsLayout = getMonthColumnsLayout(showFourColumnMonthYearPicker, showTwoColumnMonthYearPicker);
|
|
var verticalOffset = _this.getVerticalOffset(monthColumnsLayout);
|
|
var monthsGrid = (_a = MONTH_COLUMNS[monthColumnsLayout]) === null || _a === void 0 ? void 0 : _a.grid;
|
|
var calculateNewDateAndMonth = function (eventKey, date, month) {
|
|
var _a, _b;
|
|
var newCalculatedDate = date;
|
|
var newCalculatedMonth = month;
|
|
switch (eventKey) {
|
|
case KeyType.ArrowRight:
|
|
newCalculatedDate = dateFns.addMonths(date, MONTH_NAVIGATION_HORIZONTAL_OFFSET);
|
|
newCalculatedMonth =
|
|
month === 11 ? 0 : month + MONTH_NAVIGATION_HORIZONTAL_OFFSET;
|
|
break;
|
|
case KeyType.ArrowLeft:
|
|
newCalculatedDate = dateFns.subMonths(date, MONTH_NAVIGATION_HORIZONTAL_OFFSET);
|
|
newCalculatedMonth =
|
|
month === 0 ? 11 : month - MONTH_NAVIGATION_HORIZONTAL_OFFSET;
|
|
break;
|
|
case KeyType.ArrowUp:
|
|
newCalculatedDate = dateFns.subMonths(date, verticalOffset);
|
|
newCalculatedMonth = ((_a = monthsGrid === null || monthsGrid === void 0 ? void 0 : monthsGrid[0]) === null || _a === void 0 ? void 0 : _a.includes(month))
|
|
? month + 12 - verticalOffset
|
|
: month - verticalOffset;
|
|
break;
|
|
case KeyType.ArrowDown:
|
|
newCalculatedDate = dateFns.addMonths(date, verticalOffset);
|
|
newCalculatedMonth = ((_b = monthsGrid === null || monthsGrid === void 0 ? void 0 : monthsGrid[monthsGrid.length - 1]) === null || _b === void 0 ? void 0 : _b.includes(month))
|
|
? month - 12 + verticalOffset
|
|
: month + verticalOffset;
|
|
break;
|
|
}
|
|
return { newCalculatedDate: newCalculatedDate, newCalculatedMonth: newCalculatedMonth };
|
|
};
|
|
var getNewDateAndMonth = function (eventKey, selectedDate, month) {
|
|
var MAX_ITERATIONS = 40;
|
|
var eventKeyCopy = eventKey;
|
|
var validDateFound = false;
|
|
var iterations = 0;
|
|
var _a = calculateNewDateAndMonth(eventKeyCopy, selectedDate, month), newCalculatedDate = _a.newCalculatedDate, newCalculatedMonth = _a.newCalculatedMonth;
|
|
while (!validDateFound) {
|
|
if (iterations >= MAX_ITERATIONS) {
|
|
newCalculatedDate = selectedDate;
|
|
newCalculatedMonth = month;
|
|
break;
|
|
}
|
|
// if minDate exists and the new month is before the minimum month, it will try to find the next available month after
|
|
if (minDate && newCalculatedDate < minDate) {
|
|
eventKeyCopy = KeyType.ArrowRight;
|
|
var obj = calculateNewDateAndMonth(eventKeyCopy, newCalculatedDate, newCalculatedMonth);
|
|
newCalculatedDate = obj.newCalculatedDate;
|
|
newCalculatedMonth = obj.newCalculatedMonth;
|
|
}
|
|
// if maxDate exists and the new month is after the maximum month, it will try to find the next available month before
|
|
if (maxDate && newCalculatedDate > maxDate) {
|
|
eventKeyCopy = KeyType.ArrowLeft;
|
|
var obj = calculateNewDateAndMonth(eventKeyCopy, newCalculatedDate, newCalculatedMonth);
|
|
newCalculatedDate = obj.newCalculatedDate;
|
|
newCalculatedMonth = obj.newCalculatedMonth;
|
|
}
|
|
if (isMonthYearDisabled(newCalculatedDate, _this.props)) {
|
|
var obj = calculateNewDateAndMonth(eventKeyCopy, newCalculatedDate, newCalculatedMonth);
|
|
newCalculatedDate = obj.newCalculatedDate;
|
|
newCalculatedMonth = obj.newCalculatedMonth;
|
|
}
|
|
else {
|
|
validDateFound = true;
|
|
}
|
|
iterations++;
|
|
}
|
|
return { newCalculatedDate: newCalculatedDate, newCalculatedMonth: newCalculatedMonth };
|
|
};
|
|
if (eventKey === KeyType.Enter) {
|
|
if (!_this.isMonthDisabled(month)) {
|
|
_this.onMonthClick(event, month);
|
|
setPreSelection === null || setPreSelection === void 0 ? void 0 : setPreSelection(selected);
|
|
}
|
|
return;
|
|
}
|
|
var _c = getNewDateAndMonth(eventKey, preSelection, month), newCalculatedDate = _c.newCalculatedDate, newCalculatedMonth = _c.newCalculatedMonth;
|
|
switch (eventKey) {
|
|
case KeyType.ArrowRight:
|
|
case KeyType.ArrowLeft:
|
|
case KeyType.ArrowUp:
|
|
case KeyType.ArrowDown:
|
|
_this.handleMonthNavigation(newCalculatedMonth, newCalculatedDate);
|
|
break;
|
|
}
|
|
};
|
|
_this.getVerticalOffset = function (monthColumnsLayout) {
|
|
var _a, _b;
|
|
return (_b = (_a = MONTH_COLUMNS[monthColumnsLayout]) === null || _a === void 0 ? void 0 : _a.verticalNavigationOffset) !== null && _b !== void 0 ? _b : 0;
|
|
};
|
|
_this.onMonthKeyDown = function (event, month) {
|
|
var _a = _this.props, disabledKeyboardNavigation = _a.disabledKeyboardNavigation, handleOnMonthKeyDown = _a.handleOnMonthKeyDown;
|
|
var eventKey = event.key;
|
|
if (eventKey !== KeyType.Tab) {
|
|
// preventDefault on tab event blocks focus change
|
|
event.preventDefault();
|
|
}
|
|
if (!disabledKeyboardNavigation) {
|
|
_this.handleKeyboardNavigation(event, eventKey, month);
|
|
}
|
|
handleOnMonthKeyDown && handleOnMonthKeyDown(event);
|
|
};
|
|
_this.onQuarterClick = function (event, q) {
|
|
var labelDate = dateFns.setQuarter(_this.props.day, q);
|
|
if (isQuarterDisabled(labelDate, _this.props)) {
|
|
return;
|
|
}
|
|
_this.handleDayClick(getStartOfQuarter(labelDate), event);
|
|
};
|
|
_this.onQuarterMouseEnter = function (q) {
|
|
var labelDate = dateFns.setQuarter(_this.props.day, q);
|
|
if (isQuarterDisabled(labelDate, _this.props)) {
|
|
return;
|
|
}
|
|
_this.handleDayMouseEnter(getStartOfQuarter(labelDate));
|
|
};
|
|
_this.handleQuarterNavigation = function (newQuarter, newDate) {
|
|
var _a, _b, _c, _d;
|
|
if (_this.isDisabled(newDate) || _this.isExcluded(newDate)) {
|
|
return;
|
|
}
|
|
(_b = (_a = _this.props).setPreSelection) === null || _b === void 0 ? void 0 : _b.call(_a, newDate);
|
|
(_d = (_c = _this.QUARTER_REFS[newQuarter - 1]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
|
|
};
|
|
_this.onQuarterKeyDown = function (event, quarter) {
|
|
var _a, _b;
|
|
var eventKey = event.key;
|
|
if (!_this.props.disabledKeyboardNavigation) {
|
|
switch (eventKey) {
|
|
case KeyType.Enter:
|
|
_this.onQuarterClick(event, quarter);
|
|
(_b = (_a = _this.props).setPreSelection) === null || _b === void 0 ? void 0 : _b.call(_a, _this.props.selected);
|
|
break;
|
|
case KeyType.ArrowRight:
|
|
if (!_this.props.preSelection) {
|
|
break;
|
|
}
|
|
_this.handleQuarterNavigation(quarter === 4 ? 1 : quarter + 1, dateFns.addQuarters(_this.props.preSelection, 1));
|
|
break;
|
|
case KeyType.ArrowLeft:
|
|
if (!_this.props.preSelection) {
|
|
break;
|
|
}
|
|
_this.handleQuarterNavigation(quarter === 1 ? 4 : quarter - 1, dateFns.subQuarters(_this.props.preSelection, 1));
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
_this.isMonthDisabledForLabelDate = function (month) {
|
|
var _a;
|
|
var _b = _this.props, day = _b.day, disabled = _b.disabled, minDate = _b.minDate, maxDate = _b.maxDate, excludeDates = _b.excludeDates, includeDates = _b.includeDates;
|
|
var labelDate = dateFns.setMonth(day, month);
|
|
if (disabled) {
|
|
return {
|
|
isDisabled: true,
|
|
labelDate: dateFns.setMonth(day, month),
|
|
};
|
|
}
|
|
return {
|
|
isDisabled: (_a = ((minDate || maxDate || excludeDates || includeDates) &&
|
|
isMonthDisabled(labelDate, _this.props))) !== null && _a !== void 0 ? _a : false,
|
|
labelDate: labelDate,
|
|
};
|
|
};
|
|
_this.isMonthDisabled = function (month) {
|
|
var isDisabled = _this.isMonthDisabledForLabelDate(month).isDisabled;
|
|
return isDisabled;
|
|
};
|
|
_this.getMonthClassNames = function (m) {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate, preSelection = _a.preSelection, monthClassName = _a.monthClassName;
|
|
var _monthClassName = monthClassName
|
|
? monthClassName(dateFns.setMonth(day, m))
|
|
: undefined;
|
|
var selection = _this.getSelection();
|
|
return clsx.clsx("react-datepicker__month-text", "react-datepicker__month-".concat(m), _monthClassName, {
|
|
"react-datepicker__month-text--disabled": _this.isMonthDisabled(m),
|
|
"react-datepicker__month-text--selected": selection
|
|
? _this.isSelectMonthInList(day, m, selection)
|
|
: undefined,
|
|
"react-datepicker__month-text--keyboard-selected": !_this.props.disabledKeyboardNavigation &&
|
|
preSelection &&
|
|
_this.isSelectedMonth(day, m, preSelection) &&
|
|
!_this.isMonthSelected() &&
|
|
!_this.isMonthDisabled(m),
|
|
"react-datepicker__month-text--in-selecting-range": _this.isInSelectingRangeMonth(m),
|
|
"react-datepicker__month-text--in-range": startDate && endDate
|
|
? isMonthInRange(startDate, endDate, m, day)
|
|
: undefined,
|
|
"react-datepicker__month-text--range-start": _this.isRangeStartMonth(m),
|
|
"react-datepicker__month-text--range-end": _this.isRangeEndMonth(m),
|
|
"react-datepicker__month-text--selecting-range-start": _this.isSelectingMonthRangeStart(m),
|
|
"react-datepicker__month-text--selecting-range-end": _this.isSelectingMonthRangeEnd(m),
|
|
"react-datepicker__month-text--today": _this.isCurrentMonth(day, m),
|
|
});
|
|
};
|
|
_this.getTabIndex = function (m) {
|
|
if (_this.props.preSelection == null) {
|
|
return "-1";
|
|
}
|
|
var preSelectedMonth = dateFns.getMonth(_this.props.preSelection);
|
|
var isPreSelectedMonthDisabled = _this.isMonthDisabledForLabelDate(preSelectedMonth).isDisabled;
|
|
var tabIndex = m === preSelectedMonth &&
|
|
!(isPreSelectedMonthDisabled || _this.props.disabledKeyboardNavigation)
|
|
? "0"
|
|
: "-1";
|
|
return tabIndex;
|
|
};
|
|
_this.getQuarterTabIndex = function (q) {
|
|
if (_this.props.preSelection == null) {
|
|
return "-1";
|
|
}
|
|
var preSelectedQuarter = dateFns.getQuarter(_this.props.preSelection);
|
|
var isCurrentQuarterDisabled = isQuarterDisabled(_this.props.day, _this.props);
|
|
var tabIndex = q === preSelectedQuarter &&
|
|
!(isCurrentQuarterDisabled || _this.props.disabledKeyboardNavigation)
|
|
? "0"
|
|
: "-1";
|
|
return tabIndex;
|
|
};
|
|
_this.getAriaLabel = function (month) {
|
|
var _a = _this.props, _b = _a.chooseDayAriaLabelPrefix, chooseDayAriaLabelPrefix = _b === void 0 ? "Choose" : _b, _c = _a.disabledDayAriaLabelPrefix, disabledDayAriaLabelPrefix = _c === void 0 ? "Not available" : _c, day = _a.day, locale = _a.locale;
|
|
var labelDate = dateFns.setMonth(day, month);
|
|
var prefix = _this.isDisabled(labelDate) || _this.isExcluded(labelDate)
|
|
? disabledDayAriaLabelPrefix
|
|
: chooseDayAriaLabelPrefix;
|
|
return "".concat(prefix, " ").concat(formatDate(labelDate, "MMMM yyyy", locale));
|
|
};
|
|
_this.getQuarterClassNames = function (q) {
|
|
var _a = _this.props, day = _a.day, startDate = _a.startDate, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, filterDate = _a.filterDate, preSelection = _a.preSelection, disabledKeyboardNavigation = _a.disabledKeyboardNavigation, disabled = _a.disabled;
|
|
var isDisabled = (minDate ||
|
|
maxDate ||
|
|
excludeDates ||
|
|
includeDates ||
|
|
filterDate ||
|
|
disabled) &&
|
|
isQuarterDisabled(dateFns.setQuarter(day, q), _this.props);
|
|
var selection = _this.getSelection();
|
|
return clsx.clsx("react-datepicker__quarter-text", "react-datepicker__quarter-".concat(q), {
|
|
"react-datepicker__quarter-text--disabled": isDisabled,
|
|
"react-datepicker__quarter-text--selected": selection
|
|
? _this.isSelectQuarterInList(day, q, selection)
|
|
: undefined,
|
|
"react-datepicker__quarter-text--keyboard-selected": !disabledKeyboardNavigation &&
|
|
preSelection &&
|
|
_this.isSelectedQuarter(day, q, preSelection) &&
|
|
!_this.isQuarterSelected() &&
|
|
!isDisabled,
|
|
"react-datepicker__quarter-text--in-selecting-range": _this.isInSelectingRangeQuarter(q),
|
|
"react-datepicker__quarter-text--in-range": startDate && endDate
|
|
? isQuarterInRange(startDate, endDate, q, day)
|
|
: undefined,
|
|
"react-datepicker__quarter-text--range-start": _this.isRangeStartQuarter(q),
|
|
"react-datepicker__quarter-text--range-end": _this.isRangeEndQuarter(q),
|
|
"react-datepicker__quarter-text--today": _this.isCurrentQuarter(day, q),
|
|
});
|
|
};
|
|
_this.getMonthContent = function (m) {
|
|
var _a = _this.props, showFullMonthYearPicker = _a.showFullMonthYearPicker, renderMonthContent = _a.renderMonthContent, locale = _a.locale, day = _a.day;
|
|
var shortMonthText = getMonthShortInLocale(m, locale);
|
|
var fullMonthText = getMonthInLocale(m, locale);
|
|
if (renderMonthContent) {
|
|
return renderMonthContent(m, shortMonthText, fullMonthText, day);
|
|
}
|
|
return showFullMonthYearPicker ? fullMonthText : shortMonthText;
|
|
};
|
|
_this.getQuarterContent = function (q) {
|
|
var _a;
|
|
var _b = _this.props, renderQuarterContent = _b.renderQuarterContent, locale = _b.locale;
|
|
var shortQuarter = getQuarterShortInLocale(q, locale);
|
|
return (_a = renderQuarterContent === null || renderQuarterContent === void 0 ? void 0 : renderQuarterContent(q, shortQuarter)) !== null && _a !== void 0 ? _a : shortQuarter;
|
|
};
|
|
_this.renderMonths = function () {
|
|
var _a;
|
|
var _b = _this.props, showTwoColumnMonthYearPicker = _b.showTwoColumnMonthYearPicker, showFourColumnMonthYearPicker = _b.showFourColumnMonthYearPicker, day = _b.day, selected = _b.selected;
|
|
var monthColumns = (_a = MONTH_COLUMNS[getMonthColumnsLayout(showFourColumnMonthYearPicker, showTwoColumnMonthYearPicker)]) === null || _a === void 0 ? void 0 : _a.grid;
|
|
return monthColumns === null || monthColumns === void 0 ? void 0 : monthColumns.map(function (month, i) { return (React__default.default.createElement("div", { className: "react-datepicker__month-wrapper", key: i }, month.map(function (m, j) { return (React__default.default.createElement("div", { ref: _this.MONTH_REFS[m], key: j, onClick: function (event) {
|
|
_this.onMonthClick(event, m);
|
|
}, onKeyDown: function (event) {
|
|
if (isSpaceKeyDown(event)) {
|
|
event.preventDefault();
|
|
event.key = KeyType.Enter;
|
|
}
|
|
_this.onMonthKeyDown(event, m);
|
|
}, onMouseEnter: !_this.props.usePointerEvent
|
|
? function () { return _this.onMonthMouseEnter(m); }
|
|
: undefined, onPointerEnter: _this.props.usePointerEvent
|
|
? function () { return _this.onMonthMouseEnter(m); }
|
|
: undefined, tabIndex: Number(_this.getTabIndex(m)), className: _this.getMonthClassNames(m), "aria-disabled": _this.isMonthDisabled(m), role: "option", "aria-label": _this.getAriaLabel(m), "aria-current": _this.isCurrentMonth(day, m) ? "date" : undefined, "aria-selected": selected ? _this.isSelectedMonth(day, m, selected) : undefined }, _this.getMonthContent(m))); }))); });
|
|
};
|
|
_this.renderQuarters = function () {
|
|
var _a = _this.props, day = _a.day, selected = _a.selected;
|
|
var quarters = [1, 2, 3, 4];
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__quarter-wrapper" }, quarters.map(function (q, j) { return (React__default.default.createElement("div", { key: j, ref: _this.QUARTER_REFS[j], role: "option", onClick: function (event) {
|
|
_this.onQuarterClick(event, q);
|
|
}, onKeyDown: function (event) {
|
|
_this.onQuarterKeyDown(event, q);
|
|
}, onMouseEnter: !_this.props.usePointerEvent
|
|
? function () { return _this.onQuarterMouseEnter(q); }
|
|
: undefined, onPointerEnter: _this.props.usePointerEvent
|
|
? function () { return _this.onQuarterMouseEnter(q); }
|
|
: undefined, className: _this.getQuarterClassNames(q), "aria-selected": selected ? _this.isSelectedQuarter(day, q, selected) : undefined, tabIndex: Number(_this.getQuarterTabIndex(q)), "aria-current": _this.isCurrentQuarter(day, q) ? "date" : undefined }, _this.getQuarterContent(q))); })));
|
|
};
|
|
_this.getClassNames = function () {
|
|
var _a = _this.props, selectingDate = _a.selectingDate, selectsStart = _a.selectsStart, selectsEnd = _a.selectsEnd, showMonthYearPicker = _a.showMonthYearPicker, showQuarterYearPicker = _a.showQuarterYearPicker, showWeekPicker = _a.showWeekPicker;
|
|
return clsx.clsx("react-datepicker__month", {
|
|
"react-datepicker__month--selecting-range": selectingDate && (selectsStart || selectsEnd),
|
|
}, { "react-datepicker__monthPicker": showMonthYearPicker }, { "react-datepicker__quarterPicker": showQuarterYearPicker }, { "react-datepicker__weekPicker": showWeekPicker });
|
|
};
|
|
return _this;
|
|
}
|
|
Month.prototype.getSelection = function () {
|
|
var _a = this.props, selected = _a.selected, selectedDates = _a.selectedDates, selectsMultiple = _a.selectsMultiple;
|
|
if (selectsMultiple) {
|
|
return selectedDates;
|
|
}
|
|
if (selected) {
|
|
return [selected];
|
|
}
|
|
return undefined;
|
|
};
|
|
Month.prototype.render = function () {
|
|
var _a = this.props, showMonthYearPicker = _a.showMonthYearPicker, showQuarterYearPicker = _a.showQuarterYearPicker, day = _a.day, _b = _a.ariaLabelPrefix, ariaLabelPrefix = _b === void 0 ? "Month " : _b;
|
|
var formattedAriaLabelPrefix = ariaLabelPrefix
|
|
? ariaLabelPrefix.trim() + " "
|
|
: "";
|
|
// Format aria-label, return empty string if date is invalid
|
|
var formattedAriaLabel = isValid(day)
|
|
? "".concat(formattedAriaLabelPrefix).concat(formatDate(day, "MMMM, yyyy", this.props.locale))
|
|
: "";
|
|
var shouldUseListboxRole = showMonthYearPicker || showQuarterYearPicker;
|
|
if (shouldUseListboxRole) {
|
|
return (React__default.default.createElement("div", { className: this.getClassNames(), onMouseLeave: !this.props.usePointerEvent ? this.handleMouseLeave : undefined, onPointerLeave: this.props.usePointerEvent ? this.handleMouseLeave : undefined, "aria-label": formattedAriaLabel, role: "listbox" }, showMonthYearPicker ? this.renderMonths() : this.renderQuarters()));
|
|
}
|
|
// For regular calendar view, use table structure
|
|
return (React__default.default.createElement("div", { role: "table" },
|
|
this.props.dayNamesHeader && (React__default.default.createElement("div", { role: "rowgroup" }, this.props.dayNamesHeader)),
|
|
this.props.monthHeader && (React__default.default.createElement("div", { role: "rowgroup" }, this.props.monthHeader)),
|
|
React__default.default.createElement("div", { className: this.getClassNames(), onMouseLeave: !this.props.usePointerEvent ? this.handleMouseLeave : undefined, onPointerLeave: this.props.usePointerEvent ? this.handleMouseLeave : undefined, "aria-label": formattedAriaLabel, role: "rowgroup" }, this.renderWeeks()),
|
|
this.props.monthFooter && (React__default.default.createElement("div", { role: "rowgroup" }, this.props.monthFooter))));
|
|
};
|
|
return Month;
|
|
}(React.Component));
|
|
|
|
var MonthDropdownOptions = /** @class */ (function (_super) {
|
|
__extends(MonthDropdownOptions, _super);
|
|
function MonthDropdownOptions() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.monthOptionButtonsRef = {};
|
|
_this.isSelectedMonth = function (i) { return _this.props.month === i; };
|
|
_this.handleOptionKeyDown = function (i, e) {
|
|
var _a;
|
|
switch (e.key) {
|
|
case "Enter":
|
|
e.preventDefault();
|
|
_this.onChange(i);
|
|
break;
|
|
case "Escape":
|
|
e.preventDefault();
|
|
_this.props.onCancel();
|
|
break;
|
|
case "ArrowUp":
|
|
case "ArrowDown": {
|
|
e.preventDefault();
|
|
var newMonth = (i + (e.key === "ArrowUp" ? -1 : 1) + _this.props.monthNames.length) %
|
|
_this.props.monthNames.length;
|
|
(_a = _this.monthOptionButtonsRef[newMonth]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
_this.renderOptions = function () {
|
|
// Clear refs to prevent memory leaks on re-render
|
|
_this.monthOptionButtonsRef = {};
|
|
return _this.props.monthNames.map(function (month, i) { return (React__default.default.createElement("div", { ref: function (el) {
|
|
_this.monthOptionButtonsRef[i] = el;
|
|
if (_this.isSelectedMonth(i)) {
|
|
el === null || el === void 0 ? void 0 : el.focus();
|
|
}
|
|
}, role: "button", tabIndex: 0, className: _this.isSelectedMonth(i)
|
|
? "react-datepicker__month-option react-datepicker__month-option--selected_month"
|
|
: "react-datepicker__month-option", key: month, onClick: _this.onChange.bind(_this, i), onKeyDown: _this.handleOptionKeyDown.bind(_this, i), "aria-selected": _this.isSelectedMonth(i) ? "true" : undefined },
|
|
_this.isSelectedMonth(i) ? (React__default.default.createElement("span", { className: "react-datepicker__month-option--selected" }, "\u2713")) : (""),
|
|
month)); });
|
|
};
|
|
_this.onChange = function (month) { return _this.props.onChange(month); };
|
|
_this.handleClickOutside = function () { return _this.props.onCancel(); };
|
|
return _this;
|
|
}
|
|
MonthDropdownOptions.prototype.render = function () {
|
|
return (React__default.default.createElement(ClickOutsideWrapper, { className: "react-datepicker__month-dropdown", onClickOutside: this.handleClickOutside }, this.renderOptions()));
|
|
};
|
|
return MonthDropdownOptions;
|
|
}(React.Component));
|
|
|
|
var MonthDropdown = /** @class */ (function (_super) {
|
|
__extends(MonthDropdown, _super);
|
|
function MonthDropdown() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.state = {
|
|
dropdownVisible: false,
|
|
};
|
|
_this.renderSelectOptions = function (monthNames) {
|
|
return monthNames.map(function (m, i) { return (React__default.default.createElement("option", { key: m, value: i }, m)); });
|
|
};
|
|
_this.renderSelectMode = function (monthNames) { return (React__default.default.createElement("select", { value: _this.props.month, className: "react-datepicker__month-select", onChange: function (e) { return _this.onChange(parseInt(e.target.value)); } }, _this.renderSelectOptions(monthNames))); };
|
|
_this.renderReadView = function (visible, monthNames) { return (React__default.default.createElement("button", { key: "read", type: "button", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-read-view", onClick: _this.toggleDropdown },
|
|
React__default.default.createElement("span", { className: "react-datepicker__month-read-view--down-arrow" }),
|
|
React__default.default.createElement("span", { className: "react-datepicker__month-read-view--selected-month" }, monthNames[_this.props.month]))); };
|
|
_this.renderDropdown = function (monthNames) { return (React__default.default.createElement(MonthDropdownOptions, _assign({ key: "dropdown" }, _this.props, { monthNames: monthNames, onChange: _this.onChange, onCancel: _this.toggleDropdown }))); };
|
|
_this.renderScrollMode = function (monthNames) {
|
|
var dropdownVisible = _this.state.dropdownVisible;
|
|
var result = [_this.renderReadView(!dropdownVisible, monthNames)];
|
|
if (dropdownVisible) {
|
|
result.unshift(_this.renderDropdown(monthNames));
|
|
}
|
|
return result;
|
|
};
|
|
_this.onChange = function (month) {
|
|
_this.toggleDropdown();
|
|
if (month !== _this.props.month) {
|
|
_this.props.onChange(month);
|
|
}
|
|
};
|
|
_this.toggleDropdown = function () {
|
|
return _this.setState({
|
|
dropdownVisible: !_this.state.dropdownVisible,
|
|
});
|
|
};
|
|
return _this;
|
|
}
|
|
MonthDropdown.prototype.render = function () {
|
|
var _this = this;
|
|
var monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(this.props.useShortMonthInDropdown
|
|
? function (m) { return getMonthShortInLocale(m, _this.props.locale); }
|
|
: function (m) { return getMonthInLocale(m, _this.props.locale); });
|
|
var renderedDropdown;
|
|
switch (this.props.dropdownMode) {
|
|
case "scroll":
|
|
renderedDropdown = this.renderScrollMode(monthNames);
|
|
break;
|
|
case "select":
|
|
renderedDropdown = this.renderSelectMode(monthNames);
|
|
break;
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown));
|
|
};
|
|
return MonthDropdown;
|
|
}(React.Component));
|
|
|
|
// Default range: 5 years before and after current date
|
|
var DEFAULT_YEAR_RANGE$1 = 5;
|
|
function generateMonthYears(minDate, maxDate, currentDate) {
|
|
var list = [];
|
|
// Use defaults if minDate/maxDate not provided
|
|
var effectiveMinDate = minDate !== null && minDate !== void 0 ? minDate : dateFns.subYears(currentDate, DEFAULT_YEAR_RANGE$1);
|
|
var effectiveMaxDate = maxDate !== null && maxDate !== void 0 ? maxDate : dateFns.addYears(currentDate, DEFAULT_YEAR_RANGE$1);
|
|
var currDate = getStartOfMonth(effectiveMinDate);
|
|
var lastDate = getStartOfMonth(effectiveMaxDate);
|
|
while (!dateFns.isAfter(currDate, lastDate)) {
|
|
list.push(newDate(currDate));
|
|
currDate = dateFns.addMonths(currDate, 1);
|
|
}
|
|
return list;
|
|
}
|
|
var MonthYearDropdownOptions = /** @class */ (function (_super) {
|
|
__extends(MonthYearDropdownOptions, _super);
|
|
function MonthYearDropdownOptions(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this.renderOptions = function () {
|
|
return _this.state.monthYearsList.map(function (monthYear) {
|
|
var monthYearPoint = dateFns.getTime(monthYear);
|
|
var isSameMonthYear = isSameYear(_this.props.date, monthYear) &&
|
|
isSameMonth(_this.props.date, monthYear);
|
|
return (React__default.default.createElement("div", { className: isSameMonthYear
|
|
? "react-datepicker__month-year-option--selected_month-year"
|
|
: "react-datepicker__month-year-option", key: monthYearPoint, onClick: _this.onChange.bind(_this, monthYearPoint), "aria-selected": isSameMonthYear ? "true" : undefined },
|
|
isSameMonthYear ? (React__default.default.createElement("span", { className: "react-datepicker__month-year-option--selected" }, "\u2713")) : (""),
|
|
formatDate(monthYear, _this.props.dateFormat, _this.props.locale)));
|
|
});
|
|
};
|
|
_this.onChange = function (monthYear) { return _this.props.onChange(monthYear); };
|
|
_this.handleClickOutside = function () {
|
|
_this.props.onCancel();
|
|
};
|
|
_this.state = {
|
|
monthYearsList: generateMonthYears(_this.props.minDate, _this.props.maxDate, _this.props.date),
|
|
};
|
|
return _this;
|
|
}
|
|
MonthYearDropdownOptions.prototype.render = function () {
|
|
var dropdownClass = clsx.clsx({
|
|
"react-datepicker__month-year-dropdown": true,
|
|
"react-datepicker__month-year-dropdown--scrollable": this.props.scrollableMonthYearDropdown,
|
|
});
|
|
return (React__default.default.createElement(ClickOutsideWrapper, { className: dropdownClass, onClickOutside: this.handleClickOutside }, this.renderOptions()));
|
|
};
|
|
return MonthYearDropdownOptions;
|
|
}(React.Component));
|
|
|
|
// Default range: 5 years before and after current date
|
|
var DEFAULT_YEAR_RANGE = 5;
|
|
var MonthYearDropdown = /** @class */ (function (_super) {
|
|
__extends(MonthYearDropdown, _super);
|
|
function MonthYearDropdown() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.state = {
|
|
dropdownVisible: false,
|
|
};
|
|
_this.renderSelectOptions = function () {
|
|
var _a, _b;
|
|
// Use defaults if minDate/maxDate not provided
|
|
var minDate = (_a = _this.props.minDate) !== null && _a !== void 0 ? _a : dateFns.subYears(_this.props.date, DEFAULT_YEAR_RANGE);
|
|
var maxDate = (_b = _this.props.maxDate) !== null && _b !== void 0 ? _b : dateFns.addYears(_this.props.date, DEFAULT_YEAR_RANGE);
|
|
var currDate = getStartOfMonth(minDate);
|
|
var lastDate = getStartOfMonth(maxDate);
|
|
var options = [];
|
|
while (!dateFns.isAfter(currDate, lastDate)) {
|
|
var timePoint = dateFns.getTime(currDate);
|
|
options.push(React__default.default.createElement("option", { key: timePoint, value: timePoint }, formatDate(currDate, _this.props.dateFormat, _this.props.locale)));
|
|
currDate = dateFns.addMonths(currDate, 1);
|
|
}
|
|
return options;
|
|
};
|
|
_this.onSelectChange = function (event) {
|
|
_this.onChange(parseInt(event.target.value));
|
|
};
|
|
_this.renderSelectMode = function () { return (React__default.default.createElement("select", { value: dateFns.getTime(getStartOfMonth(_this.props.date)), className: "react-datepicker__month-year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions())); };
|
|
_this.renderReadView = function (visible) {
|
|
var yearMonth = formatDate(_this.props.date, _this.props.dateFormat, _this.props.locale);
|
|
return (React__default.default.createElement("div", { key: "read", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__month-year-read-view", onClick: _this.toggleDropdown },
|
|
React__default.default.createElement("span", { className: "react-datepicker__month-year-read-view--down-arrow" }),
|
|
React__default.default.createElement("span", { className: "react-datepicker__month-year-read-view--selected-month-year" }, yearMonth)));
|
|
};
|
|
_this.renderDropdown = function () { return (React__default.default.createElement(MonthYearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }))); };
|
|
_this.renderScrollMode = function () {
|
|
var dropdownVisible = _this.state.dropdownVisible;
|
|
var result = [_this.renderReadView(!dropdownVisible)];
|
|
if (dropdownVisible) {
|
|
result.unshift(_this.renderDropdown());
|
|
}
|
|
return result;
|
|
};
|
|
_this.onChange = function (monthYearPoint) {
|
|
_this.toggleDropdown();
|
|
var changedDate = newDate(monthYearPoint);
|
|
if (isSameYear(_this.props.date, changedDate) &&
|
|
isSameMonth(_this.props.date, changedDate)) {
|
|
return;
|
|
}
|
|
_this.props.onChange(changedDate);
|
|
};
|
|
_this.toggleDropdown = function () {
|
|
return _this.setState({
|
|
dropdownVisible: !_this.state.dropdownVisible,
|
|
});
|
|
};
|
|
return _this;
|
|
}
|
|
MonthYearDropdown.prototype.render = function () {
|
|
var renderedDropdown;
|
|
switch (this.props.dropdownMode) {
|
|
case "scroll":
|
|
renderedDropdown = this.renderScrollMode();
|
|
break;
|
|
case "select":
|
|
renderedDropdown = this.renderSelectMode();
|
|
break;
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__month-year-dropdown-container react-datepicker__month-year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown));
|
|
};
|
|
return MonthYearDropdown;
|
|
}(React.Component));
|
|
|
|
var Time = /** @class */ (function (_super) {
|
|
__extends(Time, _super);
|
|
function Time() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.state = {
|
|
height: null,
|
|
};
|
|
_this.scrollToTheSelectedTime = function () {
|
|
requestAnimationFrame(function () {
|
|
var _a, _b, _c;
|
|
if (!_this.list)
|
|
return;
|
|
_this.list.scrollTop =
|
|
(_c = (_this.centerLi &&
|
|
Time.calcCenterPosition(_this.props.monthRef
|
|
? _this.props.monthRef.clientHeight -
|
|
((_b = (_a = _this.header) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0)
|
|
: _this.list.clientHeight, _this.centerLi))) !== null && _c !== void 0 ? _c : 0;
|
|
});
|
|
};
|
|
_this.handleClick = function (time) {
|
|
var _a, _b;
|
|
if (((_this.props.minTime || _this.props.maxTime) &&
|
|
isTimeInDisabledRange(time, _this.props)) ||
|
|
((_this.props.excludeTimes ||
|
|
_this.props.includeTimes ||
|
|
_this.props.filterTime) &&
|
|
isTimeDisabled(time, _this.props))) {
|
|
return;
|
|
}
|
|
(_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, time);
|
|
};
|
|
_this.isSelectedTime = function (time) {
|
|
var selected = safeToDate(_this.props.selected);
|
|
return selected && isSameMinute(selected, time);
|
|
};
|
|
_this.isDisabledTime = function (time) {
|
|
return ((_this.props.minTime || _this.props.maxTime) &&
|
|
isTimeInDisabledRange(time, _this.props)) ||
|
|
((_this.props.excludeTimes ||
|
|
_this.props.includeTimes ||
|
|
_this.props.filterTime) &&
|
|
isTimeDisabled(time, _this.props));
|
|
};
|
|
_this.liClasses = function (time) {
|
|
var _a;
|
|
var classes = [
|
|
"react-datepicker__time-list-item",
|
|
_this.props.timeClassName ? _this.props.timeClassName(time) : undefined,
|
|
];
|
|
if (_this.isSelectedTime(time)) {
|
|
classes.push("react-datepicker__time-list-item--selected");
|
|
}
|
|
if (_this.isDisabledTime(time)) {
|
|
classes.push("react-datepicker__time-list-item--disabled");
|
|
}
|
|
//convert this.props.intervals and the relevant time to seconds and check if it it's a clean multiple of the interval
|
|
if (_this.props.injectTimes &&
|
|
(dateFns.getHours(time) * 3600 + dateFns.getMinutes(time) * 60 + dateFns.getSeconds(time)) %
|
|
(((_a = _this.props.intervals) !== null && _a !== void 0 ? _a : Time.defaultProps.intervals) * 60) !==
|
|
0) {
|
|
classes.push("react-datepicker__time-list-item--injected");
|
|
}
|
|
return classes.join(" ");
|
|
};
|
|
_this.handleOnKeyDown = function (event, time) {
|
|
var _a, _b;
|
|
if (event.key === KeyType.Space) {
|
|
event.preventDefault();
|
|
event.key = KeyType.Enter;
|
|
}
|
|
if ((event.key === KeyType.ArrowUp || event.key === KeyType.ArrowLeft) &&
|
|
event.target instanceof HTMLElement &&
|
|
event.target.previousSibling) {
|
|
event.preventDefault();
|
|
event.target.previousSibling instanceof HTMLElement &&
|
|
event.target.previousSibling.focus();
|
|
}
|
|
if ((event.key === KeyType.ArrowDown || event.key === KeyType.ArrowRight) &&
|
|
event.target instanceof HTMLElement &&
|
|
event.target.nextSibling) {
|
|
event.preventDefault();
|
|
event.target.nextSibling instanceof HTMLElement &&
|
|
event.target.nextSibling.focus();
|
|
}
|
|
if (event.key === KeyType.Enter) {
|
|
_this.handleClick(time);
|
|
}
|
|
(_b = (_a = _this.props).handleOnKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
};
|
|
_this.renderTimes = function () {
|
|
var _a;
|
|
var times = [];
|
|
var format = typeof _this.props.format === "string" ? _this.props.format : "p";
|
|
var intervals = (_a = _this.props.intervals) !== null && _a !== void 0 ? _a : Time.defaultProps.intervals;
|
|
var activeDate = safeToDate(_this.props.selected) ||
|
|
safeToDate(_this.props.openToDate) ||
|
|
newDate();
|
|
var base = getStartOfDay(activeDate);
|
|
var sortedInjectTimes = _this.props.injectTimes &&
|
|
_this.props.injectTimes.sort(function (a, b) {
|
|
return a.getTime() - b.getTime();
|
|
});
|
|
var minutesInDay = 60 * getHoursInDay(activeDate);
|
|
var multiplier = minutesInDay / intervals;
|
|
for (var i = 0; i < multiplier; i++) {
|
|
var currentTime = dateFns.addMinutes(base, i * intervals);
|
|
times.push(currentTime);
|
|
if (sortedInjectTimes) {
|
|
var timesToInject = timesToInjectAfter(base, currentTime, i, intervals, sortedInjectTimes);
|
|
times = times.concat(timesToInject);
|
|
}
|
|
}
|
|
// Determine which time to focus and scroll into view when component mounts
|
|
var timeToFocus = times.reduce(function (prev, time) {
|
|
if (time.getTime() <= activeDate.getTime()) {
|
|
return time;
|
|
}
|
|
return prev;
|
|
}, times[0]);
|
|
return times.map(function (time) {
|
|
return (React__default.default.createElement("li", { key: time.valueOf(), onClick: _this.handleClick.bind(_this, time), className: _this.liClasses(time), ref: function (li) {
|
|
if (time === timeToFocus) {
|
|
_this.centerLi = li;
|
|
}
|
|
}, onKeyDown: function (event) {
|
|
_this.handleOnKeyDown(event, time);
|
|
}, tabIndex: time === timeToFocus ? 0 : -1, role: "option", "aria-selected": _this.isSelectedTime(time) ? "true" : undefined, "aria-disabled": _this.isDisabledTime(time) ? "true" : undefined }, formatDate(time, format, _this.props.locale)));
|
|
});
|
|
};
|
|
_this.renderTimeCaption = function () {
|
|
if (_this.props.showTimeCaption === false) {
|
|
return React__default.default.createElement(React__default.default.Fragment, null);
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__header react-datepicker__header--time ".concat(_this.props.showTimeSelectOnly
|
|
? "react-datepicker__header--time--only"
|
|
: ""), ref: function (header) {
|
|
_this.header = header;
|
|
} },
|
|
React__default.default.createElement("div", { className: "react-datepicker-time__header" }, _this.props.timeCaption)));
|
|
};
|
|
return _this;
|
|
}
|
|
Object.defineProperty(Time, "defaultProps", {
|
|
get: function () {
|
|
return {
|
|
intervals: 30,
|
|
todayButton: null,
|
|
timeCaption: "Time",
|
|
showTimeCaption: true,
|
|
};
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Time.prototype.componentDidMount = function () {
|
|
// code to ensure selected time will always be in focus within time window when it first appears
|
|
this.scrollToTheSelectedTime();
|
|
this.observeDatePickerHeightChanges();
|
|
};
|
|
Time.prototype.componentWillUnmount = function () {
|
|
var _a;
|
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
};
|
|
Time.prototype.observeDatePickerHeightChanges = function () {
|
|
var _this = this;
|
|
var monthRef = this.props.monthRef;
|
|
this.updateContainerHeight();
|
|
if (monthRef) {
|
|
this.resizeObserver = new ResizeObserver(function () {
|
|
_this.updateContainerHeight();
|
|
});
|
|
this.resizeObserver.observe(monthRef);
|
|
}
|
|
};
|
|
Time.prototype.updateContainerHeight = function () {
|
|
if (this.props.monthRef && this.header) {
|
|
var newHeight = this.props.monthRef.clientHeight - this.header.clientHeight;
|
|
// Only update state if height actually changed to prevent infinite resize loops
|
|
if (this.state.height !== newHeight) {
|
|
this.setState({
|
|
height: newHeight,
|
|
});
|
|
}
|
|
}
|
|
};
|
|
Time.prototype.render = function () {
|
|
var _this = this;
|
|
var _a;
|
|
var height = this.state.height;
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__time-container ".concat(((_a = this.props.todayButton) !== null && _a !== void 0 ? _a : Time.defaultProps.todayButton)
|
|
? "react-datepicker__time-container--with-today-button"
|
|
: "") },
|
|
this.renderTimeCaption(),
|
|
React__default.default.createElement("div", { className: "react-datepicker__time" },
|
|
React__default.default.createElement("div", { className: "react-datepicker__time-box" },
|
|
React__default.default.createElement("ul", { className: "react-datepicker__time-list", ref: function (list) {
|
|
_this.list = list;
|
|
}, style: height ? { height: height } : {}, role: "listbox", "aria-label": this.props.timeCaption }, this.renderTimes())))));
|
|
};
|
|
Time.calcCenterPosition = function (listHeight, centerLiRef) {
|
|
return (centerLiRef.offsetTop - (listHeight / 2 - centerLiRef.clientHeight / 2));
|
|
};
|
|
return Time;
|
|
}(React.Component));
|
|
|
|
var VERTICAL_NAVIGATION_OFFSET = 3;
|
|
/**
|
|
* `Year` is a component that represents a year in a date picker.
|
|
*
|
|
* @class
|
|
* @param {YearProps} props - The properties that define the `Year` component.
|
|
* @property {VoidFunction} [props.clearSelectingDate] - Function to clear the selected date.
|
|
* @property {Date} [props.date] - The currently selected date.
|
|
* @property {boolean} [props.disabledKeyboardNavigation] - If true, keyboard navigation is disabled.
|
|
* @property {Date} [props.endDate] - The end date in a range selection.
|
|
* @property {(date: Date) => void} props.onDayClick - Function to handle day click events.
|
|
* @property {Date} props.preSelection - The date that is currently in focus.
|
|
* @property {(date: Date) => void} props.setPreSelection - Function to set the pre-selected date.
|
|
* @property {{ [key: string]: any }} props.selected - The selected date(s).
|
|
* @property {boolean} props.inline - If true, the date picker is displayed inline.
|
|
* @property {Date} props.maxDate - The maximum selectable date.
|
|
* @property {Date} props.minDate - The minimum selectable date.
|
|
* @property {boolean} props.usePointerEvent - If true, pointer events are used instead of mouse events.
|
|
* @property {(date: Date) => void} props.onYearMouseEnter - Function to handle mouse enter events on a year.
|
|
* @property {(date: Date) => void} props.onYearMouseLeave - Function to handle mouse leave events on a year.
|
|
*/
|
|
var Year = /** @class */ (function (_super) {
|
|
__extends(Year, _super);
|
|
function Year(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this.YEAR_REFS = __spreadArray([], Array(_this.props.yearItemNumber), true).map(function () {
|
|
return React.createRef();
|
|
});
|
|
_this.isDisabled = function (date) {
|
|
return isDayDisabled(date, {
|
|
minDate: _this.props.minDate,
|
|
maxDate: _this.props.maxDate,
|
|
excludeDates: _this.props.excludeDates,
|
|
includeDates: _this.props.includeDates,
|
|
filterDate: _this.props.filterDate,
|
|
});
|
|
};
|
|
_this.isExcluded = function (date) {
|
|
return isDayExcluded(date, {
|
|
excludeDates: _this.props.excludeDates,
|
|
});
|
|
};
|
|
_this.selectingDate = function () { var _a; return (_a = _this.props.selectingDate) !== null && _a !== void 0 ? _a : _this.props.preSelection; };
|
|
_this.updateFocusOnPaginate = function (refIndex) {
|
|
var waitForReRender = function () {
|
|
var _a, _b;
|
|
(_b = (_a = _this.YEAR_REFS[refIndex]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
};
|
|
window.requestAnimationFrame(waitForReRender);
|
|
};
|
|
_this.handleYearClick = function (day, event) {
|
|
if (_this.props.onDayClick) {
|
|
_this.props.onDayClick(day, event);
|
|
}
|
|
};
|
|
_this.handleYearNavigation = function (newYear, newDate) {
|
|
var _a, _b, _c, _d;
|
|
var _e = _this.props, date = _e.date, yearItemNumber = _e.yearItemNumber;
|
|
if (date === undefined || yearItemNumber === undefined) {
|
|
return;
|
|
}
|
|
var startPeriod = getYearsPeriod(date, yearItemNumber).startPeriod;
|
|
if (_this.isDisabled(newDate) || _this.isExcluded(newDate)) {
|
|
return;
|
|
}
|
|
(_b = (_a = _this.props).setPreSelection) === null || _b === void 0 ? void 0 : _b.call(_a, newDate);
|
|
if (newYear - startPeriod < 0) {
|
|
_this.updateFocusOnPaginate(yearItemNumber - (startPeriod - newYear));
|
|
}
|
|
else if (newYear - startPeriod >= yearItemNumber) {
|
|
_this.updateFocusOnPaginate(Math.abs(yearItemNumber - (newYear - startPeriod)));
|
|
}
|
|
else
|
|
(_d = (_c = _this.YEAR_REFS[newYear - startPeriod]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.focus();
|
|
};
|
|
_this.isSameDay = function (y, other) { return isSameDay(y, other); };
|
|
_this.isCurrentYear = function (y) { return y === dateFns.getYear(newDate()); };
|
|
_this.isRangeStart = function (y) {
|
|
return _this.props.startDate &&
|
|
_this.props.endDate &&
|
|
isSameYear(dateFns.setYear(newDate(), y), _this.props.startDate);
|
|
};
|
|
_this.isRangeEnd = function (y) {
|
|
return _this.props.startDate &&
|
|
_this.props.endDate &&
|
|
isSameYear(dateFns.setYear(newDate(), y), _this.props.endDate);
|
|
};
|
|
_this.isInRange = function (y) {
|
|
return isYearInRange(y, _this.props.startDate, _this.props.endDate);
|
|
};
|
|
_this.isInSelectingRange = function (y) {
|
|
var _a = _this.props, selectsStart = _a.selectsStart, selectsEnd = _a.selectsEnd, selectsRange = _a.selectsRange, startDate = _a.startDate, endDate = _a.endDate;
|
|
if (!(selectsStart || selectsEnd || selectsRange) ||
|
|
!_this.selectingDate()) {
|
|
return false;
|
|
}
|
|
if (selectsStart && endDate) {
|
|
return isYearInRange(y, _this.selectingDate(), endDate);
|
|
}
|
|
if (selectsEnd && startDate) {
|
|
return isYearInRange(y, startDate, _this.selectingDate());
|
|
}
|
|
if (selectsRange && startDate && !endDate) {
|
|
return isYearInRange(y, startDate, _this.selectingDate());
|
|
}
|
|
return false;
|
|
};
|
|
_this.isSelectingRangeStart = function (y) {
|
|
var _a;
|
|
if (!_this.isInSelectingRange(y)) {
|
|
return false;
|
|
}
|
|
var _b = _this.props, startDate = _b.startDate, selectsStart = _b.selectsStart;
|
|
var _year = dateFns.setYear(newDate(), y);
|
|
if (selectsStart) {
|
|
return isSameYear(_year, (_a = _this.selectingDate()) !== null && _a !== void 0 ? _a : null);
|
|
}
|
|
return isSameYear(_year, startDate !== null && startDate !== void 0 ? startDate : null);
|
|
};
|
|
_this.isSelectingRangeEnd = function (y) {
|
|
var _a;
|
|
if (!_this.isInSelectingRange(y)) {
|
|
return false;
|
|
}
|
|
var _b = _this.props, endDate = _b.endDate, selectsEnd = _b.selectsEnd, selectsRange = _b.selectsRange;
|
|
var _year = dateFns.setYear(newDate(), y);
|
|
if (selectsEnd || selectsRange) {
|
|
return isSameYear(_year, (_a = _this.selectingDate()) !== null && _a !== void 0 ? _a : null);
|
|
}
|
|
return isSameYear(_year, endDate !== null && endDate !== void 0 ? endDate : null);
|
|
};
|
|
_this.isKeyboardSelected = function (y) {
|
|
if (_this.props.disabledKeyboardNavigation ||
|
|
_this.props.date === undefined ||
|
|
_this.props.preSelection == null) {
|
|
return;
|
|
}
|
|
var _a = _this.props, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, filterDate = _a.filterDate, selected = _a.selected;
|
|
var date = getStartOfYear(dateFns.setYear(_this.props.date, y));
|
|
var isDisabled = (minDate || maxDate || excludeDates || includeDates || filterDate) &&
|
|
isYearDisabled(y, _this.props);
|
|
var isSelectedDay = !!selected && isSameDay(date, getStartOfYear(selected));
|
|
var isKeyboardSelectedDay = isSameDay(date, getStartOfYear(_this.props.preSelection));
|
|
return (!_this.props.inline &&
|
|
!isSelectedDay &&
|
|
isKeyboardSelectedDay &&
|
|
!isDisabled);
|
|
};
|
|
_this.isSelectedYear = function (year) {
|
|
var _a = _this.props, selectsMultiple = _a.selectsMultiple, selected = _a.selected, selectedDates = _a.selectedDates;
|
|
if (selectsMultiple) {
|
|
return selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.some(function (date) { return year === dateFns.getYear(date); });
|
|
}
|
|
return !!selected && year === dateFns.getYear(selected);
|
|
};
|
|
_this.onYearClick = function (event, y) {
|
|
var date = _this.props.date;
|
|
if (date === undefined) {
|
|
return;
|
|
}
|
|
_this.handleYearClick(getStartOfYear(dateFns.setYear(date, y)), event);
|
|
};
|
|
_this.onYearKeyDown = function (event, y) {
|
|
var _a, _b;
|
|
var key = event.key;
|
|
var _c = _this.props, date = _c.date, yearItemNumber = _c.yearItemNumber, handleOnKeyDown = _c.handleOnKeyDown;
|
|
if (key !== KeyType.Tab) {
|
|
// preventDefault on tab event blocks focus change
|
|
event.preventDefault();
|
|
}
|
|
if (!_this.props.disabledKeyboardNavigation) {
|
|
switch (key) {
|
|
case KeyType.Enter:
|
|
if (_this.props.selected == null) {
|
|
break;
|
|
}
|
|
_this.onYearClick(event, y);
|
|
(_b = (_a = _this.props).setPreSelection) === null || _b === void 0 ? void 0 : _b.call(_a, _this.props.selected);
|
|
break;
|
|
case KeyType.ArrowRight:
|
|
if (_this.props.preSelection == null) {
|
|
break;
|
|
}
|
|
_this.handleYearNavigation(y + 1, dateFns.addYears(_this.props.preSelection, 1));
|
|
break;
|
|
case KeyType.ArrowLeft:
|
|
if (_this.props.preSelection == null) {
|
|
break;
|
|
}
|
|
_this.handleYearNavigation(y - 1, dateFns.subYears(_this.props.preSelection, 1));
|
|
break;
|
|
case KeyType.ArrowUp: {
|
|
if (date === undefined ||
|
|
yearItemNumber === undefined ||
|
|
_this.props.preSelection == null) {
|
|
break;
|
|
}
|
|
var startPeriod = getYearsPeriod(date, yearItemNumber).startPeriod;
|
|
var offset = VERTICAL_NAVIGATION_OFFSET;
|
|
var newYear = y - offset;
|
|
if (newYear < startPeriod) {
|
|
var leftOverOffset = yearItemNumber % offset;
|
|
if (y >= startPeriod && y < startPeriod + leftOverOffset) {
|
|
offset = leftOverOffset;
|
|
}
|
|
else {
|
|
offset += leftOverOffset;
|
|
}
|
|
newYear = y - offset;
|
|
}
|
|
_this.handleYearNavigation(newYear, dateFns.subYears(_this.props.preSelection, offset));
|
|
break;
|
|
}
|
|
case KeyType.ArrowDown: {
|
|
if (date === undefined ||
|
|
yearItemNumber === undefined ||
|
|
_this.props.preSelection == null) {
|
|
break;
|
|
}
|
|
var endPeriod = getYearsPeriod(date, yearItemNumber).endPeriod;
|
|
var offset = VERTICAL_NAVIGATION_OFFSET;
|
|
var newYear = y + offset;
|
|
if (newYear > endPeriod) {
|
|
var leftOverOffset = yearItemNumber % offset;
|
|
if (y <= endPeriod && y > endPeriod - leftOverOffset) {
|
|
offset = leftOverOffset;
|
|
}
|
|
else {
|
|
offset += leftOverOffset;
|
|
}
|
|
newYear = y + offset;
|
|
}
|
|
_this.handleYearNavigation(newYear, dateFns.addYears(_this.props.preSelection, offset));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
handleOnKeyDown && handleOnKeyDown(event);
|
|
};
|
|
_this.getYearClassNames = function (y) {
|
|
var _a = _this.props, date = _a.date, disabled = _a.disabled, minDate = _a.minDate, maxDate = _a.maxDate, excludeDates = _a.excludeDates, includeDates = _a.includeDates, filterDate = _a.filterDate, yearClassName = _a.yearClassName;
|
|
return clsx.clsx("react-datepicker__year-text", "react-datepicker__year-".concat(y), date ? yearClassName === null || yearClassName === void 0 ? void 0 : yearClassName(dateFns.setYear(date, y)) : undefined, {
|
|
"react-datepicker__year-text--selected": _this.isSelectedYear(y),
|
|
"react-datepicker__year-text--disabled": (minDate ||
|
|
maxDate ||
|
|
excludeDates ||
|
|
includeDates ||
|
|
filterDate ||
|
|
disabled) &&
|
|
isYearDisabled(y, _this.props),
|
|
"react-datepicker__year-text--keyboard-selected": _this.isKeyboardSelected(y),
|
|
"react-datepicker__year-text--range-start": _this.isRangeStart(y),
|
|
"react-datepicker__year-text--range-end": _this.isRangeEnd(y),
|
|
"react-datepicker__year-text--in-range": _this.isInRange(y),
|
|
"react-datepicker__year-text--in-selecting-range": _this.isInSelectingRange(y),
|
|
"react-datepicker__year-text--selecting-range-start": _this.isSelectingRangeStart(y),
|
|
"react-datepicker__year-text--selecting-range-end": _this.isSelectingRangeEnd(y),
|
|
"react-datepicker__year-text--today": _this.isCurrentYear(y),
|
|
});
|
|
};
|
|
_this.getYearTabIndex = function (y) {
|
|
if (_this.props.disabledKeyboardNavigation ||
|
|
_this.props.preSelection == null) {
|
|
return "-1";
|
|
}
|
|
var preSelected = dateFns.getYear(_this.props.preSelection);
|
|
var isPreSelectedYearDisabled = isYearDisabled(y, _this.props);
|
|
return y === preSelected && !isPreSelectedYearDisabled ? "0" : "-1";
|
|
};
|
|
_this.getYearContent = function (y) {
|
|
return _this.props.renderYearContent ? _this.props.renderYearContent(y) : y;
|
|
};
|
|
return _this;
|
|
}
|
|
Year.prototype.render = function () {
|
|
var _this = this;
|
|
var yearsList = [];
|
|
var _a = this.props, date = _a.date, yearItemNumber = _a.yearItemNumber, onYearMouseEnter = _a.onYearMouseEnter, onYearMouseLeave = _a.onYearMouseLeave;
|
|
if (date === undefined) {
|
|
return null;
|
|
}
|
|
var _b = getYearsPeriod(date, yearItemNumber), startPeriod = _b.startPeriod, endPeriod = _b.endPeriod;
|
|
var _loop_1 = function (y) {
|
|
yearsList.push(React__default.default.createElement("div", { ref: this_1.YEAR_REFS[y - startPeriod], onClick: function (event) {
|
|
_this.onYearClick(event, y);
|
|
}, onKeyDown: function (event) {
|
|
if (isSpaceKeyDown(event)) {
|
|
event.preventDefault();
|
|
event.key = KeyType.Enter;
|
|
}
|
|
_this.onYearKeyDown(event, y);
|
|
}, tabIndex: Number(this_1.getYearTabIndex(y)), className: this_1.getYearClassNames(y), onMouseEnter: !this_1.props.usePointerEvent
|
|
? function (event) { return onYearMouseEnter(event, y); }
|
|
: undefined, onPointerEnter: this_1.props.usePointerEvent
|
|
? function (event) { return onYearMouseEnter(event, y); }
|
|
: undefined, onMouseLeave: !this_1.props.usePointerEvent
|
|
? function (event) { return onYearMouseLeave(event, y); }
|
|
: undefined, onPointerLeave: this_1.props.usePointerEvent
|
|
? function (event) { return onYearMouseLeave(event, y); }
|
|
: undefined, key: y, "aria-current": this_1.isCurrentYear(y) ? "date" : undefined }, this_1.getYearContent(y)));
|
|
};
|
|
var this_1 = this;
|
|
for (var y = startPeriod; y <= endPeriod; y++) {
|
|
_loop_1(y);
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__year" },
|
|
React__default.default.createElement("div", { className: "react-datepicker__year-wrapper", onMouseLeave: !this.props.usePointerEvent
|
|
? this.props.clearSelectingDate
|
|
: undefined, onPointerLeave: this.props.usePointerEvent
|
|
? this.props.clearSelectingDate
|
|
: undefined }, yearsList)));
|
|
};
|
|
return Year;
|
|
}(React.Component));
|
|
|
|
function generateYears(year, noOfYear, minDate, maxDate) {
|
|
var list = [];
|
|
for (var i = 0; i < 2 * noOfYear + 1; i++) {
|
|
var newYear = year + noOfYear - i;
|
|
var isInRange = true;
|
|
if (minDate) {
|
|
isInRange = dateFns.getYear(minDate) <= newYear;
|
|
}
|
|
if (maxDate && isInRange) {
|
|
isInRange = dateFns.getYear(maxDate) >= newYear;
|
|
}
|
|
if (isInRange) {
|
|
list.push(newYear);
|
|
}
|
|
}
|
|
return list;
|
|
}
|
|
var YearDropdownOptions = /** @class */ (function (_super) {
|
|
__extends(YearDropdownOptions, _super);
|
|
function YearDropdownOptions(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this.yearOptionButtonsRef = {};
|
|
_this.handleOptionKeyDown = function (year, e) {
|
|
var _a;
|
|
switch (e.key) {
|
|
case "Enter":
|
|
e.preventDefault();
|
|
_this.onChange(year);
|
|
break;
|
|
case "Escape":
|
|
e.preventDefault();
|
|
_this.props.onCancel();
|
|
break;
|
|
case "ArrowUp":
|
|
case "ArrowDown": {
|
|
e.preventDefault();
|
|
var newYear = year + (e.key === "ArrowUp" ? 1 : -1);
|
|
// Add bounds checking to ensure the year exists in our refs
|
|
if (_this.yearOptionButtonsRef[newYear]) {
|
|
(_a = _this.yearOptionButtonsRef[newYear]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
_this.renderOptions = function () {
|
|
// Clear refs to prevent memory leaks on re-render
|
|
_this.yearOptionButtonsRef = {};
|
|
var selectedYear = _this.props.year;
|
|
var options = _this.state.yearsList.map(function (year) { return (React__default.default.createElement("div", { ref: function (el) {
|
|
_this.yearOptionButtonsRef[year] = el;
|
|
if (year === selectedYear) {
|
|
el === null || el === void 0 ? void 0 : el.focus();
|
|
}
|
|
}, role: "button", tabIndex: 0, className: selectedYear === year
|
|
? "react-datepicker__year-option react-datepicker__year-option--selected_year"
|
|
: "react-datepicker__year-option", key: year, onClick: _this.onChange.bind(_this, year), onKeyDown: _this.handleOptionKeyDown.bind(_this, year), "aria-selected": selectedYear === year ? "true" : undefined },
|
|
selectedYear === year ? (React__default.default.createElement("span", { className: "react-datepicker__year-option--selected" }, "\u2713")) : (""),
|
|
year)); });
|
|
var minYear = _this.props.minDate ? dateFns.getYear(_this.props.minDate) : null;
|
|
var maxYear = _this.props.maxDate ? dateFns.getYear(_this.props.maxDate) : null;
|
|
if (!maxYear || !_this.state.yearsList.find(function (year) { return year === maxYear; })) {
|
|
options.unshift(React__default.default.createElement("div", { className: "react-datepicker__year-option", key: "upcoming", onClick: _this.incrementYears },
|
|
React__default.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-upcoming" })));
|
|
}
|
|
if (!minYear || !_this.state.yearsList.find(function (year) { return year === minYear; })) {
|
|
options.push(React__default.default.createElement("div", { className: "react-datepicker__year-option", key: "previous", onClick: _this.decrementYears },
|
|
React__default.default.createElement("a", { className: "react-datepicker__navigation react-datepicker__navigation--years react-datepicker__navigation--years-previous" })));
|
|
}
|
|
return options;
|
|
};
|
|
_this.onChange = function (year) {
|
|
_this.props.onChange(year);
|
|
};
|
|
_this.handleClickOutside = function () {
|
|
_this.props.onCancel();
|
|
};
|
|
_this.shiftYears = function (amount) {
|
|
var years = _this.state.yearsList.map(function (year) {
|
|
return year + amount;
|
|
});
|
|
_this.setState({
|
|
yearsList: years,
|
|
});
|
|
};
|
|
_this.incrementYears = function () {
|
|
return _this.shiftYears(1);
|
|
};
|
|
_this.decrementYears = function () {
|
|
return _this.shiftYears(-1);
|
|
};
|
|
var yearDropdownItemNumber = props.yearDropdownItemNumber, scrollableYearDropdown = props.scrollableYearDropdown;
|
|
var noOfYear = yearDropdownItemNumber || (scrollableYearDropdown ? 10 : 5);
|
|
_this.state = {
|
|
yearsList: generateYears(_this.props.year, noOfYear, _this.props.minDate, _this.props.maxDate),
|
|
};
|
|
_this.dropdownRef = React.createRef();
|
|
return _this;
|
|
}
|
|
YearDropdownOptions.prototype.componentDidMount = function () {
|
|
var dropdownCurrent = this.dropdownRef.current;
|
|
if (dropdownCurrent) {
|
|
// Get array from HTMLCollection
|
|
var dropdownCurrentChildren = dropdownCurrent.children
|
|
? Array.from(dropdownCurrent.children)
|
|
: null;
|
|
var selectedYearOptionEl = dropdownCurrentChildren
|
|
? dropdownCurrentChildren.find(function (childEl) { return childEl.ariaSelected; })
|
|
: null;
|
|
dropdownCurrent.scrollTop =
|
|
selectedYearOptionEl && selectedYearOptionEl instanceof HTMLElement
|
|
? selectedYearOptionEl.offsetTop +
|
|
(selectedYearOptionEl.clientHeight - dropdownCurrent.clientHeight) /
|
|
2
|
|
: (dropdownCurrent.scrollHeight - dropdownCurrent.clientHeight) / 2;
|
|
}
|
|
};
|
|
YearDropdownOptions.prototype.render = function () {
|
|
var dropdownClass = clsx.clsx({
|
|
"react-datepicker__year-dropdown": true,
|
|
"react-datepicker__year-dropdown--scrollable": this.props.scrollableYearDropdown,
|
|
});
|
|
return (React__default.default.createElement(ClickOutsideWrapper, { className: dropdownClass, containerRef: this.dropdownRef, onClickOutside: this.handleClickOutside }, this.renderOptions()));
|
|
};
|
|
return YearDropdownOptions;
|
|
}(React.Component));
|
|
|
|
var YearDropdown = /** @class */ (function (_super) {
|
|
__extends(YearDropdown, _super);
|
|
function YearDropdown() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.state = {
|
|
dropdownVisible: false,
|
|
};
|
|
_this.renderSelectOptions = function () {
|
|
var minYear = _this.props.minDate
|
|
? dateFns.getYear(_this.props.minDate)
|
|
: 1900;
|
|
var maxYear = _this.props.maxDate
|
|
? dateFns.getYear(_this.props.maxDate)
|
|
: 2100;
|
|
var options = [];
|
|
for (var i = minYear; i <= maxYear; i++) {
|
|
options.push(React__default.default.createElement("option", { key: i, value: i }, i));
|
|
}
|
|
return options;
|
|
};
|
|
_this.onSelectChange = function (event) {
|
|
_this.onChange(parseInt(event.target.value));
|
|
};
|
|
_this.renderSelectMode = function () { return (React__default.default.createElement("select", { value: _this.props.year, className: "react-datepicker__year-select", onChange: _this.onSelectChange }, _this.renderSelectOptions())); };
|
|
_this.renderReadView = function (visible) { return (React__default.default.createElement("button", { key: "read", type: "button", style: { visibility: visible ? "visible" : "hidden" }, className: "react-datepicker__year-read-view", onClick: _this.toggleDropdown },
|
|
React__default.default.createElement("span", { className: "react-datepicker__year-read-view--down-arrow" }),
|
|
React__default.default.createElement("span", { className: "react-datepicker__year-read-view--selected-year" }, _this.props.year))); };
|
|
_this.renderDropdown = function () { return (React__default.default.createElement(YearDropdownOptions, _assign({ key: "dropdown" }, _this.props, { onChange: _this.onChange, onCancel: _this.toggleDropdown }))); };
|
|
_this.renderScrollMode = function () {
|
|
var dropdownVisible = _this.state.dropdownVisible;
|
|
var result = [_this.renderReadView(!dropdownVisible)];
|
|
if (dropdownVisible) {
|
|
result.unshift(_this.renderDropdown());
|
|
}
|
|
return result;
|
|
};
|
|
_this.onChange = function (year) {
|
|
_this.toggleDropdown();
|
|
if (year === _this.props.year)
|
|
return;
|
|
_this.props.onChange(year);
|
|
};
|
|
_this.toggleDropdown = function (event) {
|
|
_this.setState({
|
|
dropdownVisible: !_this.state.dropdownVisible,
|
|
}, function () {
|
|
if (_this.props.adjustDateOnChange) {
|
|
_this.handleYearChange(_this.props.date, event);
|
|
}
|
|
});
|
|
};
|
|
_this.handleYearChange = function (date, event) {
|
|
var _a;
|
|
(_a = _this.onSelect) === null || _a === void 0 ? void 0 : _a.call(_this, date, event);
|
|
_this.setOpen();
|
|
};
|
|
_this.onSelect = function (date, event) {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, date, event);
|
|
};
|
|
_this.setOpen = function () {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).setOpen) === null || _b === void 0 ? void 0 : _b.call(_a, true);
|
|
};
|
|
return _this;
|
|
}
|
|
YearDropdown.prototype.render = function () {
|
|
var renderedDropdown;
|
|
switch (this.props.dropdownMode) {
|
|
case "scroll":
|
|
renderedDropdown = this.renderScrollMode();
|
|
break;
|
|
case "select":
|
|
renderedDropdown = this.renderSelectMode();
|
|
break;
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--".concat(this.props.dropdownMode) }, renderedDropdown));
|
|
};
|
|
return YearDropdown;
|
|
}(React.Component));
|
|
|
|
var DROPDOWN_FOCUS_CLASSNAMES = [
|
|
"react-datepicker__year-select",
|
|
"react-datepicker__month-select",
|
|
"react-datepicker__month-year-select",
|
|
];
|
|
var OUTSIDE_CLICK_IGNORE_CLASS = "react-datepicker-ignore-onclickoutside";
|
|
var isDropdownSelect = function (element) {
|
|
var classNames = (element.className || "").split(/\s+/);
|
|
return DROPDOWN_FOCUS_CLASSNAMES.some(function (testClassname) { return classNames.indexOf(testClassname) >= 0; });
|
|
};
|
|
var Calendar = /** @class */ (function (_super) {
|
|
__extends(Calendar, _super);
|
|
function Calendar(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this.monthContainer = undefined;
|
|
_this.handleClickOutside = function (event) {
|
|
_this.props.onClickOutside(event);
|
|
};
|
|
_this.setClickOutsideRef = function () {
|
|
return _this.containerRef.current;
|
|
};
|
|
_this.handleDropdownFocus = function (event) {
|
|
var _a, _b;
|
|
if (isDropdownSelect(event.target)) {
|
|
(_b = (_a = _this.props).onDropdownFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
}
|
|
};
|
|
_this.getDateInView = function () {
|
|
var _a = _this.props, preSelection = _a.preSelection, selected = _a.selected, openToDate = _a.openToDate;
|
|
var minDate = getEffectiveMinDate(_this.props);
|
|
var maxDate = getEffectiveMaxDate(_this.props);
|
|
var current = newDate();
|
|
var initialDate = openToDate || selected || preSelection;
|
|
if (initialDate) {
|
|
return initialDate;
|
|
}
|
|
else {
|
|
if (minDate && dateFns.isBefore(current, minDate)) {
|
|
return minDate;
|
|
}
|
|
else if (maxDate && dateFns.isAfter(current, maxDate)) {
|
|
return maxDate;
|
|
}
|
|
}
|
|
return current;
|
|
};
|
|
_this.increaseMonth = function () {
|
|
_this.setState(function (_a) {
|
|
var date = _a.date;
|
|
return ({
|
|
date: dateFns.addMonths(date, 1),
|
|
});
|
|
}, function () { return _this.handleMonthChange(_this.state.date); });
|
|
};
|
|
_this.decreaseMonth = function () {
|
|
_this.setState(function (_a) {
|
|
var date = _a.date;
|
|
return ({
|
|
date: dateFns.subMonths(date, 1),
|
|
});
|
|
}, function () { return _this.handleMonthChange(_this.state.date); });
|
|
};
|
|
_this.handleDayClick = function (day, event, monthSelectedIn) {
|
|
_this.props.onSelect(day, event, monthSelectedIn);
|
|
_this.props.setPreSelection && _this.props.setPreSelection(day);
|
|
};
|
|
_this.handleDayMouseEnter = function (day) {
|
|
_this.setState({ selectingDate: day });
|
|
_this.props.onDayMouseEnter && _this.props.onDayMouseEnter(day);
|
|
};
|
|
_this.handleMonthMouseLeave = function () {
|
|
_this.setState({ selectingDate: undefined });
|
|
_this.props.onMonthMouseLeave && _this.props.onMonthMouseLeave();
|
|
};
|
|
_this.handleYearMouseEnter = function (event, year) {
|
|
_this.setState({ selectingDate: dateFns.setYear(newDate(), year) });
|
|
!!_this.props.onYearMouseEnter && _this.props.onYearMouseEnter(event, year);
|
|
};
|
|
_this.handleYearMouseLeave = function (event, year) {
|
|
!!_this.props.onYearMouseLeave && _this.props.onYearMouseLeave(event, year);
|
|
};
|
|
_this.handleYearChange = function (date) {
|
|
var _a, _b, _c, _d;
|
|
(_b = (_a = _this.props).onYearChange) === null || _b === void 0 ? void 0 : _b.call(_a, date);
|
|
_this.setState({ isRenderAriaLiveMessage: true });
|
|
if (_this.props.adjustDateOnChange) {
|
|
_this.props.onSelect(date);
|
|
(_d = (_c = _this.props).setOpen) === null || _d === void 0 ? void 0 : _d.call(_c, true);
|
|
}
|
|
_this.props.setPreSelection && _this.props.setPreSelection(date);
|
|
};
|
|
_this.getEnabledPreSelectionDateForMonth = function (date) {
|
|
if (!isDayDisabled(date, _this.props)) {
|
|
return date;
|
|
}
|
|
var startOfMonth = getStartOfMonth(date);
|
|
var endOfMonth = getEndOfMonth(date);
|
|
var totalDays = dateFns.differenceInDays(endOfMonth, startOfMonth);
|
|
var preSelectedDate = null;
|
|
for (var dayIdx = 0; dayIdx <= totalDays; dayIdx++) {
|
|
var processingDate = dateFns.addDays(startOfMonth, dayIdx);
|
|
if (!isDayDisabled(processingDate, _this.props)) {
|
|
preSelectedDate = processingDate;
|
|
break;
|
|
}
|
|
}
|
|
return preSelectedDate;
|
|
};
|
|
_this.handleMonthChange = function (date) {
|
|
var _a, _b, _c;
|
|
var enabledPreSelectionDate = (_a = _this.getEnabledPreSelectionDateForMonth(date)) !== null && _a !== void 0 ? _a : date;
|
|
_this.handleCustomMonthChange(enabledPreSelectionDate);
|
|
if (_this.props.adjustDateOnChange) {
|
|
_this.props.onSelect(enabledPreSelectionDate);
|
|
(_c = (_b = _this.props).setOpen) === null || _c === void 0 ? void 0 : _c.call(_b, true);
|
|
}
|
|
_this.props.setPreSelection &&
|
|
_this.props.setPreSelection(enabledPreSelectionDate);
|
|
};
|
|
_this.handleCustomMonthChange = function (date) {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, date);
|
|
_this.setState({ isRenderAriaLiveMessage: true });
|
|
};
|
|
_this.handleMonthYearChange = function (date) {
|
|
_this.handleYearChange(date);
|
|
_this.handleMonthChange(date);
|
|
};
|
|
_this.changeYear = function (year) {
|
|
_this.setState(function (_a) {
|
|
var date = _a.date;
|
|
return ({
|
|
date: dateFns.setYear(date, Number(year)),
|
|
});
|
|
}, function () { return _this.handleYearChange(_this.state.date); });
|
|
};
|
|
_this.changeMonth = function (month) {
|
|
_this.setState(function (_a) {
|
|
var date = _a.date;
|
|
return ({
|
|
date: dateFns.setMonth(date, Number(month)),
|
|
});
|
|
}, function () {
|
|
var _a, _b;
|
|
_this.handleMonthChange(_this.state.date);
|
|
// Reset monthSelectedIn to 0 so the target month appears in the leftmost position
|
|
// This ensures consistent behavior when using changeMonth in custom headers
|
|
(_b = (_a = _this.props).onMonthSelectedInChange) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
|
|
});
|
|
};
|
|
_this.changeMonthYear = function (monthYear) {
|
|
_this.setState(function (_a) {
|
|
var date = _a.date;
|
|
return ({
|
|
date: dateFns.setYear(dateFns.setMonth(date, dateFns.getMonth(monthYear)), dateFns.getYear(monthYear)),
|
|
});
|
|
}, function () { return _this.handleMonthYearChange(_this.state.date); });
|
|
};
|
|
_this.header = function (date, customDayNameCount) {
|
|
if (date === void 0) { date = _this.state.date; }
|
|
if (customDayNameCount === void 0) { customDayNameCount = 0; }
|
|
// Return empty array if date is invalid
|
|
if (!isValid(date)) {
|
|
return [];
|
|
}
|
|
var disabled = _this.props.disabled;
|
|
var startOfWeek = getStartOfWeek(date, _this.props.locale, _this.props.calendarStartDay);
|
|
var dayNames = [];
|
|
if (_this.props.showWeekNumbers) {
|
|
dayNames.push(React__default.default.createElement("div", { key: "W", className: "react-datepicker__day-name ".concat(disabled ? "react-datepicker__day-name--disabled" : ""), role: "columnheader" },
|
|
React__default.default.createElement("span", { className: "react-datepicker__sr-only" }, "Week number"),
|
|
React__default.default.createElement("span", { "aria-hidden": "true" }, _this.props.weekLabel || "#")));
|
|
}
|
|
return dayNames.concat([0, 1, 2, 3, 4, 5, 6].map(function (offset) {
|
|
var day = dateFns.addDays(startOfWeek, offset);
|
|
var weekDayName = _this.formatWeekday(day, _this.props.locale);
|
|
var fullDayName = formatDate(day, "EEEE", _this.props.locale);
|
|
var weekDayClassName = _this.props.weekDayClassName
|
|
? _this.props.weekDayClassName(day)
|
|
: undefined;
|
|
// Use custom render if provided
|
|
if (_this.props.renderCustomDayName) {
|
|
var customContent = _this.props.renderCustomDayName({
|
|
day: day,
|
|
shortName: weekDayName,
|
|
fullName: fullDayName,
|
|
locale: _this.props.locale,
|
|
customDayNameCount: customDayNameCount,
|
|
});
|
|
return (React__default.default.createElement("div", { key: offset, role: "columnheader", className: clsx.clsx("react-datepicker__day-name", weekDayClassName, disabled ? "react-datepicker__day-name--disabled" : "") }, customContent));
|
|
}
|
|
// Default render
|
|
return (React__default.default.createElement("div", { key: offset, role: "columnheader", className: clsx.clsx("react-datepicker__day-name", weekDayClassName, disabled ? "react-datepicker__day-name--disabled" : "") },
|
|
React__default.default.createElement("span", { className: "react-datepicker__sr-only" }, fullDayName),
|
|
React__default.default.createElement("span", { "aria-hidden": "true" }, weekDayName)));
|
|
}));
|
|
};
|
|
_this.formatWeekday = function (day, locale) {
|
|
if (_this.props.formatWeekDay) {
|
|
return getFormattedWeekdayInLocale(day, _this.props.formatWeekDay, locale);
|
|
}
|
|
return _this.props.useWeekdaysShort
|
|
? getWeekdayShortInLocale(day, locale)
|
|
: getWeekdayMinInLocale(day, locale);
|
|
};
|
|
_this.decreaseYear = function () {
|
|
_this.setState(function (_a) {
|
|
var _b;
|
|
var date = _a.date;
|
|
return ({
|
|
date: dateFns.subYears(date, _this.props.showYearPicker
|
|
? ((_b = _this.props.yearItemNumber) !== null && _b !== void 0 ? _b : Calendar.defaultProps.yearItemNumber)
|
|
: 1),
|
|
});
|
|
}, function () { return _this.handleYearChange(_this.state.date); });
|
|
};
|
|
_this.clearSelectingDate = function () {
|
|
_this.setState({ selectingDate: undefined });
|
|
};
|
|
_this.renderPreviousButton = function () {
|
|
var _a, _b, _c;
|
|
if (_this.props.renderCustomHeader) {
|
|
return;
|
|
}
|
|
var monthsShown = (_a = _this.props.monthsShown) !== null && _a !== void 0 ? _a : Calendar.defaultProps.monthsShown;
|
|
var monthsToSubtract = _this.props.showPreviousMonths
|
|
? monthsShown - 1
|
|
: 0;
|
|
var monthSelectedIn = (_b = _this.props.monthSelectedIn) !== null && _b !== void 0 ? _b : monthsToSubtract;
|
|
var fromMonthDate = dateFns.subMonths(_this.state.date, monthSelectedIn);
|
|
var allPrevDaysDisabled;
|
|
switch (true) {
|
|
case _this.props.disabled:
|
|
allPrevDaysDisabled = true;
|
|
break;
|
|
case _this.props.showMonthYearPicker:
|
|
allPrevDaysDisabled = yearDisabledBefore(_this.state.date, _this.props);
|
|
break;
|
|
case _this.props.showYearPicker:
|
|
allPrevDaysDisabled = yearsDisabledBefore(_this.state.date, _this.props);
|
|
break;
|
|
case _this.props.showQuarterYearPicker:
|
|
allPrevDaysDisabled = quarterDisabledBefore(_this.state.date, _this.props);
|
|
break;
|
|
default:
|
|
allPrevDaysDisabled = monthDisabledBefore(fromMonthDate, _this.props);
|
|
break;
|
|
}
|
|
if ((!((_c = _this.props.forceShowMonthNavigation) !== null && _c !== void 0 ? _c : Calendar.defaultProps.forceShowMonthNavigation) &&
|
|
!_this.props.showDisabledMonthNavigation &&
|
|
allPrevDaysDisabled) ||
|
|
_this.props.showTimeSelectOnly) {
|
|
return;
|
|
}
|
|
var iconClasses = [
|
|
"react-datepicker__navigation-icon",
|
|
"react-datepicker__navigation-icon--previous",
|
|
];
|
|
var classes = [
|
|
"react-datepicker__navigation",
|
|
"react-datepicker__navigation--previous",
|
|
];
|
|
var clickHandler = _this.decreaseMonth;
|
|
if (_this.props.showMonthYearPicker ||
|
|
_this.props.showQuarterYearPicker ||
|
|
_this.props.showYearPicker) {
|
|
clickHandler = _this.decreaseYear;
|
|
}
|
|
if (allPrevDaysDisabled && _this.props.showDisabledMonthNavigation) {
|
|
classes.push("react-datepicker__navigation--previous--disabled");
|
|
clickHandler = undefined;
|
|
}
|
|
var isForYear = _this.props.showMonthYearPicker ||
|
|
_this.props.showQuarterYearPicker ||
|
|
_this.props.showYearPicker;
|
|
var _d = _this.props, _e = _d.previousMonthButtonLabel, previousMonthButtonLabel = _e === void 0 ? Calendar.defaultProps.previousMonthButtonLabel : _e, _f = _d.previousYearButtonLabel, previousYearButtonLabel = _f === void 0 ? Calendar.defaultProps.previousYearButtonLabel : _f;
|
|
var _g = _this.props, _h = _g.previousMonthAriaLabel, previousMonthAriaLabel = _h === void 0 ? typeof previousMonthButtonLabel === "string"
|
|
? previousMonthButtonLabel
|
|
: "Previous Month" : _h, _j = _g.previousYearAriaLabel, previousYearAriaLabel = _j === void 0 ? typeof previousYearButtonLabel === "string"
|
|
? previousYearButtonLabel
|
|
: "Previous Year" : _j;
|
|
return (React__default.default.createElement("button", { type: "button", className: classes.join(" "), onClick: clickHandler, onKeyDown: _this.props.handleOnKeyDown, "aria-label": isForYear ? previousYearAriaLabel : previousMonthAriaLabel },
|
|
React__default.default.createElement("span", { className: iconClasses.join(" ") }, isForYear ? previousYearButtonLabel : previousMonthButtonLabel)));
|
|
};
|
|
_this.increaseYear = function () {
|
|
_this.setState(function (_a) {
|
|
var _b;
|
|
var date = _a.date;
|
|
return ({
|
|
date: dateFns.addYears(date, _this.props.showYearPicker
|
|
? ((_b = _this.props.yearItemNumber) !== null && _b !== void 0 ? _b : Calendar.defaultProps.yearItemNumber)
|
|
: 1),
|
|
});
|
|
}, function () { return _this.handleYearChange(_this.state.date); });
|
|
};
|
|
_this.renderNextButton = function () {
|
|
var _a;
|
|
if (_this.props.renderCustomHeader) {
|
|
return;
|
|
}
|
|
var allNextDaysDisabled;
|
|
switch (true) {
|
|
case _this.props.disabled:
|
|
allNextDaysDisabled = true;
|
|
break;
|
|
case _this.props.showMonthYearPicker:
|
|
allNextDaysDisabled = yearDisabledAfter(_this.state.date, _this.props);
|
|
break;
|
|
case _this.props.showYearPicker:
|
|
allNextDaysDisabled = yearsDisabledAfter(_this.state.date, _this.props);
|
|
break;
|
|
case _this.props.showQuarterYearPicker:
|
|
allNextDaysDisabled = quarterDisabledAfter(_this.state.date, _this.props);
|
|
break;
|
|
default:
|
|
allNextDaysDisabled = monthDisabledAfter(_this.state.date, _this.props);
|
|
break;
|
|
}
|
|
if ((!((_a = _this.props.forceShowMonthNavigation) !== null && _a !== void 0 ? _a : Calendar.defaultProps.forceShowMonthNavigation) &&
|
|
!_this.props.showDisabledMonthNavigation &&
|
|
allNextDaysDisabled) ||
|
|
_this.props.showTimeSelectOnly) {
|
|
return;
|
|
}
|
|
var classes = [
|
|
"react-datepicker__navigation",
|
|
"react-datepicker__navigation--next",
|
|
];
|
|
var iconClasses = [
|
|
"react-datepicker__navigation-icon",
|
|
"react-datepicker__navigation-icon--next",
|
|
];
|
|
if (_this.props.showTimeSelect) {
|
|
classes.push("react-datepicker__navigation--next--with-time");
|
|
}
|
|
if (_this.props.todayButton) {
|
|
classes.push("react-datepicker__navigation--next--with-today-button");
|
|
}
|
|
var clickHandler = _this.increaseMonth;
|
|
if (_this.props.showMonthYearPicker ||
|
|
_this.props.showQuarterYearPicker ||
|
|
_this.props.showYearPicker) {
|
|
clickHandler = _this.increaseYear;
|
|
}
|
|
if (allNextDaysDisabled && _this.props.showDisabledMonthNavigation) {
|
|
classes.push("react-datepicker__navigation--next--disabled");
|
|
clickHandler = undefined;
|
|
}
|
|
var isForYear = _this.props.showMonthYearPicker ||
|
|
_this.props.showQuarterYearPicker ||
|
|
_this.props.showYearPicker;
|
|
var _b = _this.props, _c = _b.nextMonthButtonLabel, nextMonthButtonLabel = _c === void 0 ? Calendar.defaultProps.nextMonthButtonLabel : _c, _d = _b.nextYearButtonLabel, nextYearButtonLabel = _d === void 0 ? Calendar.defaultProps.nextYearButtonLabel : _d;
|
|
var _e = _this.props, _f = _e.nextMonthAriaLabel, nextMonthAriaLabel = _f === void 0 ? typeof nextMonthButtonLabel === "string"
|
|
? nextMonthButtonLabel
|
|
: "Next Month" : _f, _g = _e.nextYearAriaLabel, nextYearAriaLabel = _g === void 0 ? typeof nextYearButtonLabel === "string"
|
|
? nextYearButtonLabel
|
|
: "Next Year" : _g;
|
|
return (React__default.default.createElement("button", { type: "button", className: classes.join(" "), onClick: clickHandler, onKeyDown: _this.props.handleOnKeyDown, "aria-label": isForYear ? nextYearAriaLabel : nextMonthAriaLabel },
|
|
React__default.default.createElement("span", { className: iconClasses.join(" ") }, isForYear ? nextYearButtonLabel : nextMonthButtonLabel)));
|
|
};
|
|
_this.renderCurrentMonth = function (date) {
|
|
if (date === void 0) { date = _this.state.date; }
|
|
var classes = ["react-datepicker__current-month"];
|
|
if (_this.props.showYearDropdown) {
|
|
classes.push("react-datepicker__current-month--hasYearDropdown");
|
|
}
|
|
if (_this.props.showMonthDropdown) {
|
|
classes.push("react-datepicker__current-month--hasMonthDropdown");
|
|
}
|
|
if (_this.props.showMonthYearDropdown) {
|
|
classes.push("react-datepicker__current-month--hasMonthYearDropdown");
|
|
}
|
|
return (React__default.default.createElement("h2", { className: classes.join(" ") }, isValid(date)
|
|
? formatDate(date, _this.props.dateFormat, _this.props.locale)
|
|
: ""));
|
|
};
|
|
_this.renderYearDropdown = function (overrideHide) {
|
|
if (overrideHide === void 0) { overrideHide = false; }
|
|
if (!_this.props.showYearDropdown || overrideHide) {
|
|
return;
|
|
}
|
|
return (React__default.default.createElement(YearDropdown, _assign({}, Calendar.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeYear, year: dateFns.getYear(_this.state.date) })));
|
|
};
|
|
_this.renderMonthDropdown = function (overrideHide) {
|
|
if (overrideHide === void 0) { overrideHide = false; }
|
|
if (!_this.props.showMonthDropdown || overrideHide) {
|
|
return;
|
|
}
|
|
return (React__default.default.createElement(MonthDropdown, _assign({}, Calendar.defaultProps, _this.props, { month: dateFns.getMonth(_this.state.date), onChange: _this.changeMonth })));
|
|
};
|
|
_this.renderMonthYearDropdown = function (overrideHide) {
|
|
if (overrideHide === void 0) { overrideHide = false; }
|
|
if (!_this.props.showMonthYearDropdown || overrideHide) {
|
|
return;
|
|
}
|
|
return (React__default.default.createElement(MonthYearDropdown, _assign({}, Calendar.defaultProps, _this.props, { date: _this.state.date, onChange: _this.changeMonthYear })));
|
|
};
|
|
_this.handleTodayButtonClick = function (event) {
|
|
_this.props.onSelect(getStartOfToday(), event);
|
|
_this.props.setPreSelection && _this.props.setPreSelection(getStartOfToday());
|
|
};
|
|
_this.renderTodayButton = function () {
|
|
if (!_this.props.todayButton || _this.props.showTimeSelectOnly) {
|
|
return;
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__today-button", onClick: _this.handleTodayButtonClick }, _this.props.todayButton));
|
|
};
|
|
_this.renderDayNamesHeader = function (monthDate, customDayNameCount) {
|
|
if (customDayNameCount === void 0) { customDayNameCount = 0; }
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__day-names", role: "row" }, _this.header(monthDate, customDayNameCount)));
|
|
};
|
|
_this.renderDefaultHeader = function (_a) {
|
|
var monthDate = _a.monthDate, i = _a.i;
|
|
var headerContent = (React__default.default.createElement("div", { className: clsx.clsx("react-datepicker__header", {
|
|
"react-datepicker__header--has-time-select": _this.props.showTimeSelect,
|
|
"react-datepicker__header--middle": _this.props.monthHeaderPosition === "middle",
|
|
"react-datepicker__header--bottom": _this.props.monthHeaderPosition === "bottom",
|
|
}) },
|
|
_this.renderCurrentMonth(monthDate),
|
|
React__default.default.createElement("div", { className: "react-datepicker__header__dropdown react-datepicker__header__dropdown--".concat(_this.props.dropdownMode), onFocus: _this.handleDropdownFocus },
|
|
_this.renderMonthDropdown(i !== 0),
|
|
_this.renderMonthYearDropdown(i !== 0),
|
|
_this.renderYearDropdown(i !== 0))));
|
|
// Top position: render header directly in default location
|
|
if (_this.props.monthHeaderPosition === "top") {
|
|
return headerContent;
|
|
}
|
|
// Middle/bottom positions: wrap with navigation buttons
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__header-wrapper" },
|
|
_this.renderPreviousButton() || null,
|
|
_this.renderNextButton() || null,
|
|
headerContent));
|
|
};
|
|
_this.renderCustomHeader = function (headerArgs) {
|
|
var _a, _b;
|
|
var monthDate = headerArgs.monthDate, i = headerArgs.i;
|
|
if ((_this.props.showTimeSelect && !_this.state.monthContainer) ||
|
|
_this.props.showTimeSelectOnly) {
|
|
return null;
|
|
}
|
|
var _c = _this.props, showYearPicker = _c.showYearPicker, yearItemNumber = _c.yearItemNumber;
|
|
var visibleYearsRange;
|
|
if (showYearPicker) {
|
|
var _d = getYearsPeriod(monthDate, yearItemNumber), startYear = _d.startPeriod, endYear = _d.endPeriod;
|
|
visibleYearsRange = {
|
|
startYear: startYear,
|
|
endYear: endYear,
|
|
};
|
|
}
|
|
var prevMonthButtonDisabled = monthDisabledBefore(_this.state.date, _this.props);
|
|
var nextMonthButtonDisabled = monthDisabledAfter(_this.state.date, _this.props);
|
|
var prevYearButtonDisabled = yearDisabledBefore(_this.state.date, _this.props);
|
|
var nextYearButtonDisabled = yearDisabledAfter(_this.state.date, _this.props);
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__header react-datepicker__header--custom", onFocus: _this.props.onDropdownFocus }, (_b = (_a = _this.props).renderCustomHeader) === null || _b === void 0 ? void 0 : _b.call(_a, _assign(_assign(_assign({}, _this.state), (showYearPicker && { visibleYearsRange: visibleYearsRange })), { customHeaderCount: i, monthDate: monthDate, changeMonth: _this.changeMonth, changeYear: _this.changeYear, decreaseMonth: _this.decreaseMonth, increaseMonth: _this.increaseMonth, decreaseYear: _this.decreaseYear, increaseYear: _this.increaseYear, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, prevYearButtonDisabled: prevYearButtonDisabled, nextYearButtonDisabled: nextYearButtonDisabled }))));
|
|
};
|
|
_this.renderYearHeader = function (_a) {
|
|
var monthDate = _a.monthDate;
|
|
var _b = _this.props, showYearPicker = _b.showYearPicker, _c = _b.yearItemNumber, yearItemNumber = _c === void 0 ? Calendar.defaultProps.yearItemNumber : _c;
|
|
var _d = getYearsPeriod(monthDate, yearItemNumber), startPeriod = _d.startPeriod, endPeriod = _d.endPeriod;
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__header react-datepicker-year-header" }, showYearPicker ? "".concat(startPeriod, " - ").concat(endPeriod) : dateFns.getYear(monthDate)));
|
|
};
|
|
_this.renderHeader = function (_a) {
|
|
var monthDate = _a.monthDate, _b = _a.i, i = _b === void 0 ? 0 : _b;
|
|
var headerArgs = { monthDate: monthDate, i: i };
|
|
switch (true) {
|
|
case _this.props.renderCustomHeader !== undefined:
|
|
return _this.renderCustomHeader(headerArgs);
|
|
case _this.props.showMonthYearPicker ||
|
|
_this.props.showQuarterYearPicker ||
|
|
_this.props.showYearPicker:
|
|
return _this.renderYearHeader(headerArgs);
|
|
default:
|
|
return _this.renderDefaultHeader(headerArgs);
|
|
}
|
|
};
|
|
_this.renderMonths = function () {
|
|
var _a, _b;
|
|
if (_this.props.showTimeSelectOnly || _this.props.showYearPicker) {
|
|
return;
|
|
}
|
|
var monthList = [];
|
|
var monthsShown = (_a = _this.props.monthsShown) !== null && _a !== void 0 ? _a : Calendar.defaultProps.monthsShown;
|
|
var monthsToSubtract = _this.props.showPreviousMonths
|
|
? monthsShown - 1
|
|
: 0;
|
|
var fromMonthDate = _this.props.showMonthYearPicker || _this.props.showQuarterYearPicker
|
|
? dateFns.addYears(_this.state.date, monthsToSubtract)
|
|
: dateFns.subMonths(_this.state.date, monthsToSubtract);
|
|
var monthSelectedIn = (_b = _this.props.monthSelectedIn) !== null && _b !== void 0 ? _b : monthsToSubtract;
|
|
for (var i = 0; i < monthsShown; ++i) {
|
|
var monthsToAdd = i - monthSelectedIn + monthsToSubtract;
|
|
var monthDate = _this.props.showMonthYearPicker || _this.props.showQuarterYearPicker
|
|
? dateFns.addYears(fromMonthDate, monthsToAdd)
|
|
: dateFns.addMonths(fromMonthDate, monthsToAdd);
|
|
var monthKey = "month-".concat(i);
|
|
var monthShowsDuplicateDaysEnd = i < monthsShown - 1;
|
|
var monthShowsDuplicateDaysStart = i > 0;
|
|
monthList.push(React__default.default.createElement("div", { key: monthKey, ref: function (div) {
|
|
_this.monthContainer = div !== null && div !== void 0 ? div : undefined;
|
|
}, className: "react-datepicker__month-container" },
|
|
_this.props.monthHeaderPosition === "top" &&
|
|
_this.renderHeader({ monthDate: monthDate, i: i }),
|
|
React__default.default.createElement(Month, _assign({}, Calendar.defaultProps, _this.props, { containerRef: _this.containerRef, ariaLabelPrefix: _this.props.monthAriaLabelPrefix, day: monthDate, onDayClick: _this.handleDayClick, handleOnKeyDown: _this.props.handleOnDayKeyDown, handleOnMonthKeyDown: _this.props.handleOnKeyDown, onDayMouseEnter: _this.handleDayMouseEnter, onMouseLeave: _this.handleMonthMouseLeave, orderInDisplay: i, selectingDate: _this.state.selectingDate, monthShowsDuplicateDaysEnd: monthShowsDuplicateDaysEnd, monthShowsDuplicateDaysStart: monthShowsDuplicateDaysStart, dayNamesHeader: _this.renderDayNamesHeader(monthDate, i), monthHeader: _this.props.monthHeaderPosition === "middle"
|
|
? _this.renderHeader({ monthDate: monthDate, i: i })
|
|
: undefined, monthFooter: _this.props.monthHeaderPosition === "bottom"
|
|
? _this.renderHeader({ monthDate: monthDate, i: i })
|
|
: undefined }))));
|
|
}
|
|
return monthList;
|
|
};
|
|
_this.renderYears = function () {
|
|
if (_this.props.showTimeSelectOnly) {
|
|
return;
|
|
}
|
|
if (_this.props.showYearPicker) {
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__year--container" },
|
|
_this.renderHeader({ monthDate: _this.state.date }),
|
|
React__default.default.createElement(Year, _assign({}, Calendar.defaultProps, _this.props, { selectingDate: _this.state.selectingDate, date: _this.state.date, onDayClick: _this.handleDayClick, clearSelectingDate: _this.clearSelectingDate, onYearMouseEnter: _this.handleYearMouseEnter, onYearMouseLeave: _this.handleYearMouseLeave }))));
|
|
}
|
|
return;
|
|
};
|
|
_this.renderTimeSection = function () {
|
|
if (_this.props.showTimeSelect &&
|
|
(_this.state.monthContainer || _this.props.showTimeSelectOnly)) {
|
|
return (React__default.default.createElement(Time, _assign({}, Calendar.defaultProps, _this.props, { onChange: _this.props.onTimeChange, format: _this.props.timeFormat, intervals: _this.props.timeIntervals, monthRef: _this.state.monthContainer })));
|
|
}
|
|
return;
|
|
};
|
|
_this.renderInputTimeSection = function () {
|
|
var _a, _b;
|
|
if (!_this.props.showTimeInput) {
|
|
return;
|
|
}
|
|
// Handle selectsRange mode - render two time inputs
|
|
if (_this.props.selectsRange) {
|
|
var _c = _this.props, startDate = _c.startDate, endDate = _c.endDate;
|
|
var startTime = startDate ? new Date(startDate) : undefined;
|
|
var startTimeValid = startTime && isValid(startTime) && Boolean(startDate);
|
|
var startTimeString = startTimeValid
|
|
? "".concat(addZero(startTime.getHours()), ":").concat(addZero(startTime.getMinutes()))
|
|
: "";
|
|
var endTime = endDate ? new Date(endDate) : undefined;
|
|
var endTimeValid = endTime && isValid(endTime) && Boolean(endDate);
|
|
var endTimeString = endTimeValid
|
|
? "".concat(addZero(endTime.getHours()), ":").concat(addZero(endTime.getMinutes()))
|
|
: "";
|
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
React__default.default.createElement(InputTime, _assign({}, Calendar.defaultProps, _this.props, { date: startTime, timeString: startTimeString, onChange: function (time) {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onTimeChange) === null || _b === void 0 ? void 0 : _b.call(_a, time, "start");
|
|
}, timeInputLabel: ((_a = _this.props.timeInputLabel) !== null && _a !== void 0 ? _a : "Time") + " (Start)" })),
|
|
React__default.default.createElement(InputTime, _assign({}, Calendar.defaultProps, _this.props, { date: endTime, timeString: endTimeString, onChange: function (time) {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onTimeChange) === null || _b === void 0 ? void 0 : _b.call(_a, time, "end");
|
|
}, timeInputLabel: ((_b = _this.props.timeInputLabel) !== null && _b !== void 0 ? _b : "Time") + " (End)" }))));
|
|
}
|
|
// Single date mode (original behavior)
|
|
var time = _this.props.selected
|
|
? new Date(_this.props.selected)
|
|
: undefined;
|
|
var timeValid = time && isValid(time) && Boolean(_this.props.selected);
|
|
var timeString = timeValid
|
|
? "".concat(addZero(time.getHours()), ":").concat(addZero(time.getMinutes()))
|
|
: "";
|
|
return (React__default.default.createElement(InputTime, _assign({}, Calendar.defaultProps, _this.props, { date: time, timeString: timeString, onChange: function (time) {
|
|
var _a, _b;
|
|
(_b = (_a = _this.props).onTimeChange) === null || _b === void 0 ? void 0 : _b.call(_a, time);
|
|
} })));
|
|
};
|
|
_this.renderAriaLiveRegion = function () {
|
|
var _a;
|
|
// Don't render aria-live message if date is invalid
|
|
if (!isValid(_this.state.date)) {
|
|
return (React__default.default.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }));
|
|
}
|
|
var _b = getYearsPeriod(_this.state.date, (_a = _this.props.yearItemNumber) !== null && _a !== void 0 ? _a : Calendar.defaultProps.yearItemNumber), startPeriod = _b.startPeriod, endPeriod = _b.endPeriod;
|
|
var ariaLiveMessage;
|
|
if (_this.props.showYearPicker) {
|
|
ariaLiveMessage = "".concat(startPeriod, " - ").concat(endPeriod);
|
|
}
|
|
else if (_this.props.showMonthYearPicker ||
|
|
_this.props.showQuarterYearPicker) {
|
|
ariaLiveMessage = dateFns.getYear(_this.state.date);
|
|
}
|
|
else {
|
|
ariaLiveMessage = "".concat(getMonthInLocale(dateFns.getMonth(_this.state.date), _this.props.locale), " ").concat(dateFns.getYear(_this.state.date));
|
|
}
|
|
return (React__default.default.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, _this.state.isRenderAriaLiveMessage && ariaLiveMessage));
|
|
};
|
|
_this.renderChildren = function () {
|
|
if (_this.props.children) {
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__children-container" }, _this.props.children));
|
|
}
|
|
return;
|
|
};
|
|
_this.containerRef = React.createRef();
|
|
_this.state = {
|
|
date: _this.getDateInView(),
|
|
selectingDate: undefined,
|
|
monthContainer: undefined,
|
|
isRenderAriaLiveMessage: false,
|
|
};
|
|
return _this;
|
|
}
|
|
Object.defineProperty(Calendar, "defaultProps", {
|
|
get: function () {
|
|
return {
|
|
monthsShown: 1,
|
|
forceShowMonthNavigation: false,
|
|
outsideClickIgnoreClass: OUTSIDE_CLICK_IGNORE_CLASS,
|
|
timeCaption: "Time",
|
|
previousYearButtonLabel: "Previous Year",
|
|
nextYearButtonLabel: "Next Year",
|
|
previousMonthButtonLabel: "Previous Month",
|
|
nextMonthButtonLabel: "Next Month",
|
|
yearItemNumber: DEFAULT_YEAR_ITEM_NUMBER,
|
|
monthHeaderPosition: "top",
|
|
};
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Calendar.prototype.componentDidMount = function () {
|
|
var _this = this;
|
|
// monthContainer height is needed in time component
|
|
// to determine the height for the ul in the time component
|
|
// setState here so height is given after final component
|
|
// layout is rendered
|
|
if (this.props.showTimeSelect) {
|
|
this.assignMonthContainer = (function () {
|
|
_this.setState({ monthContainer: _this.monthContainer });
|
|
})();
|
|
}
|
|
};
|
|
Calendar.prototype.componentDidUpdate = function (prevProps) {
|
|
var _this = this;
|
|
if (this.props.preSelection &&
|
|
isValid(this.props.preSelection) &&
|
|
(!isSameDay(this.props.preSelection, prevProps.preSelection) ||
|
|
this.props.monthSelectedIn !== prevProps.monthSelectedIn)) {
|
|
var hasMonthChanged_1 = !isSameMonth(this.state.date, this.props.preSelection);
|
|
this.setState({
|
|
date: this.props.preSelection,
|
|
}, function () { return hasMonthChanged_1 && _this.handleCustomMonthChange(_this.state.date); });
|
|
}
|
|
else if (this.props.openToDate &&
|
|
!isSameDay(this.props.openToDate, prevProps.openToDate)) {
|
|
this.setState({
|
|
date: this.props.openToDate,
|
|
});
|
|
}
|
|
};
|
|
Calendar.prototype.render = function () {
|
|
var Container = this.props.container || CalendarContainer;
|
|
return (React__default.default.createElement(ClickOutsideWrapper, { onClickOutside: this.handleClickOutside, style: { display: "contents" }, ignoreClass: this.props.outsideClickIgnoreClass },
|
|
React__default.default.createElement("div", { style: { display: "contents" }, ref: this.containerRef },
|
|
React__default.default.createElement(Container, { className: clsx.clsx("react-datepicker", this.props.className, {
|
|
"react-datepicker--time-only": this.props.showTimeSelectOnly,
|
|
}), showTime: this.props.showTimeSelect || this.props.showTimeInput, showTimeSelectOnly: this.props.showTimeSelectOnly, inline: this.props.inline },
|
|
this.renderAriaLiveRegion(),
|
|
this.props.monthHeaderPosition === "top" &&
|
|
this.renderPreviousButton(),
|
|
this.props.monthHeaderPosition === "top" &&
|
|
this.renderNextButton(),
|
|
this.renderMonths(),
|
|
this.renderYears(),
|
|
this.renderTodayButton(),
|
|
this.renderTimeSection(),
|
|
this.renderInputTimeSection(),
|
|
this.renderChildren()))));
|
|
};
|
|
return Calendar;
|
|
}(React.Component));
|
|
|
|
/**
|
|
* `CalendarIcon` is a React component that renders an icon for a calendar.
|
|
* The icon can be a string representing a CSS class, a React node, or a default SVG icon.
|
|
*
|
|
* @component
|
|
* @prop icon - The icon to be displayed. This can be a string representing a CSS class or a React node.
|
|
* @prop className - An optional string representing additional CSS classes to be applied to the icon.
|
|
* @prop onClick - An optional function to be called when the icon is clicked.
|
|
*
|
|
* @example
|
|
* // To use a CSS class as the icon
|
|
* <CalendarIcon icon="my-icon-class" onClick={myClickHandler} />
|
|
*
|
|
* @example
|
|
* // To use a React node as the icon
|
|
* <CalendarIcon icon={<MyIconComponent />} onClick={myClickHandler} />
|
|
*
|
|
* @returns The `CalendarIcon` component.
|
|
*/
|
|
var CalendarIcon = function (_a) {
|
|
var icon = _a.icon, _b = _a.className, className = _b === void 0 ? "" : _b, onClick = _a.onClick;
|
|
var defaultClass = "react-datepicker__calendar-icon";
|
|
if (typeof icon === "string") {
|
|
return (React__default.default.createElement("i", { className: "".concat(defaultClass, " ").concat(icon, " ").concat(className), "aria-hidden": "true", onClick: onClick }));
|
|
}
|
|
if (React__default.default.isValidElement(icon)) {
|
|
// Because we are checking that typeof icon is string first, we can safely cast icon as React.ReactElement on types level and code level
|
|
var iconElement_1 = icon;
|
|
return React__default.default.cloneElement(iconElement_1, {
|
|
className: "".concat(iconElement_1.props.className || "", " ").concat(defaultClass, " ").concat(className),
|
|
onClick: function (event) {
|
|
if (typeof iconElement_1.props.onClick === "function") {
|
|
iconElement_1.props.onClick(event);
|
|
}
|
|
if (typeof onClick === "function") {
|
|
onClick(event);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
// Default SVG Icon
|
|
return (React__default.default.createElement("svg", { className: "".concat(defaultClass, " ").concat(className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", onClick: onClick },
|
|
React__default.default.createElement("path", { d: "M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" })));
|
|
};
|
|
|
|
/**
|
|
* `Portal` is a React component that allows you to render children into a DOM node
|
|
* that exists outside the DOM hierarchy of the parent component.
|
|
*
|
|
* @class
|
|
* @param {PortalProps} props - The properties that define the `Portal` component.
|
|
* @property {React.ReactNode} props.children - The children to be rendered into the `Portal`.
|
|
* @property {string} props.portalId - The id of the DOM node into which the `Portal` will render.
|
|
* @property {ShadowRoot} [props.portalHost] - The DOM node to host the `Portal`.
|
|
*/
|
|
var Portal = /** @class */ (function (_super) {
|
|
__extends(Portal, _super);
|
|
function Portal(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this.portalRoot = null;
|
|
_this.el = document.createElement("div");
|
|
return _this;
|
|
}
|
|
Portal.prototype.componentDidMount = function () {
|
|
this.portalRoot = (this.props.portalHost || document).getElementById(this.props.portalId);
|
|
if (!this.portalRoot) {
|
|
this.portalRoot = document.createElement("div");
|
|
this.portalRoot.setAttribute("id", this.props.portalId);
|
|
(this.props.portalHost || document.body).appendChild(this.portalRoot);
|
|
}
|
|
this.portalRoot.appendChild(this.el);
|
|
};
|
|
Portal.prototype.componentWillUnmount = function () {
|
|
if (this.portalRoot) {
|
|
this.portalRoot.removeChild(this.el);
|
|
}
|
|
};
|
|
Portal.prototype.render = function () {
|
|
return ReactDOM__default.default.createPortal(this.props.children, this.el);
|
|
};
|
|
return Portal;
|
|
}(React.Component));
|
|
|
|
var focusableElementsSelector = "[tabindex], a, button, input, select, textarea";
|
|
var focusableFilter = function (node) {
|
|
if (node instanceof HTMLAnchorElement) {
|
|
return node.tabIndex !== -1;
|
|
}
|
|
return !node.disabled && node.tabIndex !== -1;
|
|
};
|
|
/**
|
|
* `TabLoop` is a React component that manages tabbing behavior for its children.
|
|
*
|
|
* TabLoop prevents the user from tabbing outside of the popper
|
|
* It creates a tabindex loop so that "Tab" on the last element will focus the first element
|
|
* and "Shift Tab" on the first element will focus the last element
|
|
*
|
|
* @component
|
|
* @example
|
|
* <TabLoop enableTabLoop={true}>
|
|
* <ChildComponent />
|
|
* </TabLoop>
|
|
*
|
|
* @param props - The properties that define the `TabLoop` component.
|
|
* @param props.children - The child components.
|
|
* @param props.enableTabLoop - Whether to enable the tab loop.
|
|
*
|
|
* @returns The `TabLoop` component.
|
|
*/
|
|
var TabLoop = /** @class */ (function (_super) {
|
|
__extends(TabLoop, _super);
|
|
function TabLoop(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
/**
|
|
* `getTabChildren` is a method of the `TabLoop` class that retrieves all tabbable children of the component.
|
|
*
|
|
* This method uses the `tabbable` library to find all tabbable elements within the `TabLoop` component.
|
|
* It then filters out any elements that are not visible.
|
|
*
|
|
* @returns An array of all tabbable and visible children of the `TabLoop` component.
|
|
*/
|
|
_this.getTabChildren = function () {
|
|
var _a;
|
|
return Array.prototype.slice
|
|
.call((_a = _this.tabLoopRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableElementsSelector), 1, -1)
|
|
.filter(focusableFilter);
|
|
};
|
|
_this.handleFocusStart = function () {
|
|
var tabChildren = _this.getTabChildren();
|
|
tabChildren &&
|
|
tabChildren.length > 1 &&
|
|
tabChildren[tabChildren.length - 1].focus();
|
|
};
|
|
_this.handleFocusEnd = function () {
|
|
var tabChildren = _this.getTabChildren();
|
|
tabChildren && tabChildren.length > 1 && tabChildren[0].focus();
|
|
};
|
|
_this.tabLoopRef = React.createRef();
|
|
return _this;
|
|
}
|
|
TabLoop.prototype.render = function () {
|
|
var _a;
|
|
if (!((_a = this.props.enableTabLoop) !== null && _a !== void 0 ? _a : TabLoop.defaultProps.enableTabLoop)) {
|
|
return this.props.children;
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__tab-loop", ref: this.tabLoopRef },
|
|
React__default.default.createElement("div", { className: "react-datepicker__tab-loop__start", tabIndex: 0, onFocus: this.handleFocusStart }),
|
|
this.props.children,
|
|
React__default.default.createElement("div", { className: "react-datepicker__tab-loop__end", tabIndex: 0, onFocus: this.handleFocusEnd })));
|
|
};
|
|
TabLoop.defaultProps = {
|
|
enableTabLoop: true,
|
|
};
|
|
return TabLoop;
|
|
}(React.Component));
|
|
|
|
/**
|
|
* `withFloating` is a higher-order component that adds floating behavior to a component.
|
|
*
|
|
* @param Component - The component to enhance.
|
|
*
|
|
* @example
|
|
* const FloatingComponent = withFloating(MyComponent);
|
|
* <FloatingComponent popperModifiers={[]} popperProps={{}} hidePopper={true} />
|
|
*
|
|
* @param popperModifiers - The modifiers to use for the popper.
|
|
* @param popperProps - The props to pass to the popper.
|
|
* @param hidePopper - Whether to hide the popper.
|
|
* @param popperPlacement - The placement of the popper.
|
|
*
|
|
* @returns A new component with floating behavior.
|
|
*/
|
|
function withFloating(Component) {
|
|
function WithFloating(props) {
|
|
var _a;
|
|
var hidePopper = typeof props.hidePopper === "boolean" ? props.hidePopper : true;
|
|
var arrowRef = React.useRef(null);
|
|
var floatingProps = react.useFloating(_assign({ open: !hidePopper, whileElementsMounted: react.autoUpdate, placement: props.popperPlacement, middleware: __spreadArray([
|
|
react.flip({ padding: 15 }),
|
|
react.offset(10),
|
|
// eslint-disable-next-line react-hooks/refs -- Floating UI requires refs to be passed during render
|
|
react.arrow({ element: arrowRef })
|
|
], ((_a = props.popperModifiers) !== null && _a !== void 0 ? _a : []), true) }, props.popperProps));
|
|
var componentProps = _assign(_assign({}, props), { hidePopper: hidePopper, popperProps: _assign(_assign({}, floatingProps), { arrowRef: arrowRef }) });
|
|
return React__default.default.createElement(Component, _assign({}, componentProps));
|
|
}
|
|
WithFloating.displayName = "withFloating(".concat(Component.displayName || Component.name || "Component", ")");
|
|
return WithFloating;
|
|
}
|
|
|
|
// Exported for testing purposes
|
|
var PopperComponent$1 = function (props) {
|
|
var className = props.className, wrapperClassName = props.wrapperClassName, _a = props.hidePopper, hidePopper = _a === void 0 ? true : _a, popperComponent = props.popperComponent, targetComponent = props.targetComponent, enableTabLoop = props.enableTabLoop, popperOnKeyDown = props.popperOnKeyDown, portalId = props.portalId, portalHost = props.portalHost, popperProps = props.popperProps, showArrow = props.showArrow, popperTargetRef = props.popperTargetRef, monthHeaderPosition = props.monthHeaderPosition;
|
|
// When a custom popperTargetRef is provided, use it as the position reference
|
|
// This allows the popper to be positioned relative to a specific element
|
|
// within the custom input, rather than the wrapper div
|
|
React.useEffect(function () {
|
|
if (popperTargetRef === null || popperTargetRef === void 0 ? void 0 : popperTargetRef.current) {
|
|
popperProps.refs.setPositionReference(popperTargetRef.current);
|
|
}
|
|
}, [popperTargetRef, popperProps.refs]);
|
|
var popper = undefined;
|
|
if (!hidePopper) {
|
|
var classes = clsx.clsx("react-datepicker-popper", !showArrow && "react-datepicker-popper-offset", monthHeaderPosition === "middle" &&
|
|
"react-datepicker-popper--header-middle", monthHeaderPosition === "bottom" &&
|
|
"react-datepicker-popper--header-bottom", className);
|
|
popper = (React__default.default.createElement(TabLoop, { enableTabLoop: enableTabLoop },
|
|
React__default.default.createElement("div", { ref: popperProps.refs.setFloating, style: popperProps.floatingStyles, className: classes, "data-placement": popperProps.placement, onKeyDown: popperOnKeyDown },
|
|
popperComponent,
|
|
showArrow && (React__default.default.createElement(react.FloatingArrow, { ref: popperProps.arrowRef, context: popperProps.context, fill: "currentColor", strokeWidth: 1, height: 8, width: 16, style: { transform: "translateY(-1px)" }, className: "react-datepicker__triangle" })))));
|
|
}
|
|
if (props.popperContainer) {
|
|
popper = React.createElement(props.popperContainer, {}, popper);
|
|
}
|
|
if (portalId && !hidePopper) {
|
|
popper = (React__default.default.createElement(Portal, { portalId: portalId, portalHost: portalHost }, popper));
|
|
}
|
|
var wrapperClasses = clsx.clsx("react-datepicker-wrapper", wrapperClassName);
|
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
React__default.default.createElement("div", { ref: popperProps.refs.setReference, className: wrapperClasses }, targetComponent),
|
|
popper));
|
|
};
|
|
var PopperComponent = withFloating(PopperComponent$1);
|
|
|
|
// Compares dates year+month combinations
|
|
function hasPreSelectionChanged(date1, date2) {
|
|
if (date1 && date2) {
|
|
return (dateFns.getMonth(date1) !== dateFns.getMonth(date2) || dateFns.getYear(date1) !== dateFns.getYear(date2));
|
|
}
|
|
return date1 !== date2;
|
|
}
|
|
/**
|
|
* General datepicker component.
|
|
*/
|
|
var INPUT_ERR_1 = "Date input not valid.";
|
|
var DatePicker = /** @class */ (function (_super) {
|
|
__extends(DatePicker, _super);
|
|
function DatePicker(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this.calendar = null;
|
|
_this.input = null;
|
|
_this.getPreSelection = function () {
|
|
var timeZone = _this.props.timeZone;
|
|
var baseDate = _this.props.openToDate
|
|
? _this.props.openToDate
|
|
: _this.props.selectsEnd && _this.props.startDate
|
|
? _this.props.startDate
|
|
: _this.props.selectsStart && _this.props.endDate
|
|
? _this.props.endDate
|
|
: newDate();
|
|
// Convert to the specified timezone for display
|
|
return timeZone ? toZonedTime(baseDate, timeZone) : baseDate;
|
|
};
|
|
// Convert the date from string format to standard Date format
|
|
// Uses parseDate with ISO format to parse as local time, preventing
|
|
// dates from shifting in timezones west of UTC. See issue #6105.
|
|
_this.modifyHolidays = function () {
|
|
var _a;
|
|
return (_a = _this.props.holidays) === null || _a === void 0 ? void 0 : _a.reduce(function (accumulator, holiday) {
|
|
var date = parseDate(holiday.date, "yyyy-MM-dd", undefined, false);
|
|
if (!date) {
|
|
return accumulator;
|
|
}
|
|
return __spreadArray(__spreadArray([], accumulator, true), [_assign(_assign({}, holiday), { date: date })], false);
|
|
}, []);
|
|
};
|
|
_this.calcInitialState = function () {
|
|
var timeZone = _this.props.timeZone;
|
|
var defaultPreSelection = _this.getPreSelection();
|
|
var minDate = getEffectiveMinDate(_this.props);
|
|
var maxDate = getEffectiveMaxDate(_this.props);
|
|
var boundedPreSelection = minDate && dateFns.isBefore(defaultPreSelection, getStartOfDay(minDate))
|
|
? minDate
|
|
: maxDate && dateFns.isAfter(defaultPreSelection, getEndOfDay(maxDate))
|
|
? maxDate
|
|
: defaultPreSelection;
|
|
// Convert selected/startDate to zoned time for display if timezone is specified
|
|
var initialPreSelection = _this.props.selectsRange
|
|
? _this.props.startDate
|
|
: _this.props.selected;
|
|
if (initialPreSelection && timeZone) {
|
|
initialPreSelection = toZonedTime(initialPreSelection, timeZone);
|
|
}
|
|
return {
|
|
open: _this.props.startOpen || false,
|
|
preventFocus: false,
|
|
inputValue: null,
|
|
preSelection: initialPreSelection !== null && initialPreSelection !== void 0 ? initialPreSelection : boundedPreSelection,
|
|
// transforming highlighted days (perhaps nested array)
|
|
// to flat Map for faster access in day.jsx
|
|
highlightDates: getHighLightDaysMap(_this.props.highlightDates),
|
|
focused: false,
|
|
// used to focus day in inline version after month has changed, but not on
|
|
// initial render
|
|
shouldFocusDayInline: false,
|
|
isRenderAriaLiveMessage: false,
|
|
wasHidden: false,
|
|
};
|
|
};
|
|
_this.getInputValue = function () {
|
|
var _a;
|
|
var _b = _this.props, locale = _b.locale, startDate = _b.startDate, endDate = _b.endDate, rangeSeparator = _b.rangeSeparator, selected = _b.selected, selectedDates = _b.selectedDates, selectsMultiple = _b.selectsMultiple, selectsRange = _b.selectsRange, formatMultipleDates = _b.formatMultipleDates, value = _b.value;
|
|
var dateFormat = (_a = _this.props.dateFormat) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormat;
|
|
var inputValue = _this.state.inputValue;
|
|
if (typeof value === "string") {
|
|
return value;
|
|
}
|
|
else if (typeof inputValue === "string") {
|
|
return inputValue;
|
|
}
|
|
else if (selectsRange) {
|
|
return safeDateRangeFormat(startDate, endDate, {
|
|
dateFormat: dateFormat,
|
|
locale: locale,
|
|
rangeSeparator: rangeSeparator,
|
|
});
|
|
}
|
|
else if (selectsMultiple) {
|
|
if (formatMultipleDates) {
|
|
var formatDateFn = function (date) {
|
|
return safeDateFormat(date, { dateFormat: dateFormat, locale: locale });
|
|
};
|
|
return formatMultipleDates(selectedDates !== null && selectedDates !== void 0 ? selectedDates : [], formatDateFn);
|
|
}
|
|
return safeMultipleDatesFormat(selectedDates !== null && selectedDates !== void 0 ? selectedDates : [], {
|
|
dateFormat: dateFormat,
|
|
locale: locale,
|
|
});
|
|
}
|
|
return safeDateFormat(selected, {
|
|
dateFormat: dateFormat,
|
|
locale: locale,
|
|
});
|
|
};
|
|
_this.resetHiddenStatus = function () {
|
|
_this.setState(_assign(_assign({}, _this.state), { wasHidden: false }));
|
|
};
|
|
_this.setHiddenStatus = function () {
|
|
_this.setState(_assign(_assign({}, _this.state), { wasHidden: true }));
|
|
};
|
|
_this.setHiddenStateOnVisibilityHidden = function () {
|
|
if (document.visibilityState !== "hidden") {
|
|
return;
|
|
}
|
|
_this.setHiddenStatus();
|
|
};
|
|
_this.clearPreventFocusTimeout = function () {
|
|
if (_this.preventFocusTimeout) {
|
|
clearTimeout(_this.preventFocusTimeout);
|
|
}
|
|
};
|
|
_this.setFocus = function () {
|
|
var _a, _b;
|
|
(_b = (_a = _this.input) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a, { preventScroll: true });
|
|
};
|
|
_this.setBlur = function () {
|
|
var _a, _b;
|
|
(_b = (_a = _this.input) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
_this.cancelFocusInput();
|
|
};
|
|
_this.deferBlur = function () {
|
|
requestAnimationFrame(function () {
|
|
_this.setBlur();
|
|
});
|
|
};
|
|
_this.setOpen = function (open, skipSetBlur) {
|
|
if (skipSetBlur === void 0) { skipSetBlur = false; }
|
|
_this.setState({
|
|
open: open,
|
|
preSelection: open && _this.state.open
|
|
? _this.state.preSelection
|
|
: _this.calcInitialState().preSelection,
|
|
lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE,
|
|
}, function () {
|
|
if (!open) {
|
|
_this.setState(function (prev) { return ({
|
|
focused: skipSetBlur ? prev.focused : false,
|
|
}); }, function () {
|
|
!skipSetBlur && _this.deferBlur();
|
|
_this.setState({ inputValue: null });
|
|
});
|
|
}
|
|
});
|
|
};
|
|
_this.inputOk = function () { return dateFns.isDate(_this.state.preSelection); };
|
|
_this.isCalendarOpen = function () {
|
|
return _this.props.open === undefined
|
|
? _this.state.open && !_this.props.disabled && !_this.props.readOnly
|
|
: _this.props.open;
|
|
};
|
|
_this.handleFocus = function (event) {
|
|
var _a, _b;
|
|
var isAutoReFocus = _this.state.wasHidden;
|
|
var isOpenAllowed = isAutoReFocus ? _this.state.open : true;
|
|
if (isAutoReFocus) {
|
|
_this.resetHiddenStatus();
|
|
}
|
|
if (!_this.state.preventFocus) {
|
|
(_b = (_a = _this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
if (isOpenAllowed &&
|
|
!_this.props.preventOpenOnFocus &&
|
|
!_this.props.readOnly) {
|
|
_this.setOpen(true);
|
|
}
|
|
}
|
|
_this.setState({ focused: true });
|
|
};
|
|
_this.sendFocusBackToInput = function () {
|
|
// Clear previous timeout if it exists
|
|
if (_this.preventFocusTimeout) {
|
|
_this.clearPreventFocusTimeout();
|
|
}
|
|
// close the popper and refocus the input
|
|
// stop the input from auto opening onFocus
|
|
// setFocus to the input
|
|
_this.setState({ preventFocus: true }, function () {
|
|
_this.preventFocusTimeout = setTimeout(function () {
|
|
_this.setFocus();
|
|
_this.setState({ preventFocus: false });
|
|
});
|
|
});
|
|
};
|
|
_this.cancelFocusInput = function () {
|
|
clearTimeout(_this.inputFocusTimeout);
|
|
_this.inputFocusTimeout = undefined;
|
|
};
|
|
_this.deferFocusInput = function () {
|
|
_this.cancelFocusInput();
|
|
_this.inputFocusTimeout = setTimeout(function () { return _this.setFocus(); }, 1);
|
|
};
|
|
_this.handleDropdownFocus = function () {
|
|
_this.cancelFocusInput();
|
|
};
|
|
_this.resetInputValue = function () {
|
|
_this.setState(_assign(_assign({}, _this.state), { inputValue: null }));
|
|
};
|
|
_this.handleBlur = function (event) {
|
|
var _a, _b;
|
|
if (!_this.state.open || _this.props.withPortal || _this.props.showTimeInput) {
|
|
(_b = (_a = _this.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
}
|
|
// If user cleared the input via a mask library (inputValue has no date-like
|
|
// characters), clear the selection on blur (fixes issue #5814 with mask inputs)
|
|
var inputValue = _this.state.inputValue;
|
|
if (typeof inputValue === "string" && inputValue.length > 0) {
|
|
// Check if input looks like a cleared mask (no alphanumeric characters)
|
|
// This distinguishes between:
|
|
// - "__/__/____" (cleared mask) → should clear selection
|
|
// - "2025-02-45" (invalid date) → should keep previous selection
|
|
var hasDateCharacters = /[a-zA-Z0-9]/.test(inputValue);
|
|
if (!hasDateCharacters && _this.props.selected) {
|
|
_this.setSelected(null, undefined, true);
|
|
}
|
|
}
|
|
_this.resetInputValue();
|
|
if (_this.state.open && _this.props.open === false) {
|
|
_this.setOpen(false);
|
|
}
|
|
_this.setState({ focused: false });
|
|
};
|
|
_this.handleCalendarClickOutside = function (event) {
|
|
var _a, _b;
|
|
// Call user's onClickOutside first, allowing them to call preventDefault()
|
|
(_b = (_a = _this.props).onClickOutside) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
// Only close if not prevented and not inline
|
|
if (!_this.props.inline && !event.defaultPrevented) {
|
|
_this.setOpen(false);
|
|
}
|
|
if (_this.props.withPortal) {
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
// handleChange is called when user types in the textbox
|
|
_this.handleChange = function () {
|
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
var allArgs = [];
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
allArgs[_i] = arguments[_i];
|
|
}
|
|
var event = allArgs[0];
|
|
if (_this.props.onChangeRaw) {
|
|
_this.props.onChangeRaw.apply(_this, allArgs);
|
|
if (!event ||
|
|
typeof event.isDefaultPrevented !== "function" ||
|
|
event.isDefaultPrevented()) {
|
|
return;
|
|
}
|
|
}
|
|
_this.setState({
|
|
inputValue: (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLInputElement ? event.target.value : null,
|
|
lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT,
|
|
});
|
|
var _j = _this.props, selectsRange = _j.selectsRange, startDate = _j.startDate, endDate = _j.endDate;
|
|
var dateFormat = (_a = _this.props.dateFormat) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormat;
|
|
var strictParsing = (_b = _this.props.strictParsing) !== null && _b !== void 0 ? _b : DatePicker.defaultProps.strictParsing;
|
|
var value = (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLInputElement ? event.target.value : "";
|
|
if (selectsRange) {
|
|
var rangeSeparator = _this.props.rangeSeparator;
|
|
var trimmedRangeSeparator = rangeSeparator.trim();
|
|
var _k = value
|
|
.split(dateFormat.includes(trimmedRangeSeparator)
|
|
? rangeSeparator
|
|
: trimmedRangeSeparator, 2)
|
|
.map(function (val) { return val.trim(); }), valueStart = _k[0], valueEnd = _k[1];
|
|
var startDateNew = parseDate(valueStart !== null && valueStart !== void 0 ? valueStart : "", dateFormat, _this.props.locale, strictParsing);
|
|
var endDateNew = startDateNew
|
|
? parseDate(valueEnd !== null && valueEnd !== void 0 ? valueEnd : "", dateFormat, _this.props.locale, strictParsing)
|
|
: null;
|
|
var startChanged = ((_c = safeToDate(startDate)) === null || _c === void 0 ? void 0 : _c.getTime()) !== (startDateNew === null || startDateNew === void 0 ? void 0 : startDateNew.getTime());
|
|
var endChanged = ((_d = safeToDate(endDate)) === null || _d === void 0 ? void 0 : _d.getTime()) !== (endDateNew === null || endDateNew === void 0 ? void 0 : endDateNew.getTime());
|
|
if (!startChanged && !endChanged) {
|
|
return;
|
|
}
|
|
if (startDateNew && isDayDisabled(startDateNew, _this.props)) {
|
|
return;
|
|
}
|
|
if (endDateNew && isDayDisabled(endDateNew, _this.props)) {
|
|
return;
|
|
}
|
|
// Update preSelection to keep calendar viewport consistent when reopening
|
|
// Use startDate for preSelection to match calcInitialState behavior
|
|
if (startDateNew) {
|
|
_this.setState({ preSelection: startDateNew });
|
|
}
|
|
(_f = (_e = _this.props).onChange) === null || _f === void 0 ? void 0 : _f.call(_e, [startDateNew, endDateNew], event);
|
|
}
|
|
else {
|
|
// not selectsRange
|
|
var date = parseDate(value, dateFormat, _this.props.locale, strictParsing, (_g = _this.props.selected) !== null && _g !== void 0 ? _g : undefined);
|
|
// Update selection if either (1) date was successfully parsed, or (2) input field is empty
|
|
if (date || !value) {
|
|
_this.setSelected(date, event, true);
|
|
}
|
|
else if (!_this.props.inline) {
|
|
// If full date parsing failed but we have partial input,
|
|
// try to extract date info for calendar navigation
|
|
var navDate = parseDateForNavigation(value, (_h = _this.state.preSelection) !== null && _h !== void 0 ? _h : undefined);
|
|
// Only update preSelection if navDate is valid and within min/max bounds
|
|
if (navDate &&
|
|
(!_this.props.minDate || !dateFns.isBefore(navDate, _this.props.minDate)) &&
|
|
(!_this.props.maxDate || !dateFns.isAfter(navDate, _this.props.maxDate))) {
|
|
_this.setState({ preSelection: navDate });
|
|
}
|
|
}
|
|
}
|
|
};
|
|
_this.handleSelect = function (date, event, monthSelectedIn) {
|
|
var _a;
|
|
if (_this.props.readOnly)
|
|
return;
|
|
var _b = _this.props, selectsRange = _b.selectsRange, startDate = _b.startDate, endDate = _b.endDate, locale = _b.locale, swapRange = _b.swapRange;
|
|
var dateFormat = (_a = _this.props.dateFormat) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormat;
|
|
var isDateSelectionComplete = !selectsRange ||
|
|
(startDate && !endDate && (swapRange || !isDateBefore(date, startDate)));
|
|
if (_this.props.shouldCloseOnSelect &&
|
|
!_this.props.showTimeSelect &&
|
|
isDateSelectionComplete) {
|
|
// Preventing onFocus event to fix issue
|
|
// https://github.com/Hacker0x01/react-datepicker/issues/628
|
|
_this.sendFocusBackToInput();
|
|
}
|
|
if (_this.props.onChangeRaw) {
|
|
var formattedDate = safeDateFormat(date, {
|
|
dateFormat: dateFormat,
|
|
locale: locale,
|
|
});
|
|
_this.props.onChangeRaw(event, { date: date, formattedDate: formattedDate });
|
|
}
|
|
_this.setSelected(date, event, false, monthSelectedIn);
|
|
if (_this.props.showDateSelect) {
|
|
_this.setState({ isRenderAriaLiveMessage: true });
|
|
}
|
|
if (!_this.props.shouldCloseOnSelect || _this.props.showTimeSelect) {
|
|
_this.setPreSelection(date);
|
|
}
|
|
else if (isDateSelectionComplete) {
|
|
_this.setOpen(false);
|
|
}
|
|
};
|
|
// setSelected is called either from handleChange (user typed date into textbox and it was parsed) or handleSelect (user selected date from calendar using mouse or keyboard)
|
|
_this.setSelected = function (date, event, keepInput, monthSelectedIn) {
|
|
var _a, _b;
|
|
var timeZone = _this.props.timeZone;
|
|
// If timezone is specified, convert the selected date from zoned time to UTC
|
|
// This ensures the onChange callback receives a proper UTC Date object
|
|
var changedDate = date;
|
|
if (changedDate && timeZone) {
|
|
changedDate = fromZonedTime(changedDate, timeZone);
|
|
}
|
|
// Early return if selected year/month/day is disabled
|
|
if (_this.props.showYearPicker) {
|
|
if (changedDate !== null &&
|
|
isYearDisabled(dateFns.getYear(changedDate), _this.props)) {
|
|
return;
|
|
}
|
|
}
|
|
else if (_this.props.showMonthYearPicker) {
|
|
if (changedDate !== null && isMonthDisabled(changedDate, _this.props)) {
|
|
return;
|
|
}
|
|
}
|
|
else {
|
|
if (changedDate !== null && isDayDisabled(changedDate, _this.props)) {
|
|
return;
|
|
}
|
|
}
|
|
var _c = _this.props, onChange = _c.onChange, selectsRange = _c.selectsRange, startDate = _c.startDate, endDate = _c.endDate, selectsMultiple = _c.selectsMultiple, selectedDates = _c.selectedDates, minTime = _c.minTime, swapRange = _c.swapRange;
|
|
if (!isEqual(_this.props.selected, changedDate) ||
|
|
_this.props.allowSameDay ||
|
|
selectsRange ||
|
|
selectsMultiple) {
|
|
if (changedDate !== null) {
|
|
// Preserve previously selected time if only date is currently being changed
|
|
if (_this.props.selected &&
|
|
(!keepInput ||
|
|
(!_this.props.showTimeSelect &&
|
|
!_this.props.showTimeSelectOnly &&
|
|
!_this.props.showTimeInput))) {
|
|
changedDate = setTime(changedDate, {
|
|
hour: dateFns.getHours(_this.props.selected),
|
|
minute: dateFns.getMinutes(_this.props.selected),
|
|
second: dateFns.getSeconds(_this.props.selected),
|
|
});
|
|
}
|
|
// If minTime is present then set the time to minTime
|
|
if (!keepInput &&
|
|
(_this.props.showTimeSelect || _this.props.showTimeSelectOnly)) {
|
|
if (minTime) {
|
|
changedDate = setTime(changedDate, {
|
|
hour: minTime.getHours(),
|
|
minute: minTime.getMinutes(),
|
|
second: minTime.getSeconds(),
|
|
});
|
|
}
|
|
}
|
|
if (!_this.props.inline) {
|
|
_this.setState({
|
|
preSelection: changedDate,
|
|
});
|
|
}
|
|
if (!_this.props.focusSelectedMonth) {
|
|
_this.setState({ monthSelectedIn: monthSelectedIn });
|
|
}
|
|
}
|
|
if (selectsRange) {
|
|
var onChangeRange = onChange;
|
|
var noRanges = !startDate && !endDate;
|
|
var hasStartRange = startDate && !endDate;
|
|
var hasOnlyEndRange = !startDate && !!endDate;
|
|
var isRangeFilled = startDate && endDate;
|
|
if (noRanges) {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([changedDate, null], event);
|
|
}
|
|
else if (hasStartRange) {
|
|
if (changedDate === null) {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([null, null], event);
|
|
}
|
|
else if (isDateBefore(changedDate, startDate)) {
|
|
if (swapRange) {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([changedDate, startDate], event);
|
|
}
|
|
else {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([changedDate, null], event);
|
|
}
|
|
}
|
|
else {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([startDate, changedDate], event);
|
|
}
|
|
}
|
|
else if (hasOnlyEndRange) {
|
|
if (changedDate && isDateBefore(changedDate, endDate)) {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([changedDate, endDate], event);
|
|
}
|
|
else {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([changedDate, null], event);
|
|
}
|
|
}
|
|
if (isRangeFilled) {
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([changedDate, null], event);
|
|
}
|
|
}
|
|
else if (selectsMultiple) {
|
|
var onChangeMultiple = onChange;
|
|
if (changedDate !== null) {
|
|
if (!(selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.length)) {
|
|
onChangeMultiple === null || onChangeMultiple === void 0 ? void 0 : onChangeMultiple([changedDate], event);
|
|
}
|
|
else {
|
|
var isChangedDateAlreadySelected = selectedDates.some(function (selectedDate) { return isSameDay(selectedDate, changedDate); });
|
|
if (isChangedDateAlreadySelected) {
|
|
var nextDates = selectedDates.filter(function (selectedDate) { return !isSameDay(selectedDate, changedDate); });
|
|
onChangeMultiple === null || onChangeMultiple === void 0 ? void 0 : onChangeMultiple(nextDates, event);
|
|
}
|
|
else {
|
|
onChangeMultiple === null || onChangeMultiple === void 0 ? void 0 : onChangeMultiple(__spreadArray(__spreadArray([], selectedDates, true), [changedDate], false), event);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
onChange === null || onChange === void 0 ? void 0 : onChange(changedDate, event);
|
|
}
|
|
}
|
|
if (!keepInput) {
|
|
(_b = (_a = _this.props).onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, changedDate, event);
|
|
_this.setState({ inputValue: null });
|
|
}
|
|
};
|
|
// When checking preSelection via min/maxDate, times need to be manipulated via getStartOfDay/getEndOfDay
|
|
_this.setPreSelection = function (date) {
|
|
if (_this.props.readOnly)
|
|
return;
|
|
var hasMinDate = dateFns.isDate(_this.props.minDate);
|
|
var hasMaxDate = dateFns.isDate(_this.props.maxDate);
|
|
var isValidDateSelection = true;
|
|
if (date) {
|
|
var dateStartOfDay = getStartOfDay(date);
|
|
if (hasMinDate && hasMaxDate) {
|
|
// isDayInRange uses getStartOfDay internally, so not necessary to manipulate times here
|
|
isValidDateSelection = isDayInRange(date, _this.props.minDate, _this.props.maxDate);
|
|
}
|
|
else if (hasMinDate) {
|
|
var minDateStartOfDay = getStartOfDay(_this.props.minDate);
|
|
isValidDateSelection =
|
|
dateFns.isAfter(date, minDateStartOfDay) ||
|
|
isEqual(dateStartOfDay, minDateStartOfDay);
|
|
}
|
|
else if (hasMaxDate) {
|
|
var maxDateEndOfDay = getEndOfDay(_this.props.maxDate);
|
|
isValidDateSelection =
|
|
dateFns.isBefore(date, maxDateEndOfDay) ||
|
|
isEqual(dateStartOfDay, maxDateEndOfDay);
|
|
}
|
|
}
|
|
if (isValidDateSelection) {
|
|
_this.setState({
|
|
preSelection: date,
|
|
});
|
|
}
|
|
};
|
|
_this.toggleCalendar = function () {
|
|
_this.setOpen(!_this.state.open);
|
|
};
|
|
_this.handleTimeChange = function (time, modifyDateType) {
|
|
var _a, _b;
|
|
if (_this.props.selectsMultiple) {
|
|
return;
|
|
}
|
|
var _c = _this.props, selectsRange = _c.selectsRange, startDate = _c.startDate, endDate = _c.endDate, onChange = _c.onChange, timeZone = _c.timeZone;
|
|
if (selectsRange) {
|
|
var onChangeRange = onChange;
|
|
// In range mode, apply time to the appropriate date
|
|
// If modifyDateType is specified, use that to determine which date to modify
|
|
// Otherwise, use the legacy behavior:
|
|
// - If we have a startDate but no endDate, apply time to startDate
|
|
// - If we have both, apply time to endDate
|
|
if (modifyDateType === "start") {
|
|
// Explicitly modify start date
|
|
if (startDate) {
|
|
var changedStartDate = setTime(startDate, {
|
|
hour: dateFns.getHours(time),
|
|
minute: dateFns.getMinutes(time),
|
|
});
|
|
_this.setState({
|
|
preSelection: changedStartDate,
|
|
});
|
|
// Convert from zoned time to UTC if timezone is specified
|
|
if (timeZone) {
|
|
changedStartDate = fromZonedTime(changedStartDate, timeZone);
|
|
}
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([
|
|
changedStartDate,
|
|
endDate
|
|
? timeZone
|
|
? fromZonedTime(endDate, timeZone)
|
|
: endDate
|
|
: null,
|
|
], undefined);
|
|
}
|
|
}
|
|
else if (modifyDateType === "end") {
|
|
// Explicitly modify end date
|
|
if (endDate) {
|
|
var changedEndDate = setTime(endDate, {
|
|
hour: dateFns.getHours(time),
|
|
minute: dateFns.getMinutes(time),
|
|
});
|
|
_this.setState({
|
|
preSelection: changedEndDate,
|
|
});
|
|
// Convert from zoned time to UTC if timezone is specified
|
|
if (timeZone) {
|
|
changedEndDate = fromZonedTime(changedEndDate, timeZone);
|
|
}
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([
|
|
startDate
|
|
? timeZone
|
|
? fromZonedTime(startDate, timeZone)
|
|
: startDate
|
|
: null,
|
|
changedEndDate,
|
|
], undefined);
|
|
}
|
|
}
|
|
else {
|
|
// Legacy behavior for showTimeSelect (single time picker)
|
|
var hasStartRange = startDate && !endDate;
|
|
if (hasStartRange) {
|
|
// Apply time to startDate
|
|
var changedStartDate = setTime(startDate, {
|
|
hour: dateFns.getHours(time),
|
|
minute: dateFns.getMinutes(time),
|
|
});
|
|
_this.setState({
|
|
preSelection: changedStartDate,
|
|
});
|
|
// Convert from zoned time to UTC if timezone is specified
|
|
if (timeZone) {
|
|
changedStartDate = fromZonedTime(changedStartDate, timeZone);
|
|
}
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([changedStartDate, null], undefined);
|
|
}
|
|
else if (startDate && endDate) {
|
|
// Apply time to endDate
|
|
var changedEndDate = setTime(endDate, {
|
|
hour: dateFns.getHours(time),
|
|
minute: dateFns.getMinutes(time),
|
|
});
|
|
_this.setState({
|
|
preSelection: changedEndDate,
|
|
});
|
|
// Convert from zoned time to UTC if timezone is specified
|
|
if (timeZone) {
|
|
changedEndDate = fromZonedTime(changedEndDate, timeZone);
|
|
}
|
|
onChangeRange === null || onChangeRange === void 0 ? void 0 : onChangeRange([
|
|
timeZone ? fromZonedTime(startDate, timeZone) : startDate,
|
|
changedEndDate,
|
|
], undefined);
|
|
}
|
|
else {
|
|
// No dates selected yet, just update preSelection
|
|
var changedDate = setTime(_this.getPreSelection(), {
|
|
hour: dateFns.getHours(time),
|
|
minute: dateFns.getMinutes(time),
|
|
});
|
|
_this.setState({
|
|
preSelection: changedDate,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
// Single date mode (original behavior)
|
|
var selected = _this.props.selected
|
|
? _this.props.selected
|
|
: _this.getPreSelection();
|
|
var changedDate = _this.props.selected
|
|
? time
|
|
: setTime(selected, {
|
|
hour: dateFns.getHours(time),
|
|
minute: dateFns.getMinutes(time),
|
|
});
|
|
_this.setState({
|
|
preSelection: changedDate,
|
|
});
|
|
// Convert from zoned time to UTC if timezone is specified
|
|
if (changedDate && timeZone) {
|
|
changedDate = fromZonedTime(changedDate, timeZone);
|
|
}
|
|
(_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, changedDate);
|
|
}
|
|
if (_this.props.shouldCloseOnSelect && !_this.props.showTimeInput) {
|
|
_this.sendFocusBackToInput();
|
|
_this.setOpen(false);
|
|
}
|
|
if (_this.props.showTimeInput) {
|
|
_this.setOpen(true);
|
|
}
|
|
if (_this.props.showTimeSelectOnly || _this.props.showTimeSelect) {
|
|
_this.setState({ isRenderAriaLiveMessage: true });
|
|
}
|
|
_this.setState({ inputValue: null });
|
|
};
|
|
_this.onInputClick = function () {
|
|
var _a, _b;
|
|
if (!_this.props.disabled && !_this.props.readOnly) {
|
|
_this.setOpen(true);
|
|
}
|
|
(_b = (_a = _this.props).onInputClick) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
};
|
|
_this.handleTimeOnlyArrowKey = function (eventKey) {
|
|
var _a, _b, _c, _d;
|
|
var currentTime = safeToDate(_this.props.selected) || _this.state.preSelection || newDate();
|
|
var timeIntervals = (_a = _this.props.timeIntervals) !== null && _a !== void 0 ? _a : 30;
|
|
var dateFormat = (_b = _this.props.dateFormat) !== null && _b !== void 0 ? _b : DatePicker.defaultProps.dateFormat;
|
|
var formatStr = Array.isArray(dateFormat) ? dateFormat[0] : dateFormat;
|
|
var baseDate = getStartOfDay(currentTime);
|
|
var currentMinutes = dateFns.getHours(currentTime) * 60 + dateFns.getMinutes(currentTime);
|
|
var maxMinutes = 23 * 60 + 60 - timeIntervals; // Cap at last valid interval of the day
|
|
var newTime;
|
|
if (eventKey === KeyType.ArrowUp) {
|
|
var newMinutes = Math.max(0, currentMinutes - timeIntervals);
|
|
newTime = dateFns.addMinutes(baseDate, newMinutes);
|
|
}
|
|
else {
|
|
var newMinutes = Math.min(maxMinutes, currentMinutes + timeIntervals);
|
|
newTime = dateFns.addMinutes(baseDate, newMinutes);
|
|
}
|
|
var formattedTime = formatDate(newTime, formatStr || DatePicker.defaultProps.dateFormat, _this.props.locale);
|
|
_this.setState({
|
|
preSelection: newTime,
|
|
inputValue: formattedTime,
|
|
});
|
|
if (_this.props.selectsRange || _this.props.selectsMultiple) {
|
|
return;
|
|
}
|
|
var selected = _this.props.selected
|
|
? _this.props.selected
|
|
: _this.getPreSelection();
|
|
var changedDate = _this.props.selected
|
|
? newTime
|
|
: setTime(selected, {
|
|
hour: dateFns.getHours(newTime),
|
|
minute: dateFns.getMinutes(newTime),
|
|
});
|
|
(_d = (_c = _this.props).onChange) === null || _d === void 0 ? void 0 : _d.call(_c, changedDate);
|
|
if (_this.props.showTimeSelectOnly || _this.props.showTimeSelect) {
|
|
_this.setState({ isRenderAriaLiveMessage: true });
|
|
}
|
|
requestAnimationFrame(function () {
|
|
_this.scrollToTimeOption(newTime);
|
|
});
|
|
};
|
|
_this.handleTimeOnlyEnterKey = function (event) {
|
|
var _a, _b, _c, _d;
|
|
var inputElement = event.target;
|
|
var inputValue = inputElement.value;
|
|
var dateFormat = (_a = _this.props.dateFormat) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormat;
|
|
var timeFormat = _this.props.timeFormat || "p";
|
|
var defaultTime = _this.state.preSelection || safeToDate(_this.props.selected) || newDate();
|
|
var parsedDate = parseDate(inputValue, dateFormat, _this.props.locale, (_b = _this.props.strictParsing) !== null && _b !== void 0 ? _b : false, defaultTime);
|
|
var timeToCommit = defaultTime;
|
|
if (parsedDate && isValid(parsedDate)) {
|
|
timeToCommit = parsedDate;
|
|
}
|
|
else {
|
|
var highlightedItem = ((_c = _this.calendar) === null || _c === void 0 ? void 0 : _c.containerRef.current) instanceof Element &&
|
|
_this.calendar.containerRef.current.querySelector(".react-datepicker__time-list-item[tabindex='0']");
|
|
if (highlightedItem instanceof HTMLElement) {
|
|
var itemText = (_d = highlightedItem.textContent) === null || _d === void 0 ? void 0 : _d.trim();
|
|
if (itemText) {
|
|
var itemTime = parseDate(itemText, timeFormat, _this.props.locale, false, defaultTime);
|
|
if (itemTime && isValid(itemTime)) {
|
|
timeToCommit = itemTime;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
_this.handleTimeChange(timeToCommit);
|
|
_this.setOpen(false);
|
|
_this.sendFocusBackToInput();
|
|
};
|
|
_this.scrollToTimeOption = function (time) {
|
|
var _a, _b;
|
|
if (!((_a = _this.calendar) === null || _a === void 0 ? void 0 : _a.containerRef.current)) {
|
|
return;
|
|
}
|
|
var container = _this.calendar.containerRef.current;
|
|
var timeListItems = Array.from(container.querySelectorAll(".react-datepicker__time-list-item"));
|
|
var targetItem = null;
|
|
var closestTimeDiff = Infinity;
|
|
var timeFormat = _this.props.timeFormat || "p";
|
|
for (var _i = 0, timeListItems_1 = timeListItems; _i < timeListItems_1.length; _i++) {
|
|
var item = timeListItems_1[_i];
|
|
var itemText = (_b = item.textContent) === null || _b === void 0 ? void 0 : _b.trim();
|
|
if (itemText) {
|
|
var itemTime = parseDate(itemText, timeFormat, _this.props.locale, false, time);
|
|
if (itemTime && isValid(itemTime)) {
|
|
if (isSameMinute(itemTime, time)) {
|
|
targetItem = item;
|
|
break;
|
|
}
|
|
var timeDiff = Math.abs(itemTime.getTime() - time.getTime());
|
|
if (timeDiff < closestTimeDiff) {
|
|
closestTimeDiff = timeDiff;
|
|
targetItem = item;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (targetItem) {
|
|
timeListItems.forEach(function (item) {
|
|
item.setAttribute("tabindex", "-1");
|
|
});
|
|
targetItem.setAttribute("tabindex", "0");
|
|
targetItem.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "center",
|
|
});
|
|
}
|
|
};
|
|
_this.onInputKeyDown = function (event) {
|
|
var _a, _b, _c, _d, _e, _f;
|
|
(_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
var eventKey = event.key;
|
|
if (!_this.state.open &&
|
|
!_this.props.inline &&
|
|
!_this.props.preventOpenOnFocus) {
|
|
if (eventKey === KeyType.ArrowDown ||
|
|
eventKey === KeyType.ArrowUp ||
|
|
eventKey === KeyType.Enter) {
|
|
(_c = _this.onInputClick) === null || _c === void 0 ? void 0 : _c.call(_this);
|
|
}
|
|
return;
|
|
}
|
|
if (_this.state.open && _this.props.showTimeSelectOnly) {
|
|
if (eventKey === KeyType.ArrowDown || eventKey === KeyType.ArrowUp) {
|
|
event.preventDefault();
|
|
_this.handleTimeOnlyArrowKey(eventKey);
|
|
return;
|
|
}
|
|
if (eventKey === KeyType.Enter) {
|
|
event.preventDefault();
|
|
_this.handleTimeOnlyEnterKey(event);
|
|
return;
|
|
}
|
|
}
|
|
// if calendar is open, these keys will focus the selected item
|
|
if (_this.state.open) {
|
|
if (eventKey === KeyType.ArrowDown || eventKey === KeyType.ArrowUp) {
|
|
event.preventDefault();
|
|
var selectorString = _this.props.showTimeSelectOnly
|
|
? ".react-datepicker__time-list-item[tabindex='0']"
|
|
: _this.props.showWeekPicker && _this.props.showWeekNumbers
|
|
? '.react-datepicker__week-number[tabindex="0"]'
|
|
: _this.props.showFullMonthYearPicker ||
|
|
_this.props.showMonthYearPicker
|
|
? '.react-datepicker__month-text[tabindex="0"]'
|
|
: '.react-datepicker__day[tabindex="0"]';
|
|
var selectedItem = ((_d = _this.calendar) === null || _d === void 0 ? void 0 : _d.containerRef.current) instanceof Element &&
|
|
_this.calendar.containerRef.current.querySelector(selectorString);
|
|
selectedItem instanceof HTMLElement &&
|
|
selectedItem.focus({ preventScroll: true });
|
|
return;
|
|
}
|
|
var copy = newDate(_this.state.preSelection);
|
|
if (eventKey === KeyType.Enter) {
|
|
event.preventDefault();
|
|
event.target.blur();
|
|
if (_this.inputOk() &&
|
|
_this.state.lastPreSelectChange === PRESELECT_CHANGE_VIA_NAVIGATE) {
|
|
_this.handleSelect(copy, event);
|
|
!_this.props.shouldCloseOnSelect && _this.setPreSelection(copy);
|
|
}
|
|
else {
|
|
_this.setOpen(false);
|
|
}
|
|
}
|
|
else if (eventKey === KeyType.Escape) {
|
|
event.preventDefault();
|
|
event.target.blur();
|
|
_this.sendFocusBackToInput();
|
|
_this.setOpen(false);
|
|
}
|
|
else if (eventKey === KeyType.Tab) {
|
|
_this.setOpen(false);
|
|
}
|
|
if (!_this.inputOk()) {
|
|
(_f = (_e = _this.props).onInputError) === null || _f === void 0 ? void 0 : _f.call(_e, { code: 1, msg: INPUT_ERR_1 });
|
|
}
|
|
}
|
|
};
|
|
_this.onPortalKeyDown = function (event) {
|
|
var eventKey = event.key;
|
|
if (eventKey === KeyType.Escape) {
|
|
event.preventDefault();
|
|
_this.setState({
|
|
preventFocus: true,
|
|
}, function () {
|
|
_this.setOpen(false);
|
|
setTimeout(function () {
|
|
_this.setFocus();
|
|
_this.setState({ preventFocus: false });
|
|
});
|
|
});
|
|
}
|
|
};
|
|
// keyDown events passed down to day.jsx
|
|
_this.onDayKeyDown = function (event) {
|
|
var _a, _b, _c, _d, _e, _f;
|
|
var _g = _this.props, minDate = _g.minDate, maxDate = _g.maxDate, disabledKeyboardNavigation = _g.disabledKeyboardNavigation, showWeekPicker = _g.showWeekPicker, shouldCloseOnSelect = _g.shouldCloseOnSelect, locale = _g.locale, calendarStartDay = _g.calendarStartDay, adjustDateOnChange = _g.adjustDateOnChange, inline = _g.inline;
|
|
(_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
if (disabledKeyboardNavigation)
|
|
return;
|
|
var eventKey = event.key;
|
|
var isShiftKeyActive = event.shiftKey;
|
|
var copy = newDate(_this.state.preSelection);
|
|
var calculateNewDate = function (eventKey, date) {
|
|
var newCalculatedDate = date;
|
|
switch (eventKey) {
|
|
case KeyType.ArrowRight:
|
|
newCalculatedDate = showWeekPicker
|
|
? dateFns.addWeeks(date, 1)
|
|
: dateFns.addDays(date, 1);
|
|
break;
|
|
case KeyType.ArrowLeft:
|
|
newCalculatedDate = showWeekPicker
|
|
? dateFns.subWeeks(date, 1)
|
|
: dateFns.subDays(date, 1);
|
|
break;
|
|
case KeyType.ArrowUp:
|
|
newCalculatedDate = dateFns.subWeeks(date, 1);
|
|
break;
|
|
case KeyType.ArrowDown:
|
|
newCalculatedDate = dateFns.addWeeks(date, 1);
|
|
break;
|
|
case KeyType.PageUp:
|
|
newCalculatedDate = isShiftKeyActive
|
|
? dateFns.subYears(date, 1)
|
|
: dateFns.subMonths(date, 1);
|
|
break;
|
|
case KeyType.PageDown:
|
|
newCalculatedDate = isShiftKeyActive
|
|
? dateFns.addYears(date, 1)
|
|
: dateFns.addMonths(date, 1);
|
|
break;
|
|
case KeyType.Home:
|
|
newCalculatedDate = getStartOfWeek(date, locale, calendarStartDay);
|
|
break;
|
|
case KeyType.End:
|
|
newCalculatedDate = getEndOfWeek(date);
|
|
break;
|
|
}
|
|
return newCalculatedDate;
|
|
};
|
|
var getNewDate = function (eventKey, date) {
|
|
var MAX_ITERATIONS = 40;
|
|
var eventKeyCopy = eventKey;
|
|
var validDateFound = false;
|
|
var iterations = 0;
|
|
var newSelection = calculateNewDate(eventKey, date);
|
|
while (!validDateFound) {
|
|
if (iterations >= MAX_ITERATIONS) {
|
|
newSelection = date;
|
|
break;
|
|
}
|
|
// if minDate exists and the new selection is before the min date, get the nearest date that isn't disabled
|
|
if (minDate && newSelection < minDate) {
|
|
eventKeyCopy = KeyType.ArrowRight;
|
|
newSelection = isDayDisabled(minDate, _this.props)
|
|
? calculateNewDate(eventKeyCopy, newSelection)
|
|
: minDate;
|
|
}
|
|
// if maxDate exists and the new selection is after the max date, get the nearest date that isn't disabled
|
|
if (maxDate && newSelection > maxDate) {
|
|
eventKeyCopy = KeyType.ArrowLeft;
|
|
newSelection = isDayDisabled(maxDate, _this.props)
|
|
? calculateNewDate(eventKeyCopy, newSelection)
|
|
: maxDate;
|
|
}
|
|
if (isDayDisabled(newSelection, _this.props)) {
|
|
// if PageUp and Home is pressed to a disabled date, it will try to find the next available date after
|
|
if (eventKeyCopy === KeyType.PageUp ||
|
|
eventKeyCopy === KeyType.Home) {
|
|
eventKeyCopy = KeyType.ArrowRight;
|
|
}
|
|
// if PageDown and End is pressed to a disabled date, it will try to find the next available date before
|
|
if (eventKeyCopy === KeyType.PageDown ||
|
|
eventKeyCopy === KeyType.End) {
|
|
eventKeyCopy = KeyType.ArrowLeft;
|
|
}
|
|
newSelection = calculateNewDate(eventKeyCopy, newSelection);
|
|
}
|
|
else {
|
|
validDateFound = true;
|
|
}
|
|
iterations++;
|
|
}
|
|
return newSelection;
|
|
};
|
|
if (eventKey === KeyType.Enter) {
|
|
event.preventDefault();
|
|
_this.handleSelect(copy, event);
|
|
!shouldCloseOnSelect && _this.setPreSelection(copy);
|
|
return;
|
|
}
|
|
else if (eventKey === KeyType.Escape) {
|
|
event.preventDefault();
|
|
_this.setOpen(false);
|
|
if (!_this.inputOk()) {
|
|
(_d = (_c = _this.props).onInputError) === null || _d === void 0 ? void 0 : _d.call(_c, { code: 1, msg: INPUT_ERR_1 });
|
|
}
|
|
return;
|
|
}
|
|
var newSelection = null;
|
|
switch (eventKey) {
|
|
case KeyType.ArrowLeft:
|
|
case KeyType.ArrowRight:
|
|
case KeyType.ArrowUp:
|
|
case KeyType.ArrowDown:
|
|
case KeyType.PageUp:
|
|
case KeyType.PageDown:
|
|
case KeyType.Home:
|
|
case KeyType.End:
|
|
newSelection = getNewDate(eventKey, copy);
|
|
break;
|
|
}
|
|
if (!newSelection) {
|
|
(_f = (_e = _this.props).onInputError) === null || _f === void 0 ? void 0 : _f.call(_e, { code: 1, msg: INPUT_ERR_1 });
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
_this.setState({ lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE });
|
|
if (adjustDateOnChange) {
|
|
_this.setSelected(newSelection);
|
|
}
|
|
_this.setPreSelection(newSelection);
|
|
// In inline mode, always set shouldFocusDayInline to true when navigating via keyboard.
|
|
// This ensures focus is properly transferred to the new day element regardless of
|
|
// whether the month changed. The user initiated this navigation from a focused day,
|
|
// so we should always focus the destination day.
|
|
if (inline) {
|
|
_this.setState({ shouldFocusDayInline: true });
|
|
}
|
|
};
|
|
// handle generic key down events in the popper that do not adjust or select dates
|
|
// ex: while focusing prev and next month buttons
|
|
_this.onPopperKeyDown = function (event) {
|
|
var eventKey = event.key;
|
|
if (eventKey === KeyType.Escape) {
|
|
event.preventDefault();
|
|
_this.sendFocusBackToInput();
|
|
_this.setOpen(false);
|
|
}
|
|
};
|
|
_this.onClearClick = function (event) {
|
|
if (event) {
|
|
if (event.preventDefault) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
_this.sendFocusBackToInput();
|
|
var _a = _this.props, selectsRange = _a.selectsRange, onChange = _a.onChange;
|
|
if (selectsRange) {
|
|
onChange === null || onChange === void 0 ? void 0 : onChange([null, null], event);
|
|
}
|
|
else {
|
|
onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
|
|
}
|
|
_this.setState({ inputValue: null });
|
|
};
|
|
_this.clear = function () {
|
|
_this.onClearClick();
|
|
};
|
|
_this.onScroll = function (event) {
|
|
if (typeof _this.props.closeOnScroll === "boolean" &&
|
|
_this.props.closeOnScroll) {
|
|
if (event.target === document ||
|
|
event.target === document.documentElement ||
|
|
event.target === document.body) {
|
|
_this.setOpen(false);
|
|
}
|
|
}
|
|
else if (typeof _this.props.closeOnScroll === "function") {
|
|
if (_this.props.closeOnScroll(event)) {
|
|
_this.setOpen(false);
|
|
}
|
|
}
|
|
};
|
|
_this.handleMonthSelectedInChange = function (monthSelectedIn) {
|
|
_this.setState({ monthSelectedIn: monthSelectedIn });
|
|
};
|
|
_this.renderCalendar = function () {
|
|
var _a, _b;
|
|
if (!_this.props.inline && !_this.isCalendarOpen()) {
|
|
return null;
|
|
}
|
|
return (React__default.default.createElement(Calendar, _assign({ showMonthYearDropdown: undefined, ref: function (elem) {
|
|
_this.calendar = elem;
|
|
} }, _this.props, _this.state, { setOpen: _this.setOpen, dateFormat: (_a = _this.props.dateFormatCalendar) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormatCalendar, onSelect: _this.handleSelect, onClickOutside: _this.handleCalendarClickOutside, holidays: getHolidaysMap(_this.modifyHolidays()), outsideClickIgnoreClass: _this.props.outsideClickIgnoreClass, onDropdownFocus: _this.handleDropdownFocus, onTimeChange: _this.handleTimeChange, className: _this.props.calendarClassName, container: _this.props.calendarContainer, handleOnKeyDown: _this.props.onKeyDown, handleOnDayKeyDown: _this.onDayKeyDown, setPreSelection: _this.setPreSelection, dropdownMode: (_b = _this.props.dropdownMode) !== null && _b !== void 0 ? _b : DatePicker.defaultProps.dropdownMode, onMonthSelectedInChange: _this.handleMonthSelectedInChange }), _this.props.children));
|
|
};
|
|
_this.renderAriaLiveRegion = function () {
|
|
var _a;
|
|
var locale = _this.props.locale;
|
|
var dateFormat = (_a = _this.props.dateFormat) !== null && _a !== void 0 ? _a : DatePicker.defaultProps.dateFormat;
|
|
var isContainsTime = _this.props.showTimeInput || _this.props.showTimeSelect;
|
|
var longDateFormat = isContainsTime ? "PPPPp" : "PPPP";
|
|
var ariaLiveMessage;
|
|
if (_this.props.selectsRange) {
|
|
ariaLiveMessage = "Selected start date: ".concat(safeDateFormat(_this.props.startDate, {
|
|
dateFormat: longDateFormat,
|
|
locale: locale,
|
|
}), ". ").concat(_this.props.endDate
|
|
? "End date: " +
|
|
safeDateFormat(_this.props.endDate, {
|
|
dateFormat: longDateFormat,
|
|
locale: locale,
|
|
})
|
|
: "");
|
|
}
|
|
else {
|
|
if (_this.props.showTimeSelectOnly) {
|
|
ariaLiveMessage = "Selected time: ".concat(safeDateFormat(_this.props.selected, { dateFormat: dateFormat, locale: locale }));
|
|
}
|
|
else if (_this.props.showYearPicker) {
|
|
ariaLiveMessage = "Selected year: ".concat(safeDateFormat(_this.props.selected, { dateFormat: "yyyy", locale: locale }));
|
|
}
|
|
else if (_this.props.showMonthYearPicker) {
|
|
ariaLiveMessage = "Selected month: ".concat(safeDateFormat(_this.props.selected, { dateFormat: "MMMM yyyy", locale: locale }));
|
|
}
|
|
else if (_this.props.showQuarterYearPicker) {
|
|
ariaLiveMessage = "Selected quarter: ".concat(safeDateFormat(_this.props.selected, {
|
|
dateFormat: "yyyy, QQQ",
|
|
locale: locale,
|
|
}));
|
|
}
|
|
else {
|
|
ariaLiveMessage = "Selected date: ".concat(safeDateFormat(_this.props.selected, {
|
|
dateFormat: longDateFormat,
|
|
locale: locale,
|
|
}));
|
|
}
|
|
}
|
|
return (React__default.default.createElement("span", { role: "alert", "aria-live": "polite", className: "react-datepicker__aria-live" }, ariaLiveMessage));
|
|
};
|
|
_this.renderDateInput = function () {
|
|
var _a, _b;
|
|
var _c, _d, _e, _f, _g;
|
|
var className = clsx.clsx(_this.props.className, (_a = {},
|
|
_a[_this.props.outsideClickIgnoreClass ||
|
|
DatePicker.defaultProps.outsideClickIgnoreClass] = _this.state.open,
|
|
_a));
|
|
var customInput = _this.props.customInput || React__default.default.createElement("input", { type: "text" });
|
|
var customInputRef = _this.props.customInputRef || "ref";
|
|
// Build aria props object, only including defined values to avoid
|
|
// overwriting aria attributes that may be set on the custom input
|
|
var ariaProps = {};
|
|
var ariaDescribedBy = (_c = _this.props["aria-describedby"]) !== null && _c !== void 0 ? _c : _this.props.ariaDescribedBy;
|
|
var ariaInvalid = (_d = _this.props["aria-invalid"]) !== null && _d !== void 0 ? _d : _this.props.ariaInvalid;
|
|
var ariaLabel = (_e = _this.props["aria-label"]) !== null && _e !== void 0 ? _e : _this.props.ariaLabel;
|
|
var ariaLabelledBy = (_f = _this.props["aria-labelledby"]) !== null && _f !== void 0 ? _f : _this.props.ariaLabelledBy;
|
|
var ariaRequired = (_g = _this.props["aria-required"]) !== null && _g !== void 0 ? _g : _this.props.ariaRequired;
|
|
if (ariaDescribedBy != null)
|
|
ariaProps["aria-describedby"] = ariaDescribedBy;
|
|
if (ariaInvalid != null)
|
|
ariaProps["aria-invalid"] = ariaInvalid;
|
|
if (ariaLabel != null)
|
|
ariaProps["aria-label"] = ariaLabel;
|
|
if (ariaLabelledBy != null)
|
|
ariaProps["aria-labelledby"] = ariaLabelledBy;
|
|
if (ariaRequired != null)
|
|
ariaProps["aria-required"] = ariaRequired;
|
|
return React.cloneElement(customInput, _assign((_b = {}, _b[customInputRef] = function (input) {
|
|
_this.input = input;
|
|
}, _b.value = _this.getInputValue(), _b.onBlur = _this.handleBlur, _b.onChange = _this.handleChange, _b.onClick = _this.onInputClick, _b.onFocus = _this.handleFocus, _b.onKeyDown = _this.onInputKeyDown, _b.id = _this.props.id, _b.name = _this.props.name, _b.form = _this.props.form, _b.autoFocus = _this.props.autoFocus, _b.placeholder = _this.props.placeholderText, _b.disabled = _this.props.disabled, _b.autoComplete = _this.props.autoComplete, _b.className = clsx.clsx(customInput.props.className, className), _b.title = _this.props.title, _b.readOnly = _this.props.readOnly, _b.required = _this.props.required, _b.tabIndex = _this.props.tabIndex, _b), ariaProps));
|
|
};
|
|
_this.renderClearButton = function () {
|
|
var _a = _this.props, isClearable = _a.isClearable, disabled = _a.disabled, selected = _a.selected, startDate = _a.startDate, endDate = _a.endDate, clearButtonTitle = _a.clearButtonTitle, _b = _a.clearButtonClassName, clearButtonClassName = _b === void 0 ? "" : _b, _c = _a.ariaLabelClose, ariaLabelClose = _c === void 0 ? "Close" : _c, selectedDates = _a.selectedDates, readOnly = _a.readOnly;
|
|
if (isClearable &&
|
|
!readOnly &&
|
|
(selected != null ||
|
|
startDate != null ||
|
|
endDate != null ||
|
|
(selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.length))) {
|
|
return (React__default.default.createElement("button", { type: "button", className: clsx.clsx("react-datepicker__close-icon", clearButtonClassName, { "react-datepicker__close-icon--disabled": disabled }), disabled: disabled, "aria-label": ariaLabelClose, onClick: _this.onClearClick, title: clearButtonTitle, tabIndex: -1 }));
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
};
|
|
_this.state = _this.calcInitialState();
|
|
_this.preventFocusTimeout = undefined;
|
|
return _this;
|
|
}
|
|
Object.defineProperty(DatePicker, "defaultProps", {
|
|
get: function () {
|
|
return {
|
|
allowSameDay: false,
|
|
dateFormat: "MM/dd/yyyy",
|
|
dateFormatCalendar: "LLLL yyyy",
|
|
disabled: false,
|
|
disabledKeyboardNavigation: false,
|
|
dropdownMode: "scroll",
|
|
preventOpenOnFocus: false,
|
|
monthsShown: 1,
|
|
outsideClickIgnoreClass: OUTSIDE_CLICK_IGNORE_CLASS,
|
|
readOnly: false,
|
|
rangeSeparator: DATE_RANGE_SEPARATOR,
|
|
withPortal: false,
|
|
selectsDisabledDaysInRange: false,
|
|
shouldCloseOnSelect: true,
|
|
showTimeSelect: false,
|
|
showTimeInput: false,
|
|
showPreviousMonths: false,
|
|
showMonthYearPicker: false,
|
|
showFullMonthYearPicker: false,
|
|
showTwoColumnMonthYearPicker: false,
|
|
showFourColumnMonthYearPicker: false,
|
|
showYearPicker: false,
|
|
showQuarterYearPicker: false,
|
|
showWeekPicker: false,
|
|
strictParsing: false,
|
|
swapRange: false,
|
|
timeIntervals: 30,
|
|
timeCaption: "Time",
|
|
previousMonthAriaLabel: "Previous Month",
|
|
previousMonthButtonLabel: "Previous Month",
|
|
nextMonthAriaLabel: "Next Month",
|
|
nextMonthButtonLabel: "Next Month",
|
|
previousYearAriaLabel: "Previous Year",
|
|
previousYearButtonLabel: "Previous Year",
|
|
nextYearAriaLabel: "Next Year",
|
|
nextYearButtonLabel: "Next Year",
|
|
timeInputLabel: "Time",
|
|
enableTabLoop: true,
|
|
yearItemNumber: DEFAULT_YEAR_ITEM_NUMBER,
|
|
focusSelectedMonth: false,
|
|
showPopperArrow: true,
|
|
excludeScrollbar: true,
|
|
customTimeInput: null,
|
|
calendarStartDay: undefined,
|
|
toggleCalendarOnIconClick: false,
|
|
usePointerEvent: false,
|
|
};
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
DatePicker.prototype.componentDidMount = function () {
|
|
window.addEventListener("scroll", this.onScroll, true);
|
|
document.addEventListener("visibilitychange", this.setHiddenStateOnVisibilityHidden);
|
|
};
|
|
DatePicker.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
var _a, _b, _c, _d;
|
|
// Update preSelection when selected/startDate prop changes to a different month/year.
|
|
// This ensures the calendar view updates when dates are programmatically set
|
|
// (e.g., via "Today" or "This Week" buttons). (Fix for #3367)
|
|
if (this.props.selectsRange &&
|
|
hasPreSelectionChanged(prevProps.startDate, this.props.startDate)) {
|
|
this.setPreSelection(this.props.startDate);
|
|
}
|
|
else if (hasPreSelectionChanged(prevProps.selected, this.props.selected)) {
|
|
this.setPreSelection(this.props.selected);
|
|
}
|
|
if (this.state.monthSelectedIn !== undefined &&
|
|
prevProps.monthsShown !== this.props.monthsShown) {
|
|
this.setState({ monthSelectedIn: 0 });
|
|
}
|
|
// Reset monthSelectedIn when calendar opens for range selection
|
|
// This ensures startDate is displayed as the first month when reopening
|
|
// (Fix for #5939), but we don't reset during active selection to avoid
|
|
// the view jumping when clicking dates in the second calendar (Fix for #5275)
|
|
if (this.props.selectsRange &&
|
|
prevState.open === false &&
|
|
this.state.open === true &&
|
|
this.state.monthSelectedIn !== 0) {
|
|
this.setState({ monthSelectedIn: 0 });
|
|
}
|
|
if (prevProps.highlightDates !== this.props.highlightDates) {
|
|
this.setState({
|
|
highlightDates: getHighLightDaysMap(this.props.highlightDates),
|
|
});
|
|
}
|
|
if (!prevState.focused &&
|
|
!isEqual(prevProps.selected, this.props.selected)) {
|
|
this.setState({ inputValue: null });
|
|
}
|
|
if (prevState.open !== this.state.open) {
|
|
if (prevState.open === false && this.state.open === true) {
|
|
(_b = (_a = this.props).onCalendarOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
}
|
|
if (prevState.open === true && this.state.open === false) {
|
|
(_d = (_c = this.props).onCalendarClose) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
}
|
|
}
|
|
};
|
|
DatePicker.prototype.componentWillUnmount = function () {
|
|
this.clearPreventFocusTimeout();
|
|
window.removeEventListener("scroll", this.onScroll, true);
|
|
document.removeEventListener("visibilitychange", this.setHiddenStateOnVisibilityHidden);
|
|
};
|
|
DatePicker.prototype.renderInputContainer = function () {
|
|
var _a = this.props, showIcon = _a.showIcon, icon = _a.icon, calendarIconClassname = _a.calendarIconClassname, calendarIconClassName = _a.calendarIconClassName, toggleCalendarOnIconClick = _a.toggleCalendarOnIconClick;
|
|
var open = this.state.open;
|
|
if (calendarIconClassname) {
|
|
console.warn("calendarIconClassname props is deprecated. should use calendarIconClassName props.");
|
|
}
|
|
return (React__default.default.createElement("div", { className: "react-datepicker__input-container".concat(showIcon ? " react-datepicker__view-calendar-icon" : "") },
|
|
showIcon && (React__default.default.createElement(CalendarIcon, _assign({ icon: icon, className: clsx.clsx(calendarIconClassName, !calendarIconClassName && calendarIconClassname, open && "react-datepicker-ignore-onclickoutside") }, (toggleCalendarOnIconClick
|
|
? {
|
|
onClick: this.toggleCalendar,
|
|
}
|
|
: null)))),
|
|
this.state.isRenderAriaLiveMessage && this.renderAriaLiveRegion(),
|
|
this.renderDateInput(),
|
|
this.renderClearButton()));
|
|
};
|
|
DatePicker.prototype.render = function () {
|
|
var calendar = this.renderCalendar();
|
|
if (this.props.inline)
|
|
return calendar;
|
|
if (this.props.withPortal) {
|
|
var portalContainer = this.state.open ? (React__default.default.createElement(TabLoop, { enableTabLoop: this.props.enableTabLoop },
|
|
React__default.default.createElement("div", { className: "react-datepicker__portal", tabIndex: -1, onKeyDown: this.onPortalKeyDown }, calendar))) : null;
|
|
if (this.state.open && this.props.portalId) {
|
|
portalContainer = (React__default.default.createElement(Portal, _assign({ portalId: this.props.portalId }, this.props), portalContainer));
|
|
}
|
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
this.renderInputContainer(),
|
|
portalContainer));
|
|
}
|
|
return (React__default.default.createElement(PopperComponent, _assign({}, this.props, { className: this.props.popperClassName, hidePopper: !this.isCalendarOpen(), targetComponent: this.renderInputContainer(), popperComponent: calendar, popperOnKeyDown: this.onPopperKeyDown, showArrow: this.props.showPopperArrow, monthHeaderPosition: this.props.monthHeaderPosition })));
|
|
};
|
|
return DatePicker;
|
|
}(React.Component));
|
|
var PRESELECT_CHANGE_VIA_INPUT = "input";
|
|
var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
|
|
|
|
exports.CalendarContainer = CalendarContainer;
|
|
exports.DatePicker = DatePicker;
|
|
exports.default = DatePicker;
|
|
exports.getDefaultLocale = getDefaultLocale;
|
|
exports.registerLocale = registerLocale;
|
|
exports.setDefaultLocale = setDefaultLocale;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
}));
|
|
//# sourceMappingURL=react-datepicker.js.map
|