first_commit

This commit is contained in:
2026-01-12 12:43:50 +01:00
parent c75b3e9563
commit 69e186a7f1
15289 changed files with 1616360 additions and 1944 deletions
+190
View File
@@ -0,0 +1,190 @@
import React, { Component } from "react";
import { type Locale } from "./date_utils";
import InputTime from "./input_time";
import Month from "./month";
import MonthDropdown from "./month_dropdown";
import MonthYearDropdown from "./month_year_dropdown";
import Time from "./time";
import Year from "./year";
import YearDropdown from "./year_dropdown";
import type { ClickOutsideHandler } from "./click_outside_wrapper";
import type { Day } from "date-fns";
interface YearDropdownProps extends React.ComponentPropsWithoutRef<typeof YearDropdown> {
}
interface MonthDropdownProps extends React.ComponentPropsWithoutRef<typeof MonthDropdown> {
}
interface MonthYearDropdownProps extends React.ComponentPropsWithoutRef<typeof MonthYearDropdown> {
}
interface YearProps extends React.ComponentPropsWithoutRef<typeof Year> {
}
interface MonthProps extends React.ComponentPropsWithoutRef<typeof Month> {
}
interface TimeProps extends React.ComponentPropsWithoutRef<typeof Time> {
}
interface InputTimeProps extends React.ComponentPropsWithoutRef<typeof InputTime> {
}
export declare const OUTSIDE_CLICK_IGNORE_CLASS = "react-datepicker-ignore-onclickoutside";
export interface ReactDatePickerCustomHeaderProps {
date: CalendarState["date"];
customHeaderCount: number;
monthDate: Date;
changeMonth: (month: number) => void;
changeYear: (year: number) => void;
decreaseMonth: VoidFunction;
increaseMonth: VoidFunction;
decreaseYear: VoidFunction;
increaseYear: VoidFunction;
prevMonthButtonDisabled: boolean;
nextMonthButtonDisabled: boolean;
prevYearButtonDisabled: boolean;
nextYearButtonDisabled: boolean;
visibleYearsRange?: {
startYear: number;
endYear: number;
};
}
export interface ReactDatePickerCustomDayNameProps {
day: Date;
shortName: string;
fullName: string;
locale?: Locale;
customDayNameCount: number;
}
type CalendarProps = React.PropsWithChildren<Omit<YearDropdownProps, "date" | "onChange" | "year" | "minDate" | "maxDate"> & Omit<MonthDropdownProps, "month" | "onChange"> & Omit<MonthYearDropdownProps, "date" | "onChange" | "minDate" | "maxDate"> & Omit<YearProps, "onDayClick" | "selectingDate" | "clearSelectingDate" | "onYearMouseEnter" | "onYearMouseLeave" | "minDate" | "maxDate"> & Omit<MonthProps, "ariaLabelPrefix" | "onChange" | "day" | "onDayClick" | "handleOnKeyDown" | "handleOnMonthKeyDown" | "onDayMouseEnter" | "onMouseLeave" | "orderInDisplay" | "monthShowsDuplicateDaysEnd" | "monthShowsDuplicateDaysStart" | "minDate" | "maxDate"> & Omit<TimeProps, "onChange" | "format" | "intervals" | "monthRef"> & Omit<InputTimeProps, "date" | "timeString" | "onChange"> & {
selectsRange?: boolean;
startDate?: Date | null;
endDate?: Date | null;
className?: string;
container?: React.ElementType;
showYearPicker?: boolean;
showMonthYearPicker?: boolean;
showQuarterYearPicker?: boolean;
showTimeSelect?: boolean;
showTimeInput?: boolean;
showYearDropdown?: boolean;
showMonthDropdown?: boolean;
yearItemNumber?: number;
useWeekdaysShort?: boolean;
forceShowMonthNavigation?: boolean;
showDisabledMonthNavigation?: boolean;
formatWeekDay?: (date: string) => string;
onDropdownFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
calendarStartDay?: Day;
weekDayClassName?: (date: Date) => string;
onMonthChange?: (date: Date) => void;
onYearChange?: (date: Date) => void;
onDayMouseEnter?: (date: Date) => void;
onMonthMouseLeave?: VoidFunction;
weekLabel?: string;
onClickOutside: ClickOutsideHandler;
outsideClickIgnoreClass?: string;
previousMonthButtonLabel?: React.ReactNode;
previousYearButtonLabel?: React.ReactNode;
previousMonthAriaLabel?: string;
previousYearAriaLabel?: string;
nextMonthButtonLabel?: React.ReactNode;
nextYearButtonLabel?: React.ReactNode;
nextMonthAriaLabel?: string;
nextYearAriaLabel?: string;
showPreviousMonths?: boolean;
monthsShown?: number;
monthSelectedIn?: number;
onMonthSelectedInChange?: (monthSelectedIn: number) => void;
onSelect: (day: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, monthSelectedIn?: number) => void;
renderCustomHeader?: (props: ReactDatePickerCustomHeaderProps) => React.ReactElement;
renderCustomDayName?: (props: ReactDatePickerCustomDayNameProps) => React.ReactNode;
monthHeaderPosition?: "top" | "middle" | "bottom";
onYearMouseEnter?: YearProps["onYearMouseEnter"];
onYearMouseLeave?: YearProps["onYearMouseLeave"];
monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"];
handleOnDayKeyDown?: MonthProps["handleOnKeyDown"];
handleOnKeyDown?: (event: React.KeyboardEvent<HTMLDivElement> | React.KeyboardEvent<HTMLLIElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
onTimeChange?: (time: Date, modifyDateType?: "start" | "end") => void;
timeFormat?: TimeProps["format"];
timeIntervals?: TimeProps["intervals"];
} & (({
showMonthYearDropdown: true;
} & Pick<YearDropdownProps, "maxDate" | "minDate">) | ({
showMonthYearDropdown?: never;
} & Pick<YearDropdownProps, "maxDate" | "minDate"> & Pick<YearProps, "maxDate" | "minDate"> & Pick<MonthProps, "maxDate" | "minDate">))>;
interface CalendarState extends Pick<YearProps, "selectingDate">, Pick<MonthProps, "selectingDate"> {
date: Required<YearProps>["date"];
monthContainer: TimeProps["monthRef"];
isRenderAriaLiveMessage: boolean;
}
export default class Calendar extends Component<CalendarProps, CalendarState> {
static get defaultProps(): {
monthsShown: number;
forceShowMonthNavigation: boolean;
outsideClickIgnoreClass: string;
timeCaption: string;
previousYearButtonLabel: string;
nextYearButtonLabel: string;
previousMonthButtonLabel: string;
nextMonthButtonLabel: string;
yearItemNumber: number;
monthHeaderPosition: string;
};
constructor(props: CalendarProps);
componentDidMount(): void;
componentDidUpdate(prevProps: CalendarProps): void;
containerRef: React.RefObject<HTMLDivElement | null>;
monthContainer: CalendarState["monthContainer"];
assignMonthContainer: void | undefined;
handleClickOutside: (event: MouseEvent) => void;
setClickOutsideRef: () => HTMLDivElement | null;
handleDropdownFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
getDateInView: () => Date;
increaseMonth: () => void;
decreaseMonth: () => void;
handleDayClick: (day: Date, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, monthSelectedIn?: number) => void;
handleDayMouseEnter: (day: Date) => void;
handleMonthMouseLeave: () => void;
handleYearMouseEnter: (event: React.MouseEvent<HTMLDivElement>, year: number) => void;
handleYearMouseLeave: (event: React.MouseEvent<HTMLDivElement>, year: number) => void;
handleYearChange: (date: Date) => void;
getEnabledPreSelectionDateForMonth: (date: Date) => Date | null;
handleMonthChange: (date: Date) => void;
handleCustomMonthChange: (date: Date) => void;
handleMonthYearChange: (date: Date) => void;
changeYear: (year: number) => void;
changeMonth: (month: number) => void;
changeMonthYear: (monthYear: Date) => void;
header: (date?: Date, customDayNameCount?: number) => React.ReactElement[];
formatWeekday: (day: Date, locale?: Locale) => string;
decreaseYear: () => void;
clearSelectingDate: () => void;
renderPreviousButton: () => React.ReactElement | void;
increaseYear: () => void;
renderNextButton: () => React.ReactElement | void;
renderCurrentMonth: (date?: Date) => React.ReactElement;
renderYearDropdown: (overrideHide?: boolean) => React.ReactElement | undefined;
renderMonthDropdown: (overrideHide?: boolean) => React.ReactElement | undefined;
renderMonthYearDropdown: (overrideHide?: boolean) => React.ReactElement | undefined;
handleTodayButtonClick: (event: React.MouseEvent<HTMLDivElement>) => void;
renderTodayButton: () => React.ReactElement | undefined;
renderDayNamesHeader: (monthDate: Date, customDayNameCount?: number) => React.JSX.Element;
renderDefaultHeader: ({ monthDate, i }: {
monthDate: Date;
i: number;
}) => React.JSX.Element;
renderCustomHeader: (headerArgs: {
monthDate: Date;
i: number;
}) => React.JSX.Element | null;
renderYearHeader: ({ monthDate, }: {
monthDate: Date;
}) => React.ReactElement;
renderHeader: ({ monthDate, i, }: {
monthDate: Date;
i?: number;
}) => React.ReactElement | null;
renderMonths: () => React.ReactElement[] | undefined;
renderYears: () => React.ReactElement | undefined;
renderTimeSection: () => React.ReactElement | undefined;
renderInputTimeSection: () => React.ReactElement | undefined;
renderAriaLiveRegion: () => React.ReactElement;
renderChildren: () => React.ReactElement | undefined;
render(): React.ReactElement;
}
export {};
+8
View File
@@ -0,0 +1,8 @@
import React, { type HTMLAttributes } from "react";
export interface CalendarContainerProps extends React.PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
showTimeSelectOnly?: boolean;
showTime?: boolean;
inline?: boolean;
}
declare const CalendarContainer: React.FC<CalendarContainerProps>;
export default CalendarContainer;
+27
View File
@@ -0,0 +1,27 @@
import React from "react";
interface CalendarIconProps {
icon?: string | React.ReactNode;
className?: string;
onClick?: (event: React.MouseEvent) => void;
}
/**
* `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.
*/
declare const CalendarIcon: React.FC<CalendarIconProps>;
export default CalendarIcon;
+12
View File
@@ -0,0 +1,12 @@
import React from "react";
export type ClickOutsideHandler = (event: MouseEvent) => void;
interface ClickOutsideWrapperProps {
onClickOutside: ClickOutsideHandler;
className?: string;
children: React.ReactNode;
containerRef?: React.RefObject<HTMLDivElement | null>;
style?: React.CSSProperties;
ignoreClass?: string;
}
export declare const ClickOutsideWrapper: React.FC<ClickOutsideWrapperProps>;
export {};
+567
View File
@@ -0,0 +1,567 @@
import { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, getDate, getDay, getHours, getMinutes, getMonth, getQuarter, getSeconds, getTime, getYear, isAfter, isBefore, isDate, set, setHours, setMinutes, setMonth, setQuarter, setYear, subDays, subMonths, subQuarters, subWeeks, subYears } from "date-fns";
import type { Locale as DateFnsLocale, Day } from "date-fns";
export type TimeZone = string;
/**
* Resets the date-fns-tz module cache. Used for testing.
* @internal
*/
export declare function __resetDateFnsTzCache(): void;
/**
* Sets the date-fns-tz module to null to simulate it not being installed. Used for testing.
* @internal
*/
export declare function __setDateFnsTzNull(): void;
/**
* 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
*/
export declare function toZonedTime(date: Date, timeZone?: TimeZone): Date;
/**
* 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
*/
export declare function fromZonedTime(date: Date, timeZone?: TimeZone): Date;
/**
* Formats a date in the specified timezone.
* If no timezone is specified, uses the standard format function.
*
* @param date - The date to format
* @param formatStr - The format string
* @param timeZone - The IANA timezone identifier
* @param locale - The locale object
* @returns The formatted date string
*/
export declare function formatInTimeZone(date: Date, formatStr: string, timeZone?: TimeZone, locale?: DateFnsLocale): string;
/**
* Gets the current date/time in the specified timezone.
*
* @param timeZone - The IANA timezone identifier
* @returns The current date in the specified timezone
*/
export declare function nowInTimeZone(timeZone?: TimeZone): Date;
export type DateNumberType = Day;
interface LocaleObj extends Pick<DateFnsLocale, "options" | "formatLong" | "localize" | "match"> {
}
export type Locale = string | LocaleObj;
export declare enum KeyType {
ArrowUp = "ArrowUp",
ArrowDown = "ArrowDown",
ArrowLeft = "ArrowLeft",
ArrowRight = "ArrowRight",
PageUp = "PageUp",
PageDown = "PageDown",
Home = "Home",
End = "End",
Enter = "Enter",
Space = " ",
Tab = "Tab",
Escape = "Escape",
Backspace = "Backspace",
X = "x"
}
export declare const DEFAULT_YEAR_ITEM_NUMBER = 12;
export declare function newDate(value?: string | Date | number | null): 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.
*/
export declare function parseDate(value: string, dateFormat: string | string[], locale: Locale | undefined, strictParsing: boolean, refDate?: Date): Date | 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.
*/
export declare function parseDateForNavigation(value: string, refDate?: Date): Date | null;
export { isDate, set };
/**
* 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.
*/
export declare function isValid(date: Date): boolean;
/**
* 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
*/
export declare function safeToDate(date: Date | null | undefined): Date | null;
/**
* Formats a date.
*
* @param date - The date.
* @param formatStr - The format string.
* @param locale - The locale.
* @returns - The formatted date.
*/
export declare function formatDate(date: Date, formatStr: string, locale?: Locale): string;
/**
* 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.
*/
export declare function safeDateFormat(date: Date | null | undefined, { dateFormat, locale }: {
dateFormat: string | string[];
locale?: Locale;
}): string;
/**
* Used as a delimiter to separate two dates when formatting a date range
*/
export declare const 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.
*/
export declare function safeDateRangeFormat(startDate: Date | null | undefined, endDate: Date | null | undefined, props: {
dateFormat: string | string[];
locale?: Locale;
rangeSeparator?: string;
}): string;
/**
* Safely formats multiple dates.
*
* @param dates - The dates.
* @param props - The props.
* @returns - The formatted dates or an empty string.
*/
export declare function safeMultipleDatesFormat(dates: Date[], props: {
dateFormat: string | string[];
locale?: Locale;
}): string;
/**
* 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.
*/
export declare function setTime(date: Date, { hour, minute, second }: {
hour?: number | undefined;
minute?: number | undefined;
second?: number | undefined;
}): Date;
export { setHours, setMinutes, setMonth, setQuarter, setYear };
export { getDate, getDay, getHours, getMinutes, getMonth, getQuarter, getSeconds, getTime, getYear, };
/**
* Gets the week of the year for a given date.
*
* @param date - The date.
* @returns - The week of the year.
*/
export declare function getWeek(date: Date): number;
/**
* 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.
*/
export declare function getDayOfWeekCode(day: Date, locale?: Locale): string;
/**
* Gets the start of the day for a given date.
*
* @param date - The date.
* @returns - The start of the day.
*/
export declare function getStartOfDay(date: Date): 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.
*/
export declare function getStartOfWeek(date: Date, locale?: Locale, calendarStartDay?: Day): Date;
/**
* Gets the start of the month for a given date.
*
* @param date - The date.
* @returns - The start of the month.
*/
export declare function getStartOfMonth(date: Date): Date;
/**
* Gets the start of the year for a given date.
*
* @param date - The date.
* @returns - The start of the year.
*/
export declare function getStartOfYear(date: Date): Date;
/**
* Gets the start of the quarter for a given date.
*
* @param date - The date.
* @returns - The start of the quarter.
*/
export declare function getStartOfQuarter(date: Date): Date;
/**
* Gets the start of today.
*
* @returns - The start of today.
*/
export declare function getStartOfToday(): Date;
/**
* Gets the end of the day for a given date.
*
* @param date - The date.
* @returns - The end of the day.
*/
export declare function getEndOfDay(date: Date): Date;
/**
* Gets the end of the week for a given date.
*
* @param date - The date.
* @returns - The end of the week.
*/
export declare function getEndOfWeek(date: Date): Date;
/**
* Gets the end of the month for a given date.
*
* @param date - The date.
* @returns - The end of the month.
*/
export declare function getEndOfMonth(date: Date): Date;
export { addDays, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, };
export { addHours, subDays, subMonths, subQuarters, subWeeks, subYears };
export { isAfter, isBefore };
/**
* 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.
*/
export declare function isSameYear(date1: Date | null, date2: Date | null): boolean;
/**
* 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.
*/
export declare function isSameMonth(date1: Date | null, date2?: Date | null): boolean;
/**
* 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.
*/
export declare function isSameQuarter(date1: Date | null, date2: Date | null): boolean;
/**
* 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.
*/
export declare function isSameDay(date1?: Date | null, date2?: Date | null): boolean;
/**
* 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.
*/
export declare function isEqual(date1: Date | null | undefined, date2: Date | null | undefined): boolean;
/**
* 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.
*/
export declare function isDayInRange(day: Date, startDate: Date, endDate: Date): boolean;
/**
* Gets the difference in days between two dates.
*
* @param date1 - The first date.
* @param date2 - The second date.
* @returns - The difference in days.
*/
export declare function getDaysDiff(date1: Date, date2: Date): number;
/**
* Registers a locale.
*
* @param localeName - The name of the locale.
* @param localeData - The data of the locale.
*/
export declare function registerLocale(localeName: string, localeData: LocaleObj): void;
/**
* Sets the default locale.
*
* @param localeName - The name of the locale.
*/
export declare function setDefaultLocale(localeName?: string): void;
/**
* Gets the default locale.
*
* @returns - The default locale.
*/
export declare function getDefaultLocale(): string | undefined;
/**
* Gets the locale object.
*
* @param localeSpec - The locale specification.
* @returns - The locale object.
*/
export declare function getLocaleObject(localeSpec?: Locale): LocaleObj | undefined;
/**
* 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.
*/
export declare function getFormattedWeekdayInLocale(date: Date, formatFunc: (date: string) => string, locale?: Locale): string;
/**
* 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.
*/
export declare function getWeekdayMinInLocale(date: Date, locale?: Locale): string;
/**
* 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.
*/
export declare function getWeekdayShortInLocale(date: Date, locale?: Locale): string;
/**
* Gets the month in a given locale.
*
* @param month - The month to format.
* @param locale - The locale to use for formatting.
* @returns - The month.
*/
export declare function getMonthInLocale(month: number, locale?: Locale): string;
/**
* 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.
*/
export declare function getMonthShortInLocale(month: number, locale?: Locale): string;
/**
* 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.
*/
export declare function getQuarterShortInLocale(quarter: number, locale?: Locale): string;
export interface DateFilterOptions {
minDate?: Date;
maxDate?: Date;
excludeDates?: {
date: Date;
message?: string;
}[] | Date[];
excludeDateIntervals?: {
start: Date;
end: Date;
}[];
includeDates?: Date[];
includeDateIntervals?: {
start: Date;
end: Date;
}[];
filterDate?: (date: Date) => boolean;
yearItemNumber?: number;
}
export type DateFilterOptionsWithDisabled = DateFilterOptions & {
disabled?: boolean;
};
/**
* 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.
*/
export declare function isDayDisabled(day: Date, { minDate, maxDate, excludeDates, excludeDateIntervals, includeDates, includeDateIntervals, filterDate, disabled, }?: DateFilterOptionsWithDisabled): boolean;
/**
* 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.
*/
export declare function isDayExcluded(day: Date, { excludeDates, excludeDateIntervals, }?: Pick<DateFilterOptions, "excludeDates" | "excludeDateIntervals">): boolean;
export declare function isMonthDisabled(month: Date, { minDate, maxDate, excludeDates, includeDates, filterDate, }?: Pick<DateFilterOptions, "minDate" | "maxDate" | "excludeDates" | "includeDates" | "filterDate">): boolean;
export declare function isMonthInRange(startDate: Date, endDate: Date, m: number, day: Date): boolean;
/**
* 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
*/
export declare function isMonthYearDisabled(date: Date, { minDate, maxDate, excludeDates, includeDates, }?: Pick<DateFilterOptions, "minDate" | "maxDate" | "excludeDates" | "includeDates">): boolean;
export declare function isQuarterDisabled(quarter: Date, { minDate, maxDate, excludeDates, includeDates, filterDate, disabled, }?: Pick<DateFilterOptionsWithDisabled, "minDate" | "maxDate" | "excludeDates" | "includeDates" | "filterDate" | "disabled">): boolean;
export declare function isYearInRange(year: number, start?: Date | null, end?: Date | null): boolean;
export declare function isYearDisabled(year: number, { minDate, maxDate, excludeDates, includeDates, filterDate, disabled, }?: Pick<DateFilterOptionsWithDisabled, "minDate" | "maxDate" | "excludeDates" | "includeDates" | "filterDate" | "disabled">): boolean;
export declare function isQuarterInRange(startDate: Date, endDate: Date, q: number, day: Date): boolean;
export declare function isOutOfBounds(day: Date, { minDate, maxDate }?: Pick<DateFilterOptions, "minDate" | "maxDate">): boolean;
export declare function isTimeInList(time: Date, times: Date[]): boolean;
export interface TimeFilterOptions {
minTime?: Date;
maxTime?: Date;
excludeTimes?: Date[];
includeTimes?: Date[];
filterTime?: (time: Date) => boolean;
}
export declare function isTimeDisabled(time: Date, { excludeTimes, includeTimes, filterTime, }?: Pick<TimeFilterOptions, "excludeTimes" | "includeTimes" | "filterTime">): boolean;
export declare function isTimeInDisabledRange(time: Date, { minTime, maxTime }: Pick<TimeFilterOptions, "minTime" | "maxTime">): boolean;
export declare function monthDisabledBefore(day: Date, { minDate, includeDates, }?: Pick<DateFilterOptions, "minDate" | "includeDates">): boolean;
export declare function monthDisabledAfter(day: Date, { maxDate, includeDates, }?: Pick<DateFilterOptions, "maxDate" | "includeDates">): boolean;
export declare function quarterDisabledBefore(date: Date, { minDate, includeDates, }?: Pick<DateFilterOptions, "minDate" | "includeDates">): boolean;
export declare function quarterDisabledAfter(date: Date, { maxDate, includeDates, }?: Pick<DateFilterOptions, "maxDate" | "includeDates">): boolean;
export declare function yearDisabledBefore(day: Date, { minDate, includeDates, }?: Pick<DateFilterOptions, "minDate" | "includeDates">): boolean;
export declare function yearsDisabledBefore(day: Date, { minDate, yearItemNumber, }?: Pick<DateFilterOptions, "minDate" | "yearItemNumber">): boolean;
export declare function yearDisabledAfter(day: Date, { maxDate, includeDates, }?: Pick<DateFilterOptions, "maxDate" | "includeDates">): boolean;
export declare function yearsDisabledAfter(day: Date, { maxDate, yearItemNumber, }?: Pick<DateFilterOptions, "maxDate" | "yearItemNumber">): boolean;
export declare function getEffectiveMinDate({ minDate, includeDates, }: Pick<DateFilterOptions, "minDate" | "includeDates">): Date | undefined;
export declare function getEffectiveMaxDate({ maxDate, includeDates, }: Pick<DateFilterOptions, "maxDate" | "includeDates">): Date | undefined;
export interface HighlightDate {
[className: string]: Date[];
}
/**
* 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.
*/
export declare function getHighLightDaysMap(highlightDates?: (Date | HighlightDate)[], defaultClassName?: string): Map<string, string[]>;
/**
* 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.
*/
export declare function arraysAreEqual<T>(array1: T[], array2: T[]): boolean;
export interface HolidayItem {
date: Date;
holidayName: string;
}
interface ClassNamesObj {
className: string;
holidayNames: string[];
}
export type HolidaysMap = Map<string, ClassNamesObj>;
/**
* 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
*/
export declare function getHolidaysMap(holidayDates?: HolidayItem[], defaultClassName?: string): HolidaysMap;
/**
* 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.
*/
export declare function timesToInjectAfter(startOfDay: Date, currentTime: Date, currentMultiplier: number, intervals: number, injectedTimes: Date[]): Date[];
/**
* 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.
*/
export declare function addZero(i: number): string;
/**
* 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.
*/
export declare function getYearsPeriod(date: Date, yearItemNumber?: number): {
startPeriod: number;
endPeriod: number;
};
/**
* 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.
*/
export declare function getHoursInDay(d: Date): number;
/**
* 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
*/
export declare function startOfMinute(d: Date): Date;
/**
* 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
*/
export declare function isSameMinute(d1: Date, d2: Date): boolean;
/**
* 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
*/
export declare function getMidnightDate(date: Date): Date;
/**
* 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.
*/
export declare function isDateBefore(date: Date, dateToCompare: Date): boolean;
/**
* 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.
*/
export declare function isSpaceKeyDown(event: React.KeyboardEvent<HTMLDivElement>): boolean;
+151
View File
@@ -0,0 +1,151 @@
import React, { Component } from "react";
import { type DateFilterOptionsWithDisabled, type DateNumberType, type Locale, type HolidaysMap } from "./date_utils";
interface DayProps extends Pick<DateFilterOptionsWithDisabled, "minDate" | "maxDate" | "excludeDates" | "excludeDateIntervals" | "includeDateIntervals" | "includeDates" | "filterDate" | "disabled"> {
ariaLabelPrefixWhenEnabled?: string;
ariaLabelPrefixWhenDisabled?: string;
disabledKeyboardNavigation?: boolean;
day: Date;
dayClassName?: (date: Date) => string;
highlightDates?: Map<string, string[]>;
holidays?: HolidaysMap;
inline?: boolean;
shouldFocusDayInline?: boolean;
month: number;
onClick?: React.MouseEventHandler<HTMLDivElement>;
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
handleOnKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
usePointerEvent?: boolean;
preSelection?: Date | null;
selected?: Date | null;
selectingDate?: Date;
selectsEnd?: boolean;
selectsStart?: boolean;
selectsRange?: boolean;
showWeekPicker?: boolean;
showWeekNumber?: boolean;
selectsDisabledDaysInRange?: boolean;
selectsMultiple?: boolean;
selectedDates?: Date[];
startDate?: Date | null;
endDate?: Date | null;
renderDayContents?: (day: number, date: Date) => React.ReactNode;
containerRef?: React.RefObject<HTMLDivElement | null>;
calendarStartDay?: DateNumberType;
locale?: Locale;
monthShowsDuplicateDaysEnd?: boolean;
monthShowsDuplicateDaysStart?: boolean;
swapRange?: boolean;
}
/**
* `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;
* ```
*/
export default class Day extends Component<DayProps> {
componentDidMount(): void;
componentDidUpdate(): void;
dayEl: React.RefObject<HTMLDivElement | null>;
handleClick: DayProps["onClick"];
handleMouseEnter: DayProps["onMouseEnter"];
handleOnKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
isSameDay: (other: Date | null | undefined) => boolean;
isKeyboardSelected: () => boolean | undefined;
isDisabled: (day?: Date) => boolean;
isExcluded: () => boolean;
isStartOfWeek: () => boolean;
isSameWeek: (other?: Date | null) => boolean | undefined;
isSameDayOrWeek: (other?: Date | null) => boolean | undefined;
getHighLightedClass: () => false | string[] | undefined;
getHolidaysClass: () => (string | undefined)[];
isInRange: () => boolean;
isInSelectingRange: () => boolean;
isSelectingRangeStart: () => boolean;
isSelectingRangeEnd: () => boolean;
isRangeStart: () => boolean;
isRangeEnd: () => boolean;
isWeekend: () => boolean;
isAfterMonth: () => boolean;
isBeforeMonth: () => boolean;
isCurrentDay: () => boolean;
isSelected: () => boolean | undefined;
getClassNames: (date: Date) => string;
getAriaLabel: () => string;
getTitle: () => string;
getTabIndex: () => 0 | -1;
handleFocusDay: () => void;
private shouldFocusDay;
private isDayActiveElement;
private isDuplicateDay;
renderDayContents: () => React.ReactNode;
render: () => React.JSX.Element;
}
export {};
+252
View File
@@ -0,0 +1,252 @@
import React, { Component, cloneElement } from "react";
import Calendar from "./calendar";
import CalendarIcon from "./calendar_icon";
import { registerLocale, setDefaultLocale, getDefaultLocale, type HighlightDate, type HolidayItem, type TimeZone } from "./date_utils";
import PopperComponent from "./popper_component";
import Portal from "./portal";
import type { ClickOutsideHandler } from "./click_outside_wrapper";
export { default as CalendarContainer } from "./calendar_container";
export { registerLocale, setDefaultLocale, getDefaultLocale };
export { ReactDatePickerCustomHeaderProps, ReactDatePickerCustomDayNameProps, } from "./calendar";
interface Holiday {
date: string;
holidayName: string;
}
type CalendarProps = React.ComponentPropsWithoutRef<typeof Calendar>;
interface CalendarIconProps extends React.ComponentPropsWithoutRef<typeof CalendarIcon> {
}
interface PortalProps extends React.ComponentPropsWithoutRef<typeof Portal> {
}
interface PopperComponentProps extends React.ComponentPropsWithoutRef<typeof PopperComponent> {
}
type OmitUnion<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
export type DatePickerProps = OmitUnion<CalendarProps, "setOpen" | "dateFormat" | "preSelection" | "onSelect" | "onClickOutside" | "highlightDates" | "holidays" | "shouldFocusDayInline" | "monthSelectedIn" | "onDropdownFocus" | "onTimeChange" | "className" | "container" | "handleOnKeyDown" | "handleOnDayKeyDown" | "isInputFocused" | "setPreSelection" | "selectsRange" | "selectsMultiple" | "dropdownMode"> & Partial<Pick<CalendarIconProps, "icon">> & OmitUnion<PortalProps, "children" | "portalId"> & OmitUnion<PopperComponentProps, "className" | "hidePopper" | "targetComponent" | "popperComponent" | "popperOnKeyDown" | "showArrow"> & {
dateFormatCalendar?: CalendarProps["dateFormat"];
calendarClassName?: CalendarProps["className"];
calendarContainer?: CalendarProps["container"];
dropdownMode?: CalendarProps["dropdownMode"];
onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
popperClassName?: PopperComponentProps["className"];
showPopperArrow?: PopperComponentProps["showArrow"];
popperTargetRef?: React.RefObject<HTMLElement | null>;
open?: boolean;
disabled?: boolean;
readOnly?: boolean;
startOpen?: boolean;
onFocus?: React.FocusEventHandler<HTMLElement>;
onBlur?: React.FocusEventHandler<HTMLElement>;
onClickOutside?: ClickOutsideHandler;
onInputClick?: VoidFunction;
preventOpenOnFocus?: boolean;
closeOnScroll?: boolean | ((event: Event) => boolean);
isClearable?: boolean;
clearButtonTitle?: string;
clearButtonClassName?: string;
ariaLabelClose?: string;
className?: string;
customInput?: Parameters<typeof cloneElement>[0];
dateFormat?: string | string[];
showDateSelect?: boolean;
highlightDates?: (Date | HighlightDate)[];
onCalendarOpen?: VoidFunction;
onCalendarClose?: VoidFunction;
strictParsing?: boolean;
swapRange?: boolean;
onInputError?: (error: {
code: 1;
msg: string;
}) => void;
allowSameDay?: boolean;
withPortal?: boolean;
focusSelectedMonth?: boolean;
showIcon?: boolean;
calendarIconClassname?: never;
calendarIconClassName?: string;
toggleCalendarOnIconClick?: boolean;
holidays?: Holiday[];
startDate?: Date | null;
endDate?: Date | null;
selected?: Date | null;
/**
* The IANA timezone identifier (e.g., "America/New_York", "UTC", "Europe/London").
* When set, the datepicker will display dates/times in this timezone and
* the onChange callback will return dates adjusted to this timezone.
*
* Requires the optional peer dependency `date-fns-tz` to be installed:
* ```
* npm install date-fns-tz
* ```
*
* @example
* ```tsx
* <DatePicker
* timeZone="America/New_York"
* selected={selectedDate}
* onChange={(date) => setSelectedDate(date)}
* />
* ```
*/
timeZone?: TimeZone;
value?: string;
customInputRef?: string;
id?: string;
name?: string;
form?: string;
autoFocus?: boolean;
placeholderText?: string;
autoComplete?: string;
title?: string;
required?: boolean;
tabIndex?: number;
ariaDescribedBy?: string;
ariaInvalid?: string;
ariaLabel?: string;
ariaLabelledBy?: string;
ariaRequired?: string;
"aria-describedby"?: string;
"aria-invalid"?: string;
"aria-label"?: string;
"aria-labelledby"?: string;
"aria-required"?: string;
rangeSeparator?: string;
onChangeRaw?: (event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, selectionMeta?: {
date: Date;
formattedDate: string;
}) => void;
onSelect?: (date: Date | null, event?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => void;
} & ({
selectsRange?: false | undefined;
selectsMultiple?: false | undefined;
formatMultipleDates?: never;
onChange?: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
} | {
selectsRange?: true;
selectsMultiple?: false | undefined;
formatMultipleDates?: never;
onChange?: (date: [Date | null, Date | null], event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
} | {
selectsRange?: false | undefined;
selectsMultiple?: true;
formatMultipleDates?: (dates: Date[], formatDate: (date: Date) => string) => string;
onChange?: (dates: Date[] | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
});
interface DatePickerState {
open: boolean;
wasHidden: boolean;
lastPreSelectChange?: typeof PRESELECT_CHANGE_VIA_INPUT | typeof PRESELECT_CHANGE_VIA_NAVIGATE;
inputValue: string | null;
preventFocus: boolean;
preSelection?: CalendarProps["preSelection"];
shouldFocusDayInline?: CalendarProps["shouldFocusDayInline"];
monthSelectedIn?: CalendarProps["monthSelectedIn"];
focused?: CalendarProps["isInputFocused"];
highlightDates: Required<CalendarProps>["highlightDates"];
isRenderAriaLiveMessage?: boolean;
}
export declare class DatePicker extends Component<DatePickerProps, DatePickerState> {
static get defaultProps(): {
allowSameDay: boolean;
dateFormat: string;
dateFormatCalendar: string;
disabled: boolean;
disabledKeyboardNavigation: boolean;
dropdownMode: "scroll";
preventOpenOnFocus: boolean;
monthsShown: number;
outsideClickIgnoreClass: string;
readOnly: boolean;
rangeSeparator: string;
withPortal: boolean;
selectsDisabledDaysInRange: boolean;
shouldCloseOnSelect: boolean;
showTimeSelect: boolean;
showTimeInput: boolean;
showPreviousMonths: boolean;
showMonthYearPicker: boolean;
showFullMonthYearPicker: boolean;
showTwoColumnMonthYearPicker: boolean;
showFourColumnMonthYearPicker: boolean;
showYearPicker: boolean;
showQuarterYearPicker: boolean;
showWeekPicker: boolean;
strictParsing: boolean;
swapRange: boolean;
timeIntervals: number;
timeCaption: string;
previousMonthAriaLabel: string;
previousMonthButtonLabel: string;
nextMonthAriaLabel: string;
nextMonthButtonLabel: string;
previousYearAriaLabel: string;
previousYearButtonLabel: string;
nextYearAriaLabel: string;
nextYearButtonLabel: string;
timeInputLabel: string;
enableTabLoop: boolean;
yearItemNumber: number;
focusSelectedMonth: boolean;
showPopperArrow: boolean;
excludeScrollbar: boolean;
customTimeInput: null;
calendarStartDay: undefined;
toggleCalendarOnIconClick: boolean;
usePointerEvent: boolean;
};
constructor(props: DatePickerProps);
componentDidMount(): void;
componentDidUpdate(prevProps: DatePickerProps, prevState: DatePickerState): void;
componentWillUnmount(): void;
preventFocusTimeout: ReturnType<typeof setTimeout> | undefined;
inputFocusTimeout: ReturnType<typeof setTimeout> | undefined;
calendar: Calendar | null;
input: HTMLElement | null;
getPreSelection: () => Date;
modifyHolidays: () => HolidayItem[] | undefined;
calcInitialState: () => DatePickerState;
getInputValue: () => string;
resetHiddenStatus: () => void;
setHiddenStatus: () => void;
setHiddenStateOnVisibilityHidden: () => void;
clearPreventFocusTimeout: () => void;
setFocus: () => void;
setBlur: () => void;
deferBlur: () => void;
setOpen: (open: boolean, skipSetBlur?: boolean) => void;
inputOk: () => boolean;
isCalendarOpen: () => boolean;
handleFocus: (event: React.FocusEvent<HTMLElement>) => void;
sendFocusBackToInput: () => void;
cancelFocusInput: () => void;
deferFocusInput: () => void;
handleDropdownFocus: () => void;
resetInputValue: () => void;
handleBlur: (event: React.FocusEvent<HTMLElement>) => void;
handleCalendarClickOutside: (event: MouseEvent) => void;
handleChange: (...allArgs: Parameters<Required<DatePickerProps>["onChangeRaw"]>) => void;
handleSelect: (date: Date, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, monthSelectedIn?: number) => void;
setSelected: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, keepInput?: boolean, monthSelectedIn?: number) => void;
setPreSelection: (date?: Date | null) => void;
toggleCalendar: () => void;
handleTimeChange: (time: Date, modifyDateType?: "start" | "end") => void;
onInputClick: () => void;
handleTimeOnlyArrowKey: (eventKey: string) => void;
handleTimeOnlyEnterKey: (event: React.KeyboardEvent<HTMLElement>) => void;
scrollToTimeOption: (time: Date) => void;
onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
onPortalKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
onDayKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
onPopperKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
onClearClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
clear: () => void;
onScroll: (event: Event) => void;
handleMonthSelectedInChange: (monthSelectedIn: number) => void;
renderCalendar: () => React.JSX.Element | null;
renderAriaLiveRegion: () => React.JSX.Element;
renderDateInput: () => React.FunctionComponentElement<any>;
renderClearButton: () => React.ReactElement | null;
renderInputContainer(): React.ReactElement;
render(): React.ReactElement | null;
}
declare const PRESELECT_CHANGE_VIA_INPUT = "input";
declare const PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
export default DatePicker;
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+42
View File
@@ -0,0 +1,42 @@
import React, { Component } from "react";
interface InputTimeProps {
onChange?: (date: Date) => void;
date?: Date;
timeString?: string;
timeInputLabel?: string;
customTimeInput?: React.ReactElement<{
date?: Date;
value: string;
onChange: (time: string) => void;
}>;
}
interface InputTimeState {
time?: string;
}
/**
* `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.
*/
export default class InputTime extends Component<InputTimeProps, InputTimeState> {
inputRef: React.RefObject<HTMLInputElement | null>;
constructor(props: InputTimeProps);
static getDerivedStateFromProps(props: InputTimeProps, state: InputTimeState): {
time: string | undefined;
} | null;
onTimeChange: (time: InputTimeState["time"]) => void;
renderTimeInput: () => React.JSX.Element;
render(): React.JSX.Element;
}
export {};
+183
View File
@@ -0,0 +1,183 @@
import React, { Component } from "react";
import { KeyType } from "./date_utils";
import Week from "./week";
interface WeekProps extends React.ComponentPropsWithoutRef<typeof Week> {
}
interface MonthProps extends Omit<WeekProps, "ariaLabelPrefix" | "chooseDayAriaLabelPrefix" | "day" | "disabledDayAriaLabelPrefix" | "month" | "onDayClick" | "onDayMouseEnter" | "preSelection" | "selected" | "showWeekNumber"> {
monthClassName?: (date: Date) => string;
onDayClick?: (date: Date, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, orderInDisplay?: number) => void;
onDayMouseEnter?: (date: Date) => void;
onMouseLeave?: VoidFunction;
setPreSelection?: (date?: Date | null) => void;
renderMonthContent?: (m: number, shortMonthText: string, fullMonthText: string, day: Date) => React.ReactNode;
renderQuarterContent?: (q: number, shortQuarter: string) => React.ReactNode;
handleOnMonthKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
ariaLabelPrefix?: string;
day: Date;
startDate?: Date | null;
endDate?: Date | null;
orderInDisplay?: number;
fixedHeight?: boolean;
peekNextMonth?: boolean;
preSelection?: Date | null;
selected?: Date | null;
showWeekNumbers?: WeekProps["showWeekNumber"];
showMonthYearPicker?: boolean;
showFullMonthYearPicker?: boolean;
showTwoColumnMonthYearPicker?: boolean;
showFourColumnMonthYearPicker?: boolean;
showQuarterYearPicker?: boolean;
weekAriaLabelPrefix?: WeekProps["ariaLabelPrefix"];
chooseDayAriaLabelPrefix?: WeekProps["chooseDayAriaLabelPrefix"];
disabledDayAriaLabelPrefix?: WeekProps["disabledDayAriaLabelPrefix"];
dayNamesHeader?: React.ReactNode;
monthHeader?: React.ReactNode;
monthFooter?: React.ReactNode;
}
/**
* `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>
* );
* }
* ```
*/
export default class Month extends Component<MonthProps> {
MONTH_REFS: React.RefObject<HTMLDivElement | null>[];
QUARTER_REFS: React.RefObject<HTMLDivElement | null>[];
isDisabled: (day: Date) => boolean;
isExcluded: (day: Date) => boolean;
handleDayClick: (day: Date, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
handleDayMouseEnter: (day: Date) => void;
handleMouseLeave: () => void;
isRangeStartMonth: (m: number) => boolean;
isRangeStartQuarter: (q: number) => boolean;
isRangeEndMonth: (m: number) => boolean;
isRangeEndQuarter: (q: number) => boolean;
isInSelectingRangeMonth: (m: number) => boolean;
isSelectingMonthRangeStart: (m: number) => boolean;
isSelectingMonthRangeEnd: (m: number) => boolean;
isInSelectingRangeQuarter: (q: number) => boolean;
isWeekInMonth: (startOfWeek: Date) => boolean;
isCurrentMonth: (day: Date, m: number) => boolean;
isCurrentQuarter: (day: Date, q: number) => boolean;
isSelectedMonth: (day: Date, m: number, selected: Date) => boolean;
isSelectMonthInList: (day: Date, m: number, selectedDates: Date[]) => boolean;
isSelectedQuarter: (day: Date, q: number, selected: Date) => boolean;
isSelectQuarterInList: (day: Date, q: number, selectedDates: Date[]) => boolean;
isMonthSelected: () => boolean | undefined;
isQuarterSelected: () => boolean | undefined;
renderWeeks: () => React.JSX.Element[];
onMonthClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>, m: number) => void;
onMonthMouseEnter: (m: number) => void;
handleMonthNavigation: (newMonth: number, newDate: Date) => void;
handleKeyboardNavigation: (event: React.KeyboardEvent<HTMLDivElement>, eventKey: KeyType, month: number) => void;
getVerticalOffset: (monthColumnsLayout: string) => number;
onMonthKeyDown: (event: React.KeyboardEvent<HTMLDivElement>, month: number) => void;
onQuarterClick: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, q: number) => void;
onQuarterMouseEnter: (q: number) => void;
handleQuarterNavigation: (newQuarter: number, newDate: Date) => void;
onQuarterKeyDown: (event: React.KeyboardEvent<HTMLDivElement>, quarter: number) => void;
isMonthDisabledForLabelDate: (month: number) => {
isDisabled: boolean;
labelDate: Date;
};
isMonthDisabled: (month: number) => boolean;
getSelection(): Date[] | undefined;
getMonthClassNames: (m: number) => string;
getTabIndex: (m: number) => "-1" | "0";
getQuarterTabIndex: (q: number) => "-1" | "0";
getAriaLabel: (month: number) => string;
getQuarterClassNames: (q: number) => string;
getMonthContent: (m: number) => React.ReactNode;
getQuarterContent: (q: number) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;
renderMonths: () => React.JSX.Element[] | undefined;
renderQuarters: () => React.JSX.Element;
getClassNames: () => string;
render(): React.JSX.Element;
}
export {};
+26
View File
@@ -0,0 +1,26 @@
import React, { Component } from "react";
import { type Locale } from "./date_utils";
import MonthDropdownOptions from "./month_dropdown_options";
interface MonthDropdownOptionsProps extends React.ComponentPropsWithoutRef<typeof MonthDropdownOptions> {
}
interface MonthDropdownProps extends Omit<MonthDropdownOptionsProps, "monthNames" | "onChange" | "onCancel"> {
dropdownMode: "scroll" | "select";
locale?: Locale;
onChange: (month: number) => void;
useShortMonthInDropdown?: boolean;
}
interface MonthDropdownState {
dropdownVisible: boolean;
}
export default class MonthDropdown extends Component<MonthDropdownProps, MonthDropdownState> {
state: MonthDropdownState;
renderSelectOptions: (monthNames: string[]) => React.ReactElement[];
renderSelectMode: (monthNames: string[]) => React.ReactElement;
renderReadView: (visible: boolean, monthNames: string[]) => React.ReactElement;
renderDropdown: (monthNames: string[]) => React.ReactElement;
renderScrollMode: (monthNames: string[]) => React.ReactElement[];
onChange: (month: number) => void;
toggleDropdown: () => void;
render(): React.ReactElement;
}
export {};
@@ -0,0 +1,17 @@
import React, { Component } from "react";
interface MonthDropdownOptionsProps {
onCancel: VoidFunction;
onChange: (month: number) => void;
month: number;
monthNames: string[];
}
export default class MonthDropdownOptions extends Component<MonthDropdownOptionsProps> {
monthOptionButtonsRef: Record<number, HTMLDivElement | null>;
isSelectedMonth: (i: number) => boolean;
handleOptionKeyDown: (i: number, e: React.KeyboardEvent) => void;
renderOptions: () => React.ReactElement[];
onChange: (month: number) => void;
handleClickOutside: () => void;
render(): React.ReactElement;
}
export {};
+26
View File
@@ -0,0 +1,26 @@
import React, { Component } from "react";
import { type Locale } from "./date_utils";
import MonthYearDropdownOptions from "./month_year_dropdown_options";
interface MonthYearDropdownOptionsProps extends React.ComponentPropsWithoutRef<typeof MonthYearDropdownOptions> {
}
interface MonthYearDropdownProps extends Omit<MonthYearDropdownOptionsProps, "onChange" | "onCancel"> {
dropdownMode: "scroll" | "select";
onChange: (monthYear: Date) => void;
locale?: Locale;
}
interface MonthYearDropdownState {
dropdownVisible: boolean;
}
export default class MonthYearDropdown extends Component<MonthYearDropdownProps, MonthYearDropdownState> {
state: MonthYearDropdownState;
renderSelectOptions: () => React.ReactElement[];
onSelectChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
renderSelectMode: () => React.ReactElement;
renderReadView: (visible: boolean) => React.ReactElement;
renderDropdown: () => React.ReactElement;
renderScrollMode: () => React.ReactElement[];
onChange: (monthYearPoint: number) => void;
toggleDropdown: () => void;
render(): React.ReactElement;
}
export {};
@@ -0,0 +1,23 @@
import React, { Component } from "react";
import { type Locale } from "./date_utils";
interface MonthYearDropdownOptionsProps {
minDate?: Date;
maxDate?: Date;
onCancel: VoidFunction;
onChange: (monthYear: number) => void;
scrollableMonthYearDropdown?: boolean;
date: Date;
dateFormat: string;
locale?: Locale;
}
interface MonthYearDropdownOptionsState {
monthYearsList: Date[];
}
export default class MonthYearDropdownOptions extends Component<MonthYearDropdownOptionsProps, MonthYearDropdownOptionsState> {
constructor(props: MonthYearDropdownOptionsProps);
renderOptions: () => React.ReactElement[];
onChange: (monthYear: number) => void;
handleClickOutside: () => void;
render(): React.ReactElement;
}
export {};
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
import Portal from "./portal";
import TabLoop from "./tab_loop";
import type { FloatingProps } from "./with_floating";
import type { ReactNode } from "react";
interface PortalProps extends Omit<React.ComponentPropsWithoutRef<typeof Portal>, "children"> {
}
interface TabLoopProps extends Omit<React.ComponentPropsWithoutRef<typeof TabLoop>, "children"> {
}
interface PopperComponentProps extends Omit<PortalProps, "portalId">, TabLoopProps, FloatingProps {
className?: string;
wrapperClassName?: string;
popperComponent: React.ReactNode;
popperContainer?: React.FC<{
children?: ReactNode | undefined;
}>;
targetComponent: React.ReactNode;
popperOnKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
showArrow?: boolean;
portalId?: PortalProps["portalId"];
popperTargetRef?: React.RefObject<HTMLElement | null>;
monthHeaderPosition?: "top" | "middle" | "bottom";
}
export declare const PopperComponent: React.FC<PopperComponentProps>;
declare const _default: {
(props: Omit<PopperComponentProps, "popperProps"> & import("./with_floating").WithFloatingProps): React.ReactElement;
displayName: string;
};
export default _default;
+26
View File
@@ -0,0 +1,26 @@
import { Component } from "react";
import type React from "react";
interface PortalProps {
children: React.ReactNode;
portalId: string;
portalHost?: ShadowRoot;
}
/**
* `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`.
*/
declare class Portal extends Component<PortalProps> {
constructor(props: PortalProps);
componentDidMount(): void;
componentWillUnmount(): void;
private el;
private portalRoot;
render(): React.ReactPortal;
}
export default Portal;
@@ -0,0 +1,771 @@
@charset "UTF-8";
:global .react-datepicker__navigation-icon::before, :global .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-year-read-view--down-arrow {
border-color: #ccc;
border-style: solid;
border-width: 3px 3px 0 0;
content: "";
display: block;
height: 9px;
position: absolute;
top: 6px;
width: 9px;
}
:global .react-datepicker__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:global .react-datepicker-wrapper {
display: inline-block;
padding: 0;
border: 0;
}
:global .react-datepicker {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 0.8rem;
background-color: #fff;
color: #000;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
display: inline-block;
position: relative;
line-height: initial;
}
:global .react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
:global .react-datepicker--time-only .react-datepicker__time,
:global .react-datepicker--time-only .react-datepicker__time-box {
border-bottom-left-radius: 0.375em;
border-bottom-right-radius: 0.375em;
}
:global .react-datepicker-popper {
z-index: 1;
line-height: 0;
}
:global .react-datepicker-popper .react-datepicker__triangle {
stroke: #aeaeae;
}
:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
:global .react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, :global .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
:global .react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
:global .react-datepicker__header {
text-align: center;
background-color: #f0f0f0;
border-bottom: 1px solid #aeaeae;
border-top-left-radius: 0.3rem;
padding: 8px 0;
position: relative;
}
:global .react-datepicker__header--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
:global .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
border-top-left-radius: 0;
}
:global .react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
border-top-right-radius: 0.3rem;
}
:global .react-datepicker__header--middle {
border-top: 1px solid #aeaeae;
border-radius: 0;
margin-top: 4px;
}
:global .react-datepicker__header--bottom {
border-bottom: none;
border-top: 1px solid #aeaeae;
border-radius: 0 0 0.3rem 0.3rem;
}
:global .react-datepicker__header-wrapper {
position: relative;
}
:global .react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 2px;
}
:global .react-datepicker__year-dropdown-container--select,
:global .react-datepicker__month-dropdown-container--select,
:global .react-datepicker__month-year-dropdown-container--select,
:global .react-datepicker__year-dropdown-container--scroll,
:global .react-datepicker__month-dropdown-container--scroll,
:global .react-datepicker__month-year-dropdown-container--scroll {
display: inline-block;
margin: 0 15px;
}
:global .react-datepicker__month-select,
:global .react-datepicker__year-select,
:global .react-datepicker__month-year-select {
background-color: transparent;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: inherit;
margin-top: 5px;
padding: 2px 5px;
}
:global .react-datepicker__month-select:focus-visible,
:global .react-datepicker__year-select:focus-visible,
:global .react-datepicker__month-year-select:focus-visible {
outline: auto 1px;
}
:global .react-datepicker__current-month,
:global .react-datepicker-time__header,
:global .react-datepicker-year-header {
margin-top: 0;
color: #000;
font-weight: bold;
font-size: 0.944rem;
}
:global h2.react-datepicker__current-month {
padding: 0;
margin: 0;
}
:global .react-datepicker-time__header {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
:global .react-datepicker__navigation {
align-items: center;
background: none;
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
position: absolute;
top: 2px;
padding: 0;
border: none;
z-index: 1;
height: 32px;
width: 32px;
text-indent: -999em;
overflow: hidden;
}
:global .react-datepicker__navigation--previous {
left: 2px;
}
:global .react-datepicker__navigation--next {
right: 2px;
}
:global .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 85px;
}
:global .react-datepicker__navigation--years {
position: relative;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
:global .react-datepicker__navigation--years-previous {
top: 4px;
}
:global .react-datepicker__navigation--years-upcoming {
top: -4px;
}
:global .react-datepicker__navigation:hover *::before {
border-color: rgb(165.75, 165.75, 165.75);
}
:global .react-datepicker__navigation-icon {
position: relative;
top: -1px;
font-size: 20px;
width: 0;
}
:global .react-datepicker__navigation-icon--next {
left: -2px;
}
:global .react-datepicker__navigation-icon--next::before {
transform: rotate(45deg);
left: -7px;
}
:global .react-datepicker__navigation-icon--previous {
right: -2px;
}
:global .react-datepicker__navigation-icon--previous::before {
transform: rotate(225deg);
right: -7px;
}
:global .react-datepicker__month-container {
float: left;
}
:global .react-datepicker__year {
margin: 0.5em;
text-align: center;
}
:global .react-datepicker__year-wrapper {
display: flex;
flex-wrap: wrap;
max-width: 180px;
}
:global .react-datepicker__year .react-datepicker__year-text {
display: inline-block;
width: 5em;
margin: 2px;
}
:global .react-datepicker__month {
margin: 0.5em;
text-align: center;
}
:global .react-datepicker__month .react-datepicker__month-text,
:global .react-datepicker__month .react-datepicker__quarter-text {
display: inline-block;
width: 5em;
margin: 2px;
}
:global .react-datepicker__input-time-container {
clear: both;
width: 100%;
float: left;
margin: 5px 0 10px 15px;
text-align: left;
}
:global .react-datepicker__input-time-container .react-datepicker-time__caption {
display: inline-block;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container {
display: inline-block;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
display: inline-block;
margin-left: 10px;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
width: auto;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
-moz-appearance: textfield;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
margin-left: 5px;
display: inline-block;
}
:global .react-datepicker__time-container {
float: right;
border-left: 1px solid #aeaeae;
width: 85px;
}
:global .react-datepicker__time-container--with-today-button {
display: inline;
border: 1px solid #aeaeae;
border-radius: 0.375em;
position: absolute;
right: -87px;
top: 0;
}
:global .react-datepicker__time-container .react-datepicker__time {
position: relative;
background: white;
border-bottom-right-radius: 0.375em;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
width: 85px;
overflow-x: hidden;
margin: 0 auto;
text-align: center;
border-bottom-right-radius: 0.375em;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
list-style: none;
margin: 0;
height: calc(195px + 2.125em / 2);
overflow-y: scroll;
padding-right: 0;
padding-left: 0;
width: 100%;
box-sizing: content-box;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
height: 30px;
padding: 5px 10px;
white-space: nowrap;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
cursor: pointer;
background-color: #f0f0f0;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background-color: #216ba5;
color: white;
font-weight: bold;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background-color: #216ba5;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
color: #ccc;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
cursor: default;
background-color: transparent;
}
:global .react-datepicker__week-number {
color: #ccc;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
:global .react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
:global .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
:global .react-datepicker__week-number--selected {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
:global .react-datepicker__week-number--selected:hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
:global .react-datepicker__day-names {
text-align: center;
white-space: nowrap;
margin-bottom: -8px;
}
:global .react-datepicker__week {
white-space: nowrap;
}
:global .react-datepicker__day-name,
:global .react-datepicker__day,
:global .react-datepicker__time-name {
color: #000;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
:global .react-datepicker__day-name--disabled,
:global .react-datepicker__day--disabled,
:global .react-datepicker__time-name--disabled {
cursor: default;
color: #ccc;
}
:global .react-datepicker__day,
:global .react-datepicker__month-text,
:global .react-datepicker__quarter-text,
:global .react-datepicker__year-text {
cursor: pointer;
}
:global .react-datepicker__day:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text:not([aria-disabled=true]):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
:global .react-datepicker__day--today,
:global .react-datepicker__month-text--today,
:global .react-datepicker__quarter-text--today,
:global .react-datepicker__year-text--today {
font-weight: bold;
}
:global .react-datepicker__day--highlighted,
:global .react-datepicker__month-text--highlighted,
:global .react-datepicker__quarter-text--highlighted,
:global .react-datepicker__year-text--highlighted {
border-radius: 0.3rem;
background-color: #3dcc4a;
color: #fff;
}
:global .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
:global .react-datepicker__day--highlighted-custom-1,
:global .react-datepicker__month-text--highlighted-custom-1,
:global .react-datepicker__quarter-text--highlighted-custom-1,
:global .react-datepicker__year-text--highlighted-custom-1 {
color: magenta;
}
:global .react-datepicker__day--highlighted-custom-2,
:global .react-datepicker__month-text--highlighted-custom-2,
:global .react-datepicker__quarter-text--highlighted-custom-2,
:global .react-datepicker__year-text--highlighted-custom-2 {
color: green;
}
:global .react-datepicker__day--holidays,
:global .react-datepicker__month-text--holidays,
:global .react-datepicker__quarter-text--holidays,
:global .react-datepicker__year-text--holidays {
position: relative;
border-radius: 0.3rem;
background-color: #ff6803;
color: #fff;
}
:global .react-datepicker__day--holidays .overlay,
:global .react-datepicker__month-text--holidays .overlay,
:global .react-datepicker__quarter-text--holidays .overlay,
:global .react-datepicker__year-text--holidays .overlay {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
:global .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
background-color: rgb(207, 82.9642857143, 0);
}
:global .react-datepicker__day--holidays:hover .overlay,
:global .react-datepicker__month-text--holidays:hover .overlay,
:global .react-datepicker__quarter-text--holidays:hover .overlay,
:global .react-datepicker__year-text--holidays:hover .overlay {
visibility: visible;
opacity: 1;
}
:global .react-datepicker__day--selected, :global .react-datepicker__day--in-selecting-range, :global .react-datepicker__day--in-range,
:global .react-datepicker__month-text--selected,
:global .react-datepicker__month-text--in-selecting-range,
:global .react-datepicker__month-text--in-range,
:global .react-datepicker__quarter-text--selected,
:global .react-datepicker__quarter-text--in-selecting-range,
:global .react-datepicker__quarter-text--in-range,
:global .react-datepicker__year-text--selected,
:global .react-datepicker__year-text--in-selecting-range,
:global .react-datepicker__year-text--in-range {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
:global .react-datepicker__day--selected:not([aria-disabled=true]):hover, :global .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, :global .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
:global .react-datepicker__day--keyboard-selected,
:global .react-datepicker__month-text--keyboard-selected,
:global .react-datepicker__quarter-text--keyboard-selected,
:global .react-datepicker__year-text--keyboard-selected {
border-radius: 0.3rem;
background-color: rgb(186.25, 217.0833333333, 241.25);
color: rgb(0, 0, 0);
}
:global .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
color: #fff;
}
:global .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
:global .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
:global .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
:global .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
background-color: rgba(33, 107, 165, 0.5);
}
:global .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), :global .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
background-color: #f0f0f0;
color: #000;
}
:global .react-datepicker__day--disabled,
:global .react-datepicker__month-text--disabled,
:global .react-datepicker__quarter-text--disabled,
:global .react-datepicker__year-text--disabled {
cursor: default;
color: #ccc;
}
:global .react-datepicker__day--disabled .overlay,
:global .react-datepicker__month-text--disabled .overlay,
:global .react-datepicker__quarter-text--disabled .overlay,
:global .react-datepicker__year-text--disabled .overlay {
position: absolute;
bottom: 70%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
:global .react-datepicker__input-container {
position: relative;
display: inline-block;
width: 100%;
}
:global .react-datepicker__input-container .react-datepicker__calendar-icon {
position: absolute;
padding: 0.625em;
box-sizing: content-box;
}
:global .react-datepicker__view-calendar-icon input {
padding: 6px 10px 5px 25px;
}
:global .react-datepicker__year-read-view,
:global .react-datepicker__month-read-view,
:global .react-datepicker__month-year-read-view {
border: 1px solid transparent;
border-radius: 0.3rem;
position: relative;
}
:global .react-datepicker__year-read-view:hover,
:global .react-datepicker__month-read-view:hover,
:global .react-datepicker__month-year-read-view:hover {
cursor: pointer;
}
:global .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
border-top-color: rgb(178.5, 178.5, 178.5);
}
:global .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-year-read-view--down-arrow {
transform: rotate(135deg);
right: -16px;
top: 0;
}
:global .react-datepicker__year-dropdown,
:global .react-datepicker__month-dropdown,
:global .react-datepicker__month-year-dropdown {
background-color: #f0f0f0;
position: absolute;
width: 50%;
left: 25%;
top: 30px;
z-index: 1;
text-align: center;
border-radius: 0.3rem;
border: 1px solid #aeaeae;
}
:global .react-datepicker__year-dropdown:hover,
:global .react-datepicker__month-dropdown:hover,
:global .react-datepicker__month-year-dropdown:hover {
cursor: pointer;
}
:global .react-datepicker__year-dropdown--scrollable,
:global .react-datepicker__month-dropdown--scrollable,
:global .react-datepicker__month-year-dropdown--scrollable {
height: 150px;
overflow-y: scroll;
}
:global .react-datepicker__year-option,
:global .react-datepicker__month-option,
:global .react-datepicker__month-year-option {
line-height: 20px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
:global .react-datepicker__year-option:first-of-type,
:global .react-datepicker__month-option:first-of-type,
:global .react-datepicker__month-year-option:first-of-type {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
:global .react-datepicker__year-option:last-of-type,
:global .react-datepicker__month-option:last-of-type,
:global .react-datepicker__month-year-option:last-of-type {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
:global .react-datepicker__year-option:hover,
:global .react-datepicker__month-option:hover,
:global .react-datepicker__month-year-option:hover {
background-color: #ccc;
}
:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
border-bottom-color: rgb(178.5, 178.5, 178.5);
}
:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
border-top-color: rgb(178.5, 178.5, 178.5);
}
:global .react-datepicker__year-option--selected,
:global .react-datepicker__month-option--selected,
:global .react-datepicker__month-year-option--selected {
position: absolute;
left: 15px;
}
:global .react-datepicker__close-icon {
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
padding: 0 6px 0 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: table-cell;
vertical-align: middle;
}
:global .react-datepicker__close-icon::after {
cursor: pointer;
background-color: #216ba5;
color: #fff;
border-radius: 50%;
height: 16px;
width: 16px;
padding: 2px;
font-size: 12px;
line-height: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
content: "×";
}
:global .react-datepicker__close-icon--disabled {
cursor: default;
}
:global .react-datepicker__close-icon--disabled::after {
cursor: default;
background-color: #ccc;
}
:global .react-datepicker__today-button {
background: #f0f0f0;
border-top: 1px solid #aeaeae;
cursor: pointer;
text-align: center;
font-weight: bold;
padding: 5px 0;
clear: left;
}
:global .react-datepicker__portal {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
justify-content: center;
align-items: center;
display: flex;
z-index: 2147483647;
}
:global .react-datepicker__children-container {
width: 17.25em;
margin: 0.5em;
padding-right: 0.25em;
padding-left: 0.25em;
height: auto;
}
:global .react-datepicker__aria-live {
position: absolute;
clip-path: circle(0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
white-space: nowrap;
}
:global .react-datepicker__calendar-icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
}
:global .react-datepicker-popper-offset {
margin-top: -0.7em;
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+806
View File
@@ -0,0 +1,806 @@
@charset "UTF-8";
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
border-color: #ccc;
border-style: solid;
border-width: 3px 3px 0 0;
content: "";
display: block;
height: 9px;
position: absolute;
top: 6px;
width: 9px;
}
.react-datepicker__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.react-datepicker-wrapper {
display: inline-block;
padding: 0;
border: 0;
}
.react-datepicker {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 0.8rem;
background-color: #fff;
color: #000;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
display: inline-block;
position: relative;
line-height: initial;
}
.react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
border-bottom-left-radius: 0.375em;
border-bottom-right-radius: 0.375em;
}
.react-datepicker-popper {
z-index: 1;
line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
.react-datepicker__header {
text-align: center;
background-color: #f0f0f0;
border-bottom: 1px solid #aeaeae;
border-top-left-radius: 0.3rem;
padding: 8px 0;
position: relative;
}
.react-datepicker__header--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
border-top-right-radius: 0.3rem;
}
.react-datepicker__header--middle {
border-top: 1px solid #aeaeae;
border-radius: 0;
margin-top: 4px;
}
.react-datepicker__header--bottom {
border-bottom: none;
border-top: 1px solid #aeaeae;
border-radius: 0 0 0.3rem 0.3rem;
}
.react-datepicker__header-wrapper {
position: relative;
}
.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 2px;
}
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
display: inline-block;
margin: 0 15px;
}
.react-datepicker__month-select,
.react-datepicker__year-select,
.react-datepicker__month-year-select {
background-color: transparent;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: inherit;
margin-top: 5px;
padding: 2px 5px;
}
.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__month-year-select:focus-visible {
outline: auto 1px;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
margin-top: 0;
color: #000;
font-weight: bold;
font-size: 0.944rem;
}
h2.react-datepicker__current-month {
padding: 0;
margin: 0;
}
.react-datepicker-time__header {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.react-datepicker__navigation {
align-items: center;
background: none;
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
position: absolute;
top: 2px;
padding: 0;
border: none;
z-index: 1;
height: 32px;
width: 32px;
text-indent: -999em;
overflow: hidden;
}
.react-datepicker__navigation--previous {
left: 2px;
}
.react-datepicker__navigation--next {
right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 85px;
}
.react-datepicker__navigation--years {
position: relative;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.react-datepicker__navigation--years-previous {
top: 4px;
}
.react-datepicker__navigation--years-upcoming {
top: -4px;
}
.react-datepicker__navigation:hover *::before {
border-color: rgb(165.75, 165.75, 165.75);
}
.react-datepicker__navigation-icon {
position: relative;
top: -1px;
font-size: 20px;
width: 0;
}
.react-datepicker__navigation-icon--next {
left: -2px;
}
.react-datepicker__navigation-icon--next::before {
transform: rotate(45deg);
left: -7px;
}
.react-datepicker__navigation-icon--previous {
right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
transform: rotate(225deg);
right: -7px;
}
.react-datepicker__month-container {
float: left;
}
.react-datepicker__year {
margin: 0.5em;
text-align: center;
}
.react-datepicker__year-wrapper {
display: flex;
flex-wrap: wrap;
max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
display: inline-block;
width: 5em;
margin: 2px;
}
.react-datepicker__month {
margin: 0.5em;
text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
display: inline-block;
width: 5em;
margin: 2px;
}
.react-datepicker__input-time-container {
clear: both;
width: 100%;
float: left;
margin: 5px 0 10px 15px;
text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
display: inline-block;
margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
-moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
margin-left: 5px;
display: inline-block;
}
.react-datepicker__time-container {
float: right;
border-left: 1px solid #aeaeae;
width: 85px;
}
.react-datepicker__time-container--with-today-button {
display: inline;
border: 1px solid #aeaeae;
border-radius: 0.375em;
position: absolute;
right: -87px;
top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
position: relative;
background: white;
border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
width: 85px;
overflow-x: hidden;
margin: 0 auto;
text-align: center;
border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
list-style: none;
margin: 0;
height: calc(195px + 2.125em / 2);
overflow-y: scroll;
padding-right: 0;
padding-left: 0;
width: 100%;
box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
height: 30px;
padding: 5px 10px;
white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
cursor: pointer;
background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background-color: #216ba5;
color: white;
font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
cursor: default;
background-color: transparent;
}
.react-datepicker__week-number {
color: #ccc;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
.react-datepicker__week-number--selected:hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day-names {
text-align: center;
white-space: nowrap;
margin-bottom: -8px;
}
.react-datepicker__week {
white-space: nowrap;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
color: #000;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
cursor: default;
color: #ccc;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
border-radius: 0.3rem;
background-color: #3dcc4a;
color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
position: relative;
border-radius: 0.3rem;
background-color: #ff6803;
color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
visibility: visible;
opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
border-radius: 0.3rem;
background-color: rgb(186.25, 217.0833333333, 241.25);
color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
background-color: #f0f0f0;
color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
cursor: default;
color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
position: absolute;
bottom: 70%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__input-container {
position: relative;
display: inline-block;
width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
position: absolute;
padding: 0.625em;
box-sizing: content-box;
}
.react-datepicker__view-calendar-icon input {
padding: 6px 10px 5px 25px;
}
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
border: 1px solid transparent;
border-radius: 0.3rem;
position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
transform: rotate(135deg);
right: -16px;
top: 0;
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
background-color: #f0f0f0;
position: absolute;
width: 50%;
left: 25%;
top: 30px;
z-index: 1;
text-align: center;
border-radius: 0.3rem;
border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
height: 150px;
overflow-y: scroll;
}
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
line-height: 20px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
position: absolute;
left: 15px;
}
.react-datepicker__close-icon {
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
padding: 0 6px 0 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.react-datepicker__close-icon::after {
cursor: pointer;
background-color: #216ba5;
color: #fff;
border-radius: 50%;
height: 16px;
width: 16px;
padding: 2px;
font-size: 12px;
line-height: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
content: "×";
}
.react-datepicker__close-icon--disabled {
cursor: default;
}
.react-datepicker__close-icon--disabled::after {
cursor: default;
background-color: #ccc;
}
.react-datepicker__today-button {
background: #f0f0f0;
border-top: 1px solid #aeaeae;
cursor: pointer;
text-align: center;
font-weight: bold;
padding: 5px 0;
clear: left;
}
.react-datepicker__portal {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
justify-content: center;
align-items: center;
display: flex;
z-index: 2147483647;
}
.react-datepicker__children-container {
width: 17.25em;
margin: 0.5em;
padding-right: 0.25em;
padding-left: 0.25em;
height: auto;
}
.react-datepicker__aria-live {
position: absolute;
clip-path: circle(0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
white-space: nowrap;
}
.react-datepicker__calendar-icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
}
.react-datepicker-popper-offset {
margin-top: -0.7em;
}
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+771
View File
@@ -0,0 +1,771 @@
@charset "UTF-8";
:global .react-datepicker__navigation-icon::before, :global .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-year-read-view--down-arrow {
border-color: #ccc;
border-style: solid;
border-width: 3px 3px 0 0;
content: "";
display: block;
height: 9px;
position: absolute;
top: 6px;
width: 9px;
}
:global .react-datepicker__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:global .react-datepicker-wrapper {
display: inline-block;
padding: 0;
border: 0;
}
:global .react-datepicker {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 0.8rem;
background-color: #fff;
color: #000;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
display: inline-block;
position: relative;
line-height: initial;
}
:global .react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
:global .react-datepicker--time-only .react-datepicker__time,
:global .react-datepicker--time-only .react-datepicker__time-box {
border-bottom-left-radius: 0.375em;
border-bottom-right-radius: 0.375em;
}
:global .react-datepicker-popper {
z-index: 1;
line-height: 0;
}
:global .react-datepicker-popper .react-datepicker__triangle {
stroke: #aeaeae;
}
:global .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
:global .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
:global .react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, :global .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
fill: #fff;
color: #fff;
}
:global .react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
fill: #f0f0f0;
color: #f0f0f0;
}
:global .react-datepicker__header {
text-align: center;
background-color: #f0f0f0;
border-bottom: 1px solid #aeaeae;
border-top-left-radius: 0.3rem;
padding: 8px 0;
position: relative;
}
:global .react-datepicker__header--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
:global .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
border-top-left-radius: 0;
}
:global .react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
border-top-right-radius: 0.3rem;
}
:global .react-datepicker__header--middle {
border-top: 1px solid #aeaeae;
border-radius: 0;
margin-top: 4px;
}
:global .react-datepicker__header--bottom {
border-bottom: none;
border-top: 1px solid #aeaeae;
border-radius: 0 0 0.3rem 0.3rem;
}
:global .react-datepicker__header-wrapper {
position: relative;
}
:global .react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 2px;
}
:global .react-datepicker__year-dropdown-container--select,
:global .react-datepicker__month-dropdown-container--select,
:global .react-datepicker__month-year-dropdown-container--select,
:global .react-datepicker__year-dropdown-container--scroll,
:global .react-datepicker__month-dropdown-container--scroll,
:global .react-datepicker__month-year-dropdown-container--scroll {
display: inline-block;
margin: 0 15px;
}
:global .react-datepicker__month-select,
:global .react-datepicker__year-select,
:global .react-datepicker__month-year-select {
background-color: transparent;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
color: inherit;
cursor: pointer;
font-family: inherit;
font-size: inherit;
margin-top: 5px;
padding: 2px 5px;
}
:global .react-datepicker__month-select:focus-visible,
:global .react-datepicker__year-select:focus-visible,
:global .react-datepicker__month-year-select:focus-visible {
outline: auto 1px;
}
:global .react-datepicker__current-month,
:global .react-datepicker-time__header,
:global .react-datepicker-year-header {
margin-top: 0;
color: #000;
font-weight: bold;
font-size: 0.944rem;
}
:global h2.react-datepicker__current-month {
padding: 0;
margin: 0;
}
:global .react-datepicker-time__header {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
:global .react-datepicker__navigation {
align-items: center;
background: none;
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
position: absolute;
top: 2px;
padding: 0;
border: none;
z-index: 1;
height: 32px;
width: 32px;
text-indent: -999em;
overflow: hidden;
}
:global .react-datepicker__navigation--previous {
left: 2px;
}
:global .react-datepicker__navigation--next {
right: 2px;
}
:global .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 85px;
}
:global .react-datepicker__navigation--years {
position: relative;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
:global .react-datepicker__navigation--years-previous {
top: 4px;
}
:global .react-datepicker__navigation--years-upcoming {
top: -4px;
}
:global .react-datepicker__navigation:hover *::before {
border-color: rgb(165.75, 165.75, 165.75);
}
:global .react-datepicker__navigation-icon {
position: relative;
top: -1px;
font-size: 20px;
width: 0;
}
:global .react-datepicker__navigation-icon--next {
left: -2px;
}
:global .react-datepicker__navigation-icon--next::before {
transform: rotate(45deg);
left: -7px;
}
:global .react-datepicker__navigation-icon--previous {
right: -2px;
}
:global .react-datepicker__navigation-icon--previous::before {
transform: rotate(225deg);
right: -7px;
}
:global .react-datepicker__month-container {
float: left;
}
:global .react-datepicker__year {
margin: 0.5em;
text-align: center;
}
:global .react-datepicker__year-wrapper {
display: flex;
flex-wrap: wrap;
max-width: 180px;
}
:global .react-datepicker__year .react-datepicker__year-text {
display: inline-block;
width: 5em;
margin: 2px;
}
:global .react-datepicker__month {
margin: 0.5em;
text-align: center;
}
:global .react-datepicker__month .react-datepicker__month-text,
:global .react-datepicker__month .react-datepicker__quarter-text {
display: inline-block;
width: 5em;
margin: 2px;
}
:global .react-datepicker__input-time-container {
clear: both;
width: 100%;
float: left;
margin: 5px 0 10px 15px;
text-align: left;
}
:global .react-datepicker__input-time-container .react-datepicker-time__caption {
display: inline-block;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container {
display: inline-block;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
display: inline-block;
margin-left: 10px;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
width: auto;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
-moz-appearance: textfield;
}
:global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
margin-left: 5px;
display: inline-block;
}
:global .react-datepicker__time-container {
float: right;
border-left: 1px solid #aeaeae;
width: 85px;
}
:global .react-datepicker__time-container--with-today-button {
display: inline;
border: 1px solid #aeaeae;
border-radius: 0.375em;
position: absolute;
right: -87px;
top: 0;
}
:global .react-datepicker__time-container .react-datepicker__time {
position: relative;
background: white;
border-bottom-right-radius: 0.375em;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
width: 85px;
overflow-x: hidden;
margin: 0 auto;
text-align: center;
border-bottom-right-radius: 0.375em;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
list-style: none;
margin: 0;
height: calc(195px + 2.125em / 2);
overflow-y: scroll;
padding-right: 0;
padding-left: 0;
width: 100%;
box-sizing: content-box;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
height: 30px;
padding: 5px 10px;
white-space: nowrap;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
cursor: pointer;
background-color: #f0f0f0;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background-color: #216ba5;
color: white;
font-weight: bold;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background-color: #216ba5;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
color: #ccc;
}
:global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
cursor: default;
background-color: transparent;
}
:global .react-datepicker__week-number {
color: #ccc;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
:global .react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
:global .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
:global .react-datepicker__week-number--selected {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
:global .react-datepicker__week-number--selected:hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
:global .react-datepicker__day-names {
text-align: center;
white-space: nowrap;
margin-bottom: -8px;
}
:global .react-datepicker__week {
white-space: nowrap;
}
:global .react-datepicker__day-name,
:global .react-datepicker__day,
:global .react-datepicker__time-name {
color: #000;
display: inline-block;
width: 2.125em;
line-height: 2.125em;
text-align: center;
margin: 0.208em;
}
:global .react-datepicker__day-name--disabled,
:global .react-datepicker__day--disabled,
:global .react-datepicker__time-name--disabled {
cursor: default;
color: #ccc;
}
:global .react-datepicker__day,
:global .react-datepicker__month-text,
:global .react-datepicker__quarter-text,
:global .react-datepicker__year-text {
cursor: pointer;
}
:global .react-datepicker__day:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text:not([aria-disabled=true]):hover {
border-radius: 0.3rem;
background-color: #f0f0f0;
}
:global .react-datepicker__day--today,
:global .react-datepicker__month-text--today,
:global .react-datepicker__quarter-text--today,
:global .react-datepicker__year-text--today {
font-weight: bold;
}
:global .react-datepicker__day--highlighted,
:global .react-datepicker__month-text--highlighted,
:global .react-datepicker__quarter-text--highlighted,
:global .react-datepicker__year-text--highlighted {
border-radius: 0.3rem;
background-color: #3dcc4a;
color: #fff;
}
:global .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
:global .react-datepicker__day--highlighted-custom-1,
:global .react-datepicker__month-text--highlighted-custom-1,
:global .react-datepicker__quarter-text--highlighted-custom-1,
:global .react-datepicker__year-text--highlighted-custom-1 {
color: magenta;
}
:global .react-datepicker__day--highlighted-custom-2,
:global .react-datepicker__month-text--highlighted-custom-2,
:global .react-datepicker__quarter-text--highlighted-custom-2,
:global .react-datepicker__year-text--highlighted-custom-2 {
color: green;
}
:global .react-datepicker__day--holidays,
:global .react-datepicker__month-text--holidays,
:global .react-datepicker__quarter-text--holidays,
:global .react-datepicker__year-text--holidays {
position: relative;
border-radius: 0.3rem;
background-color: #ff6803;
color: #fff;
}
:global .react-datepicker__day--holidays .overlay,
:global .react-datepicker__month-text--holidays .overlay,
:global .react-datepicker__quarter-text--holidays .overlay,
:global .react-datepicker__year-text--holidays .overlay {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
:global .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
background-color: rgb(207, 82.9642857143, 0);
}
:global .react-datepicker__day--holidays:hover .overlay,
:global .react-datepicker__month-text--holidays:hover .overlay,
:global .react-datepicker__quarter-text--holidays:hover .overlay,
:global .react-datepicker__year-text--holidays:hover .overlay {
visibility: visible;
opacity: 1;
}
:global .react-datepicker__day--selected, :global .react-datepicker__day--in-selecting-range, :global .react-datepicker__day--in-range,
:global .react-datepicker__month-text--selected,
:global .react-datepicker__month-text--in-selecting-range,
:global .react-datepicker__month-text--in-range,
:global .react-datepicker__quarter-text--selected,
:global .react-datepicker__quarter-text--in-selecting-range,
:global .react-datepicker__quarter-text--in-range,
:global .react-datepicker__year-text--selected,
:global .react-datepicker__year-text--in-selecting-range,
:global .react-datepicker__year-text--in-range {
border-radius: 0.3rem;
background-color: #216ba5;
color: #fff;
}
:global .react-datepicker__day--selected:not([aria-disabled=true]):hover, :global .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, :global .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
}
:global .react-datepicker__day--keyboard-selected,
:global .react-datepicker__month-text--keyboard-selected,
:global .react-datepicker__quarter-text--keyboard-selected,
:global .react-datepicker__year-text--keyboard-selected {
border-radius: 0.3rem;
background-color: rgb(186.25, 217.0833333333, 241.25);
color: rgb(0, 0, 0);
}
:global .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
:global .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
:global .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
:global .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
background-color: rgb(28.75, 93.2196969697, 143.75);
color: #fff;
}
:global .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
:global .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
:global .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
:global .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
background-color: rgba(33, 107, 165, 0.5);
}
:global .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), :global .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
:global .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
background-color: #f0f0f0;
color: #000;
}
:global .react-datepicker__day--disabled,
:global .react-datepicker__month-text--disabled,
:global .react-datepicker__quarter-text--disabled,
:global .react-datepicker__year-text--disabled {
cursor: default;
color: #ccc;
}
:global .react-datepicker__day--disabled .overlay,
:global .react-datepicker__month-text--disabled .overlay,
:global .react-datepicker__quarter-text--disabled .overlay,
:global .react-datepicker__year-text--disabled .overlay {
position: absolute;
bottom: 70%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 4px;
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
}
:global .react-datepicker__input-container {
position: relative;
display: inline-block;
width: 100%;
}
:global .react-datepicker__input-container .react-datepicker__calendar-icon {
position: absolute;
padding: 0.625em;
box-sizing: content-box;
}
:global .react-datepicker__view-calendar-icon input {
padding: 6px 10px 5px 25px;
}
:global .react-datepicker__year-read-view,
:global .react-datepicker__month-read-view,
:global .react-datepicker__month-year-read-view {
border: 1px solid transparent;
border-radius: 0.3rem;
position: relative;
}
:global .react-datepicker__year-read-view:hover,
:global .react-datepicker__month-read-view:hover,
:global .react-datepicker__month-year-read-view:hover {
cursor: pointer;
}
:global .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
border-top-color: rgb(178.5, 178.5, 178.5);
}
:global .react-datepicker__year-read-view--down-arrow,
:global .react-datepicker__month-read-view--down-arrow,
:global .react-datepicker__month-year-read-view--down-arrow {
transform: rotate(135deg);
right: -16px;
top: 0;
}
:global .react-datepicker__year-dropdown,
:global .react-datepicker__month-dropdown,
:global .react-datepicker__month-year-dropdown {
background-color: #f0f0f0;
position: absolute;
width: 50%;
left: 25%;
top: 30px;
z-index: 1;
text-align: center;
border-radius: 0.3rem;
border: 1px solid #aeaeae;
}
:global .react-datepicker__year-dropdown:hover,
:global .react-datepicker__month-dropdown:hover,
:global .react-datepicker__month-year-dropdown:hover {
cursor: pointer;
}
:global .react-datepicker__year-dropdown--scrollable,
:global .react-datepicker__month-dropdown--scrollable,
:global .react-datepicker__month-year-dropdown--scrollable {
height: 150px;
overflow-y: scroll;
}
:global .react-datepicker__year-option,
:global .react-datepicker__month-option,
:global .react-datepicker__month-year-option {
line-height: 20px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
:global .react-datepicker__year-option:first-of-type,
:global .react-datepicker__month-option:first-of-type,
:global .react-datepicker__month-year-option:first-of-type {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
:global .react-datepicker__year-option:last-of-type,
:global .react-datepicker__month-option:last-of-type,
:global .react-datepicker__month-year-option:last-of-type {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
:global .react-datepicker__year-option:hover,
:global .react-datepicker__month-option:hover,
:global .react-datepicker__month-year-option:hover {
background-color: #ccc;
}
:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
border-bottom-color: rgb(178.5, 178.5, 178.5);
}
:global .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
:global .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
:global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
border-top-color: rgb(178.5, 178.5, 178.5);
}
:global .react-datepicker__year-option--selected,
:global .react-datepicker__month-option--selected,
:global .react-datepicker__month-year-option--selected {
position: absolute;
left: 15px;
}
:global .react-datepicker__close-icon {
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
padding: 0 6px 0 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: table-cell;
vertical-align: middle;
}
:global .react-datepicker__close-icon::after {
cursor: pointer;
background-color: #216ba5;
color: #fff;
border-radius: 50%;
height: 16px;
width: 16px;
padding: 2px;
font-size: 12px;
line-height: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
content: "×";
}
:global .react-datepicker__close-icon--disabled {
cursor: default;
}
:global .react-datepicker__close-icon--disabled::after {
cursor: default;
background-color: #ccc;
}
:global .react-datepicker__today-button {
background: #f0f0f0;
border-top: 1px solid #aeaeae;
cursor: pointer;
text-align: center;
font-weight: bold;
padding: 5px 0;
clear: left;
}
:global .react-datepicker__portal {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
justify-content: center;
align-items: center;
display: flex;
z-index: 2147483647;
}
:global .react-datepicker__children-container {
width: 17.25em;
margin: 0.5em;
padding-right: 0.25em;
padding-left: 0.25em;
height: auto;
}
:global .react-datepicker__aria-live {
position: absolute;
clip-path: circle(0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
white-space: nowrap;
}
:global .react-datepicker__calendar-icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
}
:global .react-datepicker-popper-offset {
margin-top: -0.7em;
}
+45
View File
@@ -0,0 +1,45 @@
import React, { Component } from "react";
import type { ReactNode } from "react";
interface TabLoopProps {
enableTabLoop?: boolean;
children?: ReactNode | undefined;
}
/**
* `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.
*/
export default class TabLoop extends Component<TabLoopProps> {
static defaultProps: {
enableTabLoop: boolean;
};
constructor(props: TabLoopProps);
private tabLoopRef;
/**
* `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.
*/
getTabChildren: () => any[];
handleFocusStart: () => void;
handleFocusEnd: () => void;
render(): React.ReactNode;
}
export {};
+49
View File
@@ -0,0 +1,49 @@
import React, { Component } from "react";
import { type Locale, type TimeFilterOptions } from "./date_utils";
interface TimeProps extends Pick<TimeFilterOptions, "minTime" | "maxTime" | "excludeTimes" | "includeTimes" | "filterTime"> {
format?: string;
intervals?: number;
selected?: Date | null;
openToDate?: Date;
onChange?: (time: Date) => void;
timeClassName?: (time: Date) => string;
todayButton?: React.ReactNode;
monthRef?: HTMLDivElement;
timeCaption?: string;
injectTimes?: Date[];
handleOnKeyDown?: React.KeyboardEventHandler<HTMLLIElement>;
locale?: Locale;
showTimeSelectOnly?: boolean;
showTimeCaption?: boolean;
}
interface TimeState {
height: number | null;
}
export default class Time extends Component<TimeProps, TimeState> {
static get defaultProps(): {
intervals: number;
todayButton: null;
timeCaption: string;
showTimeCaption: boolean;
};
static calcCenterPosition: (listHeight: number, centerLiRef: HTMLLIElement) => number;
private resizeObserver?;
state: TimeState;
componentDidMount(): void;
componentWillUnmount(): void;
private header?;
private list?;
private centerLi?;
private observeDatePickerHeightChanges;
private updateContainerHeight;
scrollToTheSelectedTime: () => void;
handleClick: (time: Date) => void;
isSelectedTime: (time: Date) => boolean | null;
isDisabledTime: (time: Date) => boolean | undefined;
liClasses: (time: Date) => string;
handleOnKeyDown: (event: React.KeyboardEvent<HTMLLIElement>, time: Date) => void;
renderTimes: () => React.ReactElement[];
renderTimeCaption: () => React.ReactElement;
render(): React.JSX.Element;
}
export {};
+35
View File
@@ -0,0 +1,35 @@
import React, { Component } from "react";
import Day from "./day";
import WeekNumber from "./week_number";
interface DayProps extends React.ComponentPropsWithoutRef<typeof Day> {
}
interface WeekNumberProps extends React.ComponentPropsWithoutRef<typeof WeekNumber> {
}
interface WeekProps extends Omit<DayProps, "ariaLabelPrefixWhenEnabled" | "ariaLabelPrefixWhenDisabled" | "day" | "onClick" | "onMouseEnter">, Omit<WeekNumberProps, "weekNumber" | "date" | "onClick"> {
day: Date;
chooseDayAriaLabelPrefix?: DayProps["ariaLabelPrefixWhenEnabled"];
disabledDayAriaLabelPrefix?: DayProps["ariaLabelPrefixWhenDisabled"];
onDayClick?: (day: Date, event: React.MouseEvent<HTMLDivElement>) => void;
onDayMouseEnter?: (day: Date) => void;
shouldCloseOnSelect?: boolean;
setOpen?: (open: boolean) => void;
formatWeekNumber?: (date: Date) => number;
onWeekSelect?: (day: Date, weekNumber: number, event: React.MouseEvent<HTMLDivElement>) => void;
weekClassName?: (date: Date) => string;
}
export default class Week extends Component<WeekProps> {
static get defaultProps(): {
shouldCloseOnSelect: boolean;
};
isDisabled: (day: Date) => boolean;
handleDayClick: (day: Date, event: React.MouseEvent<HTMLDivElement>) => void;
handleDayMouseEnter: (day: Date) => void;
handleWeekClick: (day: Date, weekNumber: number, event: React.MouseEvent<HTMLDivElement>) => void;
formatWeekNumber: (date: Date) => number;
isWeekDisabled: () => boolean;
renderDays: () => React.JSX.Element[];
startOfWeek: () => Date;
isKeyboardSelected: () => boolean;
render(): React.ReactElement;
}
export {};
+33
View File
@@ -0,0 +1,33 @@
import React, { Component } from "react";
interface WeekNumberProps {
weekNumber: number;
date: Date;
onClick?: React.MouseEventHandler<HTMLDivElement>;
ariaLabelPrefix?: string;
selected?: Date | null;
preSelection?: Date | null;
showWeekPicker?: boolean;
showWeekNumber?: boolean;
disabledKeyboardNavigation?: boolean;
inline?: boolean;
shouldFocusDayInline?: boolean;
handleOnKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
containerRef?: React.RefObject<HTMLDivElement | null>;
isInputFocused?: boolean;
isWeekDisabled?: boolean;
}
export default class WeekNumber extends Component<WeekNumberProps> {
static get defaultProps(): {
ariaLabelPrefix: string;
};
componentDidMount(): void;
componentDidUpdate(prevProps: WeekNumberProps): void;
weekNumberEl: React.RefObject<HTMLDivElement | null>;
handleClick: (event: React.MouseEvent<HTMLDivElement>) => void;
handleOnKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
isKeyboardSelected: () => boolean;
getTabIndex: () => number;
handleFocusWeekNumber: (prevProps?: Partial<WeekNumberProps>) => void;
render(): React.ReactElement;
}
export {};
+34
View File
@@ -0,0 +1,34 @@
import { type UseFloatingOptions, type Middleware, type Placement, type UseFloatingReturn } from "@floating-ui/react";
import React from "react";
export interface FloatingProps {
hidePopper?: boolean;
popperProps: UseFloatingReturn & {
arrowRef: React.RefObject<SVGSVGElement>;
};
}
export interface WithFloatingProps {
popperModifiers?: Middleware[];
popperProps?: Omit<UseFloatingOptions, "middleware">;
hidePopper?: boolean;
popperPlacement?: Placement;
}
/**
* `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.
*/
export default function withFloating<T extends FloatingProps>(Component: React.ComponentType<T>): {
(props: Omit<T, "popperProps"> & WithFloatingProps): React.ReactElement;
displayName: string;
};
+74
View File
@@ -0,0 +1,74 @@
import React, { Component } from "react";
import { type DateFilterOptionsWithDisabled } from "./date_utils";
interface YearProps extends Pick<DateFilterOptionsWithDisabled, "minDate" | "maxDate" | "excludeDates" | "includeDates" | "filterDate" | "disabled"> {
clearSelectingDate?: VoidFunction;
date?: Date;
disabledKeyboardNavigation?: boolean;
onDayClick?: (date: Date, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
preSelection?: Date | null;
setPreSelection?: (date?: Date | null) => void;
selectsMultiple?: boolean;
selectedDates?: Date[];
selected?: Date | null;
inline?: boolean;
usePointerEvent?: boolean;
onYearMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, year: number) => void;
onYearMouseLeave: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, year: number) => void;
selectingDate?: Date;
renderYearContent?: (year: number) => React.ReactNode;
selectsEnd?: boolean;
selectsStart?: boolean;
selectsRange?: boolean;
startDate?: Date | null;
endDate?: Date | null;
yearItemNumber?: number;
handleOnKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
yearClassName?: (date: Date) => string;
}
/**
* `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.
*/
export default class Year extends Component<YearProps> {
constructor(props: YearProps);
YEAR_REFS: React.RefObject<HTMLDivElement | null>[];
isDisabled: (date: Date) => boolean;
isExcluded: (date: Date) => boolean;
selectingDate: () => Date | null | undefined;
updateFocusOnPaginate: (refIndex: number) => void;
handleYearClick: (day: Date, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
handleYearNavigation: (newYear: number, newDate: Date) => void;
isSameDay: (y: Date, other: Date) => boolean;
isCurrentYear: (y: number) => boolean;
isRangeStart: (y: number) => boolean | null | undefined;
isRangeEnd: (y: number) => boolean | null | undefined;
isInRange: (y: number) => boolean;
isInSelectingRange: (y: number) => boolean;
isSelectingRangeStart: (y: number) => boolean;
isSelectingRangeEnd: (y: number) => boolean;
isKeyboardSelected: (y: number) => boolean | undefined;
isSelectedYear: (year: number) => boolean | undefined;
onYearClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>, y: number) => void;
onYearKeyDown: (event: React.KeyboardEvent<HTMLDivElement>, y: number) => void;
getYearClassNames: (y: number) => string;
getYearTabIndex: (y: number) => "-1" | "0";
getYearContent: (y: number) => React.ReactNode;
render(): React.JSX.Element | null;
}
export {};
+31
View File
@@ -0,0 +1,31 @@
import React, { Component } from "react";
import YearDropdownOptions from "./year_dropdown_options";
interface YearDropdownOptionsProps extends React.ComponentPropsWithoutRef<typeof YearDropdownOptions> {
}
interface YearDropdownProps extends Omit<YearDropdownOptionsProps, "onChange" | "onCancel"> {
adjustDateOnChange?: boolean;
dropdownMode: "scroll" | "select";
onChange: (year: number) => void;
date: Date;
onSelect?: (date: Date, event?: React.MouseEvent<HTMLButtonElement>) => void;
setOpen?: (open: boolean) => void;
}
interface YearDropdownState {
dropdownVisible: boolean;
}
export default class YearDropdown extends Component<YearDropdownProps, YearDropdownState> {
state: YearDropdownState;
renderSelectOptions: () => React.ReactElement[];
onSelectChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
renderSelectMode: () => React.ReactElement;
renderReadView: (visible: boolean) => React.ReactElement;
renderDropdown: () => React.ReactElement;
renderScrollMode: () => React.ReactElement[];
onChange: (year: number) => void;
toggleDropdown: (event?: React.MouseEvent<HTMLButtonElement>) => void;
handleYearChange: (date: Date, event?: React.MouseEvent<HTMLButtonElement>) => void;
onSelect: (date: Date, event?: React.MouseEvent<HTMLButtonElement>) => void;
setOpen: () => void;
render(): React.ReactElement;
}
export {};
+28
View File
@@ -0,0 +1,28 @@
import React, { Component } from "react";
interface YearDropdownOptionsProps {
minDate?: Date;
maxDate?: Date;
onChange: (year: number) => void;
onCancel: VoidFunction;
scrollableYearDropdown?: boolean;
year: number;
yearDropdownItemNumber?: number;
}
interface YearDropdownOptionsState {
yearsList: number[];
}
export default class YearDropdownOptions extends Component<YearDropdownOptionsProps, YearDropdownOptionsState> {
constructor(props: YearDropdownOptionsProps);
componentDidMount(): void;
dropdownRef: React.RefObject<HTMLDivElement | null>;
yearOptionButtonsRef: Record<number, HTMLDivElement | null>;
handleOptionKeyDown: (year: number, e: React.KeyboardEvent) => void;
renderOptions: () => React.ReactElement[];
onChange: (year: number) => void;
handleClickOutside: () => void;
shiftYears: (amount: number) => void;
incrementYears: () => void;
decrementYears: () => void;
render(): React.JSX.Element;
}
export {};