first_commit
This commit is contained in:
+190
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
|
||||
+5842
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+5856
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+42
@@ -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
@@ -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
@@ -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 {};
|
||||
+17
@@ -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
@@ -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 {};
|
||||
+23
@@ -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
@@ -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
@@ -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;
|
||||
+771
@@ -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;
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+806
@@ -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;
|
||||
}
|
||||
+5856
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
+1
File diff suppressed because one or more lines are too long
+771
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {};
|
||||
Reference in New Issue
Block a user