react-day-picker

  • Version 7.4.10
  • Published
  • 631 kB
  • 1 dependency
  • MIT license

Install

npm i react-day-picker
yarn add react-day-picker
pnpm add react-day-picker

Overview

Flexible date picker component for React

Index

Variables

Classes

Interfaces

Type Aliases

Variables

variable DateUtils

const DateUtils: {
addDayToRange(day: Date, range: RangeModifier): RangeModifier;
addMonths(d: Date, n: number): Date;
clone(d: Date): Date;
isDate(d: Date): boolean;
isDayAfter(day1: Date, day2: Date): boolean;
isDayBefore(day1: Date, day2: Date): boolean;
isDayBetween(day: Date, begin: Date, end: Date): boolean;
isDayInRange(day: Date, range: RangeModifier): boolean;
isFutureDay(day: Date): boolean;
isPastDay(day: Date): boolean;
isSameDay(day1: Date, day2: Date): boolean;
isSameMonth(day1: Date, day2: Date): boolean;
};

    variable LocaleUtils

    const LocaleUtils: {
    formatDate(date: Date, format?: string | string[], locale?: string): string;
    formatDay(day: Date, locale?: string): string;
    formatMonthTitle(month: Date, locale?: string): string;
    formatWeekdayLong(weekday: number, locale?: string): string;
    formatWeekdayShort(weekday: number, locale?: string): string;
    getFirstDayOfWeek(locale?: string): number;
    getMonths(
    locale?: string
    ): [
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string,
    string
    ];
    parseDate(str: string, format?: string, locale?: string): Date;
    };

      variable ModifiersUtils

      const ModifiersUtils: {
      dayMatchesModifier(day: Date, modifier?: Modifier | Modifier[]): boolean;
      getModifiersForDay(
      day: Date,
      modifiers: Record<string, Modifier | Modifier[]>
      ): string[];
      };

        Classes

        class DayPicker

        class DayPicker extends React.Component<DayPickerProps, any> {}

          property DateUtils

          static DateUtils: {
          addDayToRange(day: Date, range: RangeModifier): RangeModifier;
          addMonths(d: Date, n: number): Date;
          clone(d: Date): Date;
          isDate(d: Date): boolean;
          isDayAfter(day1: Date, day2: Date): boolean;
          isDayBefore(day1: Date, day2: Date): boolean;
          isDayBetween(day: Date, begin: Date, end: Date): boolean;
          isDayInRange(day: Date, range: RangeModifier): boolean;
          isFutureDay(day: Date): boolean;
          isPastDay(day: Date): boolean;
          isSameDay(day1: Date, day2: Date): boolean;
          isSameMonth(day1: Date, day2: Date): boolean;
          };

            property DayModifiers

            static DayModifiers: DayModifiers;

              property dayPicker

              dayPicker: HTMLDivElement;

                property focus

                focus: () => void;

                  property LocaleUtils

                  static LocaleUtils: {
                  formatDate(date: Date, format?: string | string[], locale?: string): string;
                  formatDay(day: Date, locale?: string): string;
                  formatMonthTitle(month: Date, locale?: string): string;
                  formatWeekdayLong(weekday: number, locale?: string): string;
                  formatWeekdayShort(weekday: number, locale?: string): string;
                  getFirstDayOfWeek(locale?: string): number;
                  getMonths(
                  locale?: string
                  ): [
                  string,
                  string,
                  string,
                  string,
                  string,
                  string,
                  string,
                  string,
                  string,
                  string,
                  string,
                  string
                  ];
                  parseDate(str: string, format?: string, locale?: string): Date;
                  };

                    property Modifiers

                    static Modifiers: Modifiers;

                      property ModifiersUtils

                      static ModifiersUtils: {
                      dayMatchesModifier(day: Date, modifier?: Modifier | Modifier[]): boolean;
                      getModifiersForDay(
                      day: Date,
                      modifiers: Record<string, Modifier | Modifier[]>
                      ): string[];
                      };

                        property showMonth

                        showMonth: (month: Date) => void;

                          property showNextMonth

                          showNextMonth: () => void;

                            property showNextYear

                            showNextYear: () => void;

                              property showPreviousMonth

                              showPreviousMonth: () => void;

                                property showPreviousYear

                                showPreviousYear: () => void;

                                  property VERSION

                                  static VERSION: string;

                                    Interfaces

                                    interface AfterModifier

                                    interface AfterModifier {}

                                      property after

                                      after: Date;

                                        interface BeforeAfterModifier

                                        interface BeforeAfterModifier {}

                                          property after

                                          after: Date;

                                            property before

                                            before: Date;

                                              interface BeforeModifier

                                              interface BeforeModifier {}

                                                property before

                                                before: Date;

                                                  interface CaptionElementProps

                                                  interface CaptionElementProps {}

                                                    property classNames

                                                    classNames: ClassNames;

                                                      property date

                                                      date: Date;

                                                        property locale

                                                        locale: string;

                                                          property localeUtils

                                                          localeUtils: LocaleUtils;

                                                            property months

                                                            months?: string[];

                                                              property onClick

                                                              onClick?: React.MouseEventHandler<HTMLElement>;

                                                                interface DayModifiers

                                                                interface DayModifiers {}

                                                                  property outside

                                                                  outside: boolean | undefined;

                                                                    property today

                                                                    today: boolean | undefined;

                                                                      index signature

                                                                      [other: string]: boolean | undefined;

                                                                        interface DayPickerInputProps

                                                                        interface DayPickerInputProps {}

                                                                          property classNames

                                                                          classNames?: InputClassNames;

                                                                            property clickUnselectsDay

                                                                            clickUnselectsDay?: boolean;

                                                                              property component

                                                                              component?: any;

                                                                                property dayPickerProps

                                                                                dayPickerProps?: DayPickerProps;

                                                                                  property format

                                                                                  format?: string | string[];

                                                                                    property formatDate

                                                                                    formatDate?: (date: Date, format: string, locale: string) => string;

                                                                                      property hideOnDayClick

                                                                                      hideOnDayClick?: boolean;

                                                                                        property inputProps

                                                                                        inputProps?: object;

                                                                                          property keepFocus

                                                                                          keepFocus?: boolean;

                                                                                            property onBlur

                                                                                            onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;

                                                                                              property onChange

                                                                                              onChange?: (e: React.FocusEvent<HTMLDivElement>) => void;

                                                                                                property onClick

                                                                                                onClick?: (e: React.FocusEvent<HTMLDivElement>) => void;

                                                                                                  property onDayChange

                                                                                                  onDayChange?: (
                                                                                                  day: Date,
                                                                                                  DayModifiers: DayModifiers,
                                                                                                  dayPickerInput: DayPickerInput
                                                                                                  ) => void;

                                                                                                    property onDayPickerHide

                                                                                                    onDayPickerHide?: () => void;

                                                                                                      property onDayPickerShow

                                                                                                      onDayPickerShow?: () => void;

                                                                                                        property onFocus

                                                                                                        onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;

                                                                                                          property onKeyUp

                                                                                                          onKeyUp?: (e: React.FocusEvent<HTMLDivElement>) => void;

                                                                                                            property overlayComponent

                                                                                                            overlayComponent?: any;

                                                                                                              property parseDate

                                                                                                              parseDate?: (str: string, format: string, locale: string) => Date | void;

                                                                                                                property placeholder

                                                                                                                placeholder?: string;

                                                                                                                  property showOverlay

                                                                                                                  showOverlay?: boolean;

                                                                                                                    property style

                                                                                                                    style?: object;

                                                                                                                      property value

                                                                                                                      value?: string | Date;

                                                                                                                        interface DayPickerProps

                                                                                                                        interface DayPickerProps {}

                                                                                                                          property canChangeMonth

                                                                                                                          canChangeMonth?: boolean;

                                                                                                                            property captionElement

                                                                                                                            captionElement?:
                                                                                                                            | React.ReactElement<Partial<CaptionElementProps>>
                                                                                                                            | React.ComponentClass<CaptionElementProps>
                                                                                                                            | React.SFC<CaptionElementProps>;

                                                                                                                              property className

                                                                                                                              className?: string;

                                                                                                                                property classNames

                                                                                                                                classNames?: ClassNames;

                                                                                                                                  property containerProps

                                                                                                                                  containerProps?: React.DetailedHTMLProps<
                                                                                                                                  React.HTMLAttributes<HTMLDivElement>,
                                                                                                                                  HTMLDivElement
                                                                                                                                  >;

                                                                                                                                    property dir

                                                                                                                                    dir?: string;

                                                                                                                                      property disabledDays

                                                                                                                                      disabledDays?: Modifier | Modifier[];

                                                                                                                                        property enableOutsideDaysClick

                                                                                                                                        enableOutsideDaysClick?: boolean;

                                                                                                                                          property firstDayOfWeek

                                                                                                                                          firstDayOfWeek?: number;

                                                                                                                                            property fixedWeeks

                                                                                                                                            fixedWeeks?: boolean;

                                                                                                                                              property fromMonth

                                                                                                                                              fromMonth?: Date;

                                                                                                                                                property initialMonth

                                                                                                                                                initialMonth?: Date;

                                                                                                                                                  property labels

                                                                                                                                                  labels?: { previousMonth: string; nextMonth: string };

                                                                                                                                                    property locale

                                                                                                                                                    locale?: string;

                                                                                                                                                      property localeUtils

                                                                                                                                                      localeUtils?: LocaleUtils;

                                                                                                                                                        property modifiers

                                                                                                                                                        modifiers?: Partial<Modifiers>;

                                                                                                                                                          property modifiersStyles

                                                                                                                                                          modifiersStyles?: object;

                                                                                                                                                            property month

                                                                                                                                                            month?: Date;

                                                                                                                                                              property months

                                                                                                                                                              months?: string[];

                                                                                                                                                                property navbarElement

                                                                                                                                                                navbarElement?:
                                                                                                                                                                | React.ReactElement<Partial<NavbarElementProps>>
                                                                                                                                                                | React.ComponentClass<NavbarElementProps>
                                                                                                                                                                | React.SFC<NavbarElementProps>;

                                                                                                                                                                  property numberOfMonths

                                                                                                                                                                  numberOfMonths?: number;

                                                                                                                                                                    property onBlur

                                                                                                                                                                    onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;

                                                                                                                                                                      property onCaptionClick

                                                                                                                                                                      onCaptionClick?: (month: Date, e: React.MouseEvent<HTMLDivElement>) => void;

                                                                                                                                                                        property onDayClick

                                                                                                                                                                        onDayClick?: (
                                                                                                                                                                        day: Date,
                                                                                                                                                                        modifiers: DayModifiers,
                                                                                                                                                                        e: React.MouseEvent<HTMLDivElement>
                                                                                                                                                                        ) => void;

                                                                                                                                                                          property onDayKeyDown

                                                                                                                                                                          onDayKeyDown?: (
                                                                                                                                                                          day: Date,
                                                                                                                                                                          modifiers: DayModifiers,
                                                                                                                                                                          e: React.KeyboardEvent<HTMLDivElement>
                                                                                                                                                                          ) => void;

                                                                                                                                                                            property onDayMouseDown

                                                                                                                                                                            onDayMouseDown?: (
                                                                                                                                                                            day: Date,
                                                                                                                                                                            modifiers: DayModifiers,
                                                                                                                                                                            e: React.MouseEvent<HTMLDivElement>
                                                                                                                                                                            ) => void;

                                                                                                                                                                              property onDayMouseEnter

                                                                                                                                                                              onDayMouseEnter?: (
                                                                                                                                                                              day: Date,
                                                                                                                                                                              modifiers: DayModifiers,
                                                                                                                                                                              e: React.MouseEvent<HTMLDivElement>
                                                                                                                                                                              ) => void;

                                                                                                                                                                                property onDayMouseLeave

                                                                                                                                                                                onDayMouseLeave?: (
                                                                                                                                                                                day: Date,
                                                                                                                                                                                modifiers: DayModifiers,
                                                                                                                                                                                e: React.MouseEvent<HTMLDivElement>
                                                                                                                                                                                ) => void;

                                                                                                                                                                                  property onDayMouseUp

                                                                                                                                                                                  onDayMouseUp?: (
                                                                                                                                                                                  day: Date,
                                                                                                                                                                                  modifiers: DayModifiers,
                                                                                                                                                                                  e: React.MouseEvent<HTMLDivElement>
                                                                                                                                                                                  ) => void;

                                                                                                                                                                                    property onDayTouchEnd

                                                                                                                                                                                    onDayTouchEnd?: (
                                                                                                                                                                                    day: Date,
                                                                                                                                                                                    modifiers: DayModifiers,
                                                                                                                                                                                    e: React.TouchEvent<HTMLDivElement>
                                                                                                                                                                                    ) => void;

                                                                                                                                                                                      property onDayTouchStart

                                                                                                                                                                                      onDayTouchStart?: (
                                                                                                                                                                                      day: Date,
                                                                                                                                                                                      modifiers: DayModifiers,
                                                                                                                                                                                      e: React.TouchEvent<HTMLDivElement>
                                                                                                                                                                                      ) => void;

                                                                                                                                                                                        property onFocus

                                                                                                                                                                                        onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;

                                                                                                                                                                                          property onKeyDown

                                                                                                                                                                                          onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;

                                                                                                                                                                                            property onMonthChange

                                                                                                                                                                                            onMonthChange?: (month: Date) => void;

                                                                                                                                                                                              property onTodayButtonClick

                                                                                                                                                                                              onTodayButtonClick?: (
                                                                                                                                                                                              day: Date,
                                                                                                                                                                                              modifiers: DayModifiers,
                                                                                                                                                                                              e: React.MouseEvent<HTMLButtonElement>
                                                                                                                                                                                              ) => void;

                                                                                                                                                                                                property onWeekClick

                                                                                                                                                                                                onWeekClick?: (
                                                                                                                                                                                                weekNumber: number,
                                                                                                                                                                                                days: Date[],
                                                                                                                                                                                                e: React.MouseEvent<HTMLDivElement>
                                                                                                                                                                                                ) => void;

                                                                                                                                                                                                  property pagedNavigation

                                                                                                                                                                                                  pagedNavigation?: boolean;

                                                                                                                                                                                                    property renderDay

                                                                                                                                                                                                    renderDay?: (date: Date, modifiers: DayModifiers) => React.ReactNode;

                                                                                                                                                                                                      property renderWeek

                                                                                                                                                                                                      renderWeek?: (weekNumber: number, week: Date[], month: Date) => React.ReactNode;

                                                                                                                                                                                                        property reverseMonths

                                                                                                                                                                                                        reverseMonths?: boolean;

                                                                                                                                                                                                          property selectedDays

                                                                                                                                                                                                          selectedDays?: Modifier | Modifier[];

                                                                                                                                                                                                            property showOutsideDays

                                                                                                                                                                                                            showOutsideDays?: boolean;

                                                                                                                                                                                                              property showWeekDays

                                                                                                                                                                                                              showWeekDays?: boolean;

                                                                                                                                                                                                                property showWeekNumbers

                                                                                                                                                                                                                showWeekNumbers?: boolean;

                                                                                                                                                                                                                  property tabIndex

                                                                                                                                                                                                                  tabIndex?: number;

                                                                                                                                                                                                                    property todayButton

                                                                                                                                                                                                                    todayButton?: string;

                                                                                                                                                                                                                      property toMonth

                                                                                                                                                                                                                      toMonth?: Date;

                                                                                                                                                                                                                        property weekdayElement

                                                                                                                                                                                                                        weekdayElement?:
                                                                                                                                                                                                                        | React.ReactElement<Partial<WeekdayElementProps>>
                                                                                                                                                                                                                        | React.ComponentClass<WeekdayElementProps>
                                                                                                                                                                                                                        | React.SFC<WeekdayElementProps>;

                                                                                                                                                                                                                          property weekdaysLong

                                                                                                                                                                                                                          weekdaysLong?: string[];

                                                                                                                                                                                                                            property weekdaysShort

                                                                                                                                                                                                                            weekdaysShort?: string[];

                                                                                                                                                                                                                              interface DaysOfWeekModifier

                                                                                                                                                                                                                              interface DaysOfWeekModifier {}

                                                                                                                                                                                                                                property daysOfWeek

                                                                                                                                                                                                                                daysOfWeek: number[];

                                                                                                                                                                                                                                  interface Modifiers

                                                                                                                                                                                                                                  interface Modifiers {}

                                                                                                                                                                                                                                    property outside

                                                                                                                                                                                                                                    outside: Modifier | Modifier[];

                                                                                                                                                                                                                                      property today

                                                                                                                                                                                                                                      today: Modifier | Modifier[];

                                                                                                                                                                                                                                        index signature

                                                                                                                                                                                                                                        [other: string]: Modifier | Modifier[] | undefined;
                                                                                                                                                                                                                                          interface NavbarElementProps {}
                                                                                                                                                                                                                                            className: string;
                                                                                                                                                                                                                                              classNames: ClassNames;
                                                                                                                                                                                                                                                dir?: string;
                                                                                                                                                                                                                                                  labels: { previousMonth: string; nextMonth: string };
                                                                                                                                                                                                                                                    locale: string;
                                                                                                                                                                                                                                                      localeUtils: LocaleUtils;
                                                                                                                                                                                                                                                        month: Date;
                                                                                                                                                                                                                                                          nextMonth: Date;
                                                                                                                                                                                                                                                            previousMonth: Date;
                                                                                                                                                                                                                                                              showNextButton: boolean;
                                                                                                                                                                                                                                                                showPreviousButton: boolean;
                                                                                                                                                                                                                                                                  onNextClick: (callback?: () => void) => void;
                                                                                                                                                                                                                                                                    onPreviousClick: (callback?: () => void) => void;

                                                                                                                                                                                                                                                                      interface RangeModifier

                                                                                                                                                                                                                                                                      interface RangeModifier {}

                                                                                                                                                                                                                                                                        property from

                                                                                                                                                                                                                                                                        from: Date | undefined | null;

                                                                                                                                                                                                                                                                          property to

                                                                                                                                                                                                                                                                          to: Date | undefined | null;

                                                                                                                                                                                                                                                                            interface WeekdayElementProps

                                                                                                                                                                                                                                                                            interface WeekdayElementProps {}

                                                                                                                                                                                                                                                                              property className

                                                                                                                                                                                                                                                                              className: string;

                                                                                                                                                                                                                                                                                property locale

                                                                                                                                                                                                                                                                                locale: string;

                                                                                                                                                                                                                                                                                  property localeUtils

                                                                                                                                                                                                                                                                                  localeUtils: LocaleUtils;

                                                                                                                                                                                                                                                                                    property weekday

                                                                                                                                                                                                                                                                                    weekday: number;

                                                                                                                                                                                                                                                                                      property weekdaysLong

                                                                                                                                                                                                                                                                                      weekdaysLong?: string[];

                                                                                                                                                                                                                                                                                        property weekdaysShort

                                                                                                                                                                                                                                                                                        weekdaysShort?: string[];

                                                                                                                                                                                                                                                                                          Type Aliases

                                                                                                                                                                                                                                                                                          type DateUtils

                                                                                                                                                                                                                                                                                          type DateUtils = typeof DateUtils;

                                                                                                                                                                                                                                                                                            type FunctionModifier

                                                                                                                                                                                                                                                                                            type FunctionModifier = (date: Date) => boolean;

                                                                                                                                                                                                                                                                                              type LocaleUtils

                                                                                                                                                                                                                                                                                              type LocaleUtils = typeof LocaleUtils;

                                                                                                                                                                                                                                                                                                type Modifier

                                                                                                                                                                                                                                                                                                type Modifier =
                                                                                                                                                                                                                                                                                                | Date
                                                                                                                                                                                                                                                                                                | RangeModifier
                                                                                                                                                                                                                                                                                                | BeforeModifier
                                                                                                                                                                                                                                                                                                | AfterModifier
                                                                                                                                                                                                                                                                                                | BeforeAfterModifier
                                                                                                                                                                                                                                                                                                | DaysOfWeekModifier
                                                                                                                                                                                                                                                                                                | FunctionModifier
                                                                                                                                                                                                                                                                                                | undefined;

                                                                                                                                                                                                                                                                                                  type ModifiersUtils

                                                                                                                                                                                                                                                                                                  type ModifiersUtils = typeof ModifiersUtils;

                                                                                                                                                                                                                                                                                                    Package Files (6)

                                                                                                                                                                                                                                                                                                    Dependencies (1)

                                                                                                                                                                                                                                                                                                    Dev Dependencies (42)

                                                                                                                                                                                                                                                                                                    Peer Dependencies (1)

                                                                                                                                                                                                                                                                                                    Badge

                                                                                                                                                                                                                                                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-day-picker.

                                                                                                                                                                                                                                                                                                    • Markdown
                                                                                                                                                                                                                                                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-day-picker)
                                                                                                                                                                                                                                                                                                    • HTML
                                                                                                                                                                                                                                                                                                      <a href="https://www.jsdocs.io/package/react-day-picker"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>