@blueprintjs/datetime

  • Version 6.0.0
  • Published
  • 1.99 MB
  • 9 dependencies
  • Apache-2.0 license

Install

npm i @blueprintjs/datetime
yarn add @blueprintjs/datetime
pnpm add @blueprintjs/datetime

Overview

Components for interacting with dates and times

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable DateInput

const DateInput: React.FC<DateInputProps>;
  • Date input component.

    See Also

    • https://blueprintjs.com/docs/#datetime/date-input

variable DatePickerShortcutMenu

const DatePickerShortcutMenu: React.FC<DatePickerShortcutMenuProps>;
  • Menu of DateRangeShortcut items, typically displayed in the UI to the left of a day picker calendar.

    This component may be used for single date pickers as well as range pickers by toggling the useSingleDateShortcuts option.

variable DatePickerUtils

const DatePickerUtils: {
getDefaultMaxDate: typeof getDefaultMaxDate;
getDefaultMinDate: typeof getDefaultMinDate;
getFormattedDateString: typeof getFormattedDateString;
measureTextWidth: typeof measureTextWidth;
};
  • DatePicker-related utility functions which may be useful outside this package to build date/time components.

variable TimePrecision

const TimePrecision: {
MILLISECOND: 'millisecond';
MINUTE: 'minute';
SECOND: 'second';
};

    variable TimezoneDisplayFormat

    const TimezoneDisplayFormat: {
    ABBREVIATION: 'abbreviation';
    CODE: 'code';
    COMPOSITE: 'composite';
    LONG_NAME: 'long-name';
    OFFSET: 'offset';
    };

      Functions

      function getTimezoneMetadata

      getTimezoneMetadata: (
      timezoneIanaCode: string,
      date?: Date
      ) => TimezoneWithNames | undefined;
      • Given a timezone IANA code and an optional date object, retrieve additional metadata like its common name, offset, and abbreviation.

      Classes

      class DatePicker

      class DatePicker extends DateFnsLocalizedComponent<
      DatePickerProps,
      DatePickerState
      > {}
      • Date picker component.

        See Also

        • https://blueprintjs.com/docs/#datetime/date-picker

      constructor

      constructor(props: DatePickerProps);

        property defaultProps

        static defaultProps: DatePickerProps;

          property displayName

          static displayName: string;

            method componentDidMount

            componentDidMount: () => Promise<void>;

              method componentDidUpdate

              componentDidUpdate: (prevProps: DatePickerProps) => Promise<void>;

                method render

                render: () => React.JSX.Element;

                  method validateProps

                  protected validateProps: (props: DatePickerProps) => void;

                    class DateRangeInput

                    class DateRangeInput extends DateFnsLocalizedComponent<
                    DateRangeInputProps,
                    DateRangeInputState
                    > {}
                    • Date range input component.

                      See Also

                      • https://blueprintjs.com/docs/#datetime/date-range-input

                    constructor

                    constructor(props: DateRangeInputProps);

                      property defaultProps

                      static defaultProps: Required<
                      Pick<
                      DateRangeInputProps,
                      | 'disabled'
                      | 'popoverProps'
                      | 'allowSingleDayRange'
                      | 'closeOnSelection'
                      | 'contiguousCalendarMonths'
                      | 'dayPickerProps'
                      | 'endInputProps'
                      | 'invalidDateMessage'
                      | 'locale'
                      | 'maxDate'
                      | 'minDate'
                      | 'outOfRangeMessage'
                      | 'overlappingDatesMessage'
                      | 'selectAllOnFocus'
                      | 'shortcuts'
                      | 'singleMonthOnly'
                      | 'startInputProps'
                      >
                      >;

                        property displayName

                        static displayName: string;

                          property endInputElement

                          endInputElement: HTMLInputElement;

                            property startInputElement

                            startInputElement: HTMLInputElement;

                              method componentDidMount

                              componentDidMount: () => Promise<void>;

                                method componentDidUpdate

                                componentDidUpdate: (prevProps: DateRangeInputProps) => Promise<void>;

                                  method render

                                  render: () => React.JSX.Element;

                                    method validateProps

                                    protected validateProps: (props: DateRangeInputProps) => void;

                                      class DateRangePicker

                                      class DateRangePicker extends DateFnsLocalizedComponent<
                                      DateRangePickerProps,
                                      DateRangePickerState
                                      > {}
                                      • Date range picker component.

                                        See Also

                                        • https://blueprintjs.com/docs/#datetime/date-range-picker

                                      constructor

                                      constructor(props: DateRangePickerProps);

                                        property defaultProps

                                        static defaultProps: Required<
                                        Pick<
                                        DateRangePickerProps,
                                        | 'allowSingleDayRange'
                                        | 'contiguousCalendarMonths'
                                        | 'dayPickerProps'
                                        | 'locale'
                                        | 'maxDate'
                                        | 'minDate'
                                        | 'shortcuts'
                                        | 'singleMonthOnly'
                                        | 'reverseMonthAndYearMenus'
                                        | 'timePickerProps'
                                        >
                                        >;

                                          property displayName

                                          static displayName: string;

                                            method componentDidMount

                                            componentDidMount: () => Promise<void>;

                                              method componentDidUpdate

                                              componentDidUpdate: (prevProps: DateRangePickerProps) => Promise<void>;

                                                method render

                                                render: () => React.JSX.Element;

                                                  method validateProps

                                                  protected validateProps: (props: DateRangePickerProps) => void;

                                                    class DateRangeSelectionStrategy

                                                    class DateRangeSelectionStrategy {}

                                                      method getNextState

                                                      static getNextState: (
                                                      currentRange: DateRange,
                                                      day: Date,
                                                      allowSingleDayRange: boolean,
                                                      boundary?: Boundary
                                                      ) => DateRangeSelectionState;
                                                      • Returns the new date-range and the boundary that would be affected if day were clicked. The affected boundary may be different from the provided boundary in some cases. For example, clicking a particular boundary's selected date will always deselect it regardless of which boundary you provide to this function (because it's simply a more intuitive interaction).

                                                      class MonthAndYear

                                                      class MonthAndYear {}

                                                        constructor

                                                        constructor(month?: number, year?: number);

                                                          method clone

                                                          clone: () => MonthAndYear;

                                                            method fromDate

                                                            static fromDate: (date: Date | null) => MonthAndYear | undefined;

                                                              method getFullDate

                                                              getFullDate: () => Date;

                                                                method getMonth

                                                                getMonth: () => number;

                                                                  method getNextMonth

                                                                  getNextMonth: () => MonthAndYear;

                                                                    method getPreviousMonth

                                                                    getPreviousMonth: () => MonthAndYear;

                                                                      method getYear

                                                                      getYear: () => number;

                                                                        method isAfter

                                                                        isAfter: (monthAndYear: MonthAndYear) => boolean;

                                                                          method isBefore

                                                                          isBefore: (monthAndYear: MonthAndYear) => boolean;

                                                                            method isSame

                                                                            isSame: (monthAndYear: MonthAndYear) => boolean;

                                                                              method isSameMonth

                                                                              isSameMonth: (monthAndYear: MonthAndYear) => boolean;

                                                                                class TimePicker

                                                                                class TimePicker extends React.Component<TimePickerProps, TimePickerState> {}
                                                                                • Time picker component.

                                                                                  See Also

                                                                                  • https://blueprintjs.com/docs/#datetime/timepicker

                                                                                constructor

                                                                                constructor(props: TimePickerProps);

                                                                                  property defaultProps

                                                                                  static defaultProps: TimePickerProps;

                                                                                    property displayName

                                                                                    static displayName: string;

                                                                                      method componentDidUpdate

                                                                                      componentDidUpdate: (prevProps: TimePickerProps) => void;

                                                                                        method render

                                                                                        render: () => React.JSX.Element;

                                                                                          class TimezoneSelect

                                                                                          class TimezoneSelect extends AbstractPureComponent<
                                                                                          TimezoneSelectProps,
                                                                                          TimezoneSelectState
                                                                                          > {}
                                                                                          • Timezone select component.

                                                                                            See Also

                                                                                            • https://blueprintjs.com/docs/#datetime/timezone-select

                                                                                          constructor

                                                                                          constructor(props: TimezoneSelectProps);

                                                                                            property defaultProps

                                                                                            static defaultProps: Partial<TimezoneSelectProps>;

                                                                                              property displayName

                                                                                              static displayName: string;

                                                                                                method componentDidUpdate

                                                                                                componentDidUpdate: (
                                                                                                prevProps: TimezoneSelectProps,
                                                                                                prevState: TimezoneSelectState
                                                                                                ) => void;

                                                                                                  method render

                                                                                                  render: () => React.JSX.Element;

                                                                                                    Interfaces

                                                                                                    interface DateFormatProps

                                                                                                    interface DateFormatProps {}

                                                                                                      property invalidDateMessage

                                                                                                      invalidDateMessage?: string;
                                                                                                      • The error message to display when the date selected is invalid.

                                                                                                        "Invalid date"

                                                                                                      property locale

                                                                                                      locale?: string;
                                                                                                      • The locale name, which is passed to formatDate, parseDate

                                                                                                      property outOfRangeMessage

                                                                                                      outOfRangeMessage?: string;
                                                                                                      • The error message to display when the date selected is out of range.

                                                                                                        "Out of range"

                                                                                                      property placeholder

                                                                                                      placeholder?: string;
                                                                                                      • Placeholder text to display in empty input fields. Recommended practice is to indicate the expected date format.

                                                                                                      method formatDate

                                                                                                      formatDate: (date: Date, localeCode?: string) => string;
                                                                                                      • Function to render a JavaScript Date to a string. Optional localeCode argument comes directly from the prop on this component: if the prop is defined, then the argument will be too.

                                                                                                      method parseDate

                                                                                                      parseDate: (str: string, localeCode?: string) => Date | false | null;
                                                                                                      • Function to deserialize user input text to a JavaScript Date object. Return false if the string is an invalid date. Return null to represent the absence of a date. Optional localeCode argument comes directly from the prop on this component.

                                                                                                      interface DateInputProps

                                                                                                      interface DateInputProps
                                                                                                      extends Omit<DatePickerBaseProps, 'dayPickerProps' | 'locale' | 'modifiers'>,
                                                                                                      ReactDayPickerSingleProps,
                                                                                                      DateFnsLocaleProps,
                                                                                                      Partial<Omit<DateFormatProps, 'locale'>>,
                                                                                                      DatetimePopoverProps,
                                                                                                      Props {}

                                                                                                        property canClearSelection

                                                                                                        canClearSelection?: boolean;
                                                                                                        • Allows the user to clear the selection by clicking the currently selected day. Passed to DatePicker component.

                                                                                                          true

                                                                                                        property clearButtonText

                                                                                                        clearButtonText?: string;
                                                                                                        • Text for the reset button in the date picker action bar. Passed to DatePicker component.

                                                                                                          "Clear"

                                                                                                        property closeOnSelection

                                                                                                        closeOnSelection?: boolean;
                                                                                                        • Whether the calendar popover should close when a date is selected.

                                                                                                          true

                                                                                                        property dateFnsFormat

                                                                                                        dateFnsFormat?: string;
                                                                                                        • [date-fns format](https://date-fns.org/docs/format) string used to format & parse date strings.

                                                                                                          Mutually exclusive with the formatDate and parseDate props.

                                                                                                          See date-fns [format](https://date-fns.org/docs/format).

                                                                                                        property defaultTimezone

                                                                                                        defaultTimezone?: string;
                                                                                                        • The default timezone selected. Defaults to the user's local timezone.

                                                                                                          Mutually exclusive with timezone prop.

                                                                                                          See Also

                                                                                                          • https://www.iana.org/time-zones

                                                                                                        property defaultValue

                                                                                                        defaultValue?: string;
                                                                                                        • The default date to be used in the component when uncontrolled, represented as an ISO string.

                                                                                                        property disabled

                                                                                                        disabled?: boolean;
                                                                                                        • Whether the date input is non-interactive.

                                                                                                          false

                                                                                                        property disableTimezoneSelect

                                                                                                        disableTimezoneSelect?: boolean;
                                                                                                        • Whether to disable the timezone select.

                                                                                                          false

                                                                                                        property fill

                                                                                                        fill?: boolean;
                                                                                                        • Whether the component should take up the full width of its container.

                                                                                                        property inputProps

                                                                                                        inputProps?: Partial<Omit<InputGroupProps, 'disabled' | 'type' | 'value'>>;
                                                                                                        • Props to pass to the [InputGroup component](#core/components/input-group).

                                                                                                          Some properties are unavailable: - inputProps.value: use value instead - inputProps.disabled: use disabled instead - inputProps.type: cannot be customized, always set to "text"

                                                                                                          Note that inputProps.tagName will override popoverProps.targetTagName.

                                                                                                        property onChange

                                                                                                        onChange?: (newDate: string | null, isUserChange: boolean) => void;
                                                                                                        • Callback invoked whenever the date or timezone has changed.

                                                                                                          Parameter newDate

                                                                                                          ISO string or null (if the date is invalid or text input has been cleared)

                                                                                                          Parameter isUserChange

                                                                                                          true if the user clicked on a date in the calendar, changed the input value, or cleared the selection; false if the date was changed by changing the month or year.

                                                                                                        property onError

                                                                                                        onError?: (errorDate: Date) => void;
                                                                                                        • Called when the user finishes typing in a new date and the date causes an error state. If the date is invalid, new Date(undefined) will be returned. If the date is out of range, the out of range date will be returned (onChange is not called in this case).

                                                                                                        property onTimezoneChange

                                                                                                        onTimezoneChange?: (timezone: string) => void;
                                                                                                        • Callback invoked when the user selects a timezone.

                                                                                                          Parameter timezone

                                                                                                          the new timezone's IANA code

                                                                                                        property rightElement

                                                                                                        rightElement?: React.JSX.Element;
                                                                                                        • Element to render on right side of input.

                                                                                                        property shortcuts

                                                                                                        shortcuts?: boolean | DatePickerShortcut[];
                                                                                                        • Whether shortcuts to quickly select a date are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.

                                                                                                          false

                                                                                                        property showActionsBar

                                                                                                        showActionsBar?: boolean;
                                                                                                        • Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.

                                                                                                          false

                                                                                                        property showTimezoneSelect

                                                                                                        showTimezoneSelect?: boolean;
                                                                                                        • Whether to show the timezone select dropdown on the right side of the input. If timePrecision is undefined, this will always be false.

                                                                                                          false

                                                                                                        property timezone

                                                                                                        timezone?: string;
                                                                                                        • The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".

                                                                                                          If you set this prop, the TimezoneSelect will behave in a controlled manner and you are responsible for updating this value using the onTimezoneChange callback.

                                                                                                          Mutually exclusive with defaultTimezone prop.

                                                                                                          See [IANA Time Zones](https://www.iana.org/time-zones).

                                                                                                        property todayButtonText

                                                                                                        todayButtonText?: string;
                                                                                                        • Text for the today button in the date picker action bar. Passed to DatePicker component.

                                                                                                          "Today"

                                                                                                        property value

                                                                                                        value?: string | null;
                                                                                                        • An ISO string representing the selected time.

                                                                                                        interface DatePickerBaseProps

                                                                                                        interface DatePickerBaseProps {}

                                                                                                          property dayPickerProps

                                                                                                          dayPickerProps?: DayPickerProps;
                                                                                                          • Props to pass to ReactDayPicker. See API documentation [here](https://daypicker.dev/v8/api/type-aliases/DayPickerProps).

                                                                                                            The following props are managed by the component and cannot be configured: canChangeMonth, captionElement, fromMonth (use minDate), month (use initialMonth), toMonth (use maxDate).

                                                                                                          property footerElement

                                                                                                          footerElement?: React.JSX.Element;
                                                                                                          • An additional element to show below the date picker.

                                                                                                          property highlightCurrentDay

                                                                                                          highlightCurrentDay?: boolean;
                                                                                                          • Whether the current day should be highlighted in the calendar.

                                                                                                            false

                                                                                                          property initialMonth

                                                                                                          initialMonth?: Date;
                                                                                                          • The initial month the calendar displays.

                                                                                                          property locale

                                                                                                          locale?: string;
                                                                                                          • The locale name, which is passed to formatDate, parseDate

                                                                                                          property maxDate

                                                                                                          maxDate?: Date;
                                                                                                          • The latest date the user can select.

                                                                                                            6 months from now.

                                                                                                          property minDate

                                                                                                          minDate?: Date;
                                                                                                          • The earliest date the user can select.

                                                                                                            Jan. 1st, 20 years in the past.

                                                                                                          property modifiers

                                                                                                          modifiers?: DatePickerModifiers;
                                                                                                          • Collection of functions that determine which modifier classes get applied to which days. Each function should accept a Date and return a boolean. See the [**react-day-picker** documentation](https://daypicker.dev/v8/api/type-aliases/Modifiers) to learn more.

                                                                                                          property reverseMonthAndYearMenus

                                                                                                          reverseMonthAndYearMenus?: boolean;
                                                                                                          • If true, the month menu will appear to the left of the year menu. Otherwise, the month menu will apear to the right of the year menu.

                                                                                                            false

                                                                                                          property timePickerProps

                                                                                                          timePickerProps?: TimePickerProps;
                                                                                                          • Further configure the TimePicker that appears beneath the calendar. onChange and value are ignored in favor of the corresponding top-level props on this component.

                                                                                                            Passing any non-empty object to this prop will cause the TimePicker to appear.

                                                                                                          property timePrecision

                                                                                                          timePrecision?: TimePrecision;
                                                                                                          • The precision of time selection that accompanies the calendar. Passing a TimePrecision value (or providing timePickerProps) shows a TimePicker below the calendar. Time is preserved across date changes.

                                                                                                            This is shorthand for timePickerProps.precision and is a quick way to enable time selection.

                                                                                                          interface DatePickerModifiers

                                                                                                          interface DatePickerModifiers {}
                                                                                                          • Collection of functions that determine which modifier classes get applied to which days. See the [**react-day-picker** documentation](https://daypicker.dev/v8/api/type-aliases/Modifiers) to learn more.

                                                                                                          index signature

                                                                                                          [name: string]: (date: Date) => boolean;

                                                                                                            interface DatePickerProps

                                                                                                            interface DatePickerProps
                                                                                                            extends Omit<DatePickerBaseProps, 'dayPickerProps' | 'locale' | 'modifiers'>,
                                                                                                            DateFnsLocaleProps,
                                                                                                            ReactDayPickerSingleProps,
                                                                                                            Props {}

                                                                                                              property canClearSelection

                                                                                                              canClearSelection?: boolean;
                                                                                                              • Allows the user to clear the selection by clicking the currently selected day. If disabled, the "Clear" Button in the Actions Bar will also be disabled.

                                                                                                                true

                                                                                                              property clearButtonText

                                                                                                              clearButtonText?: string;
                                                                                                              • Text for the reset button in the action bar.

                                                                                                                "Clear"

                                                                                                              property defaultValue

                                                                                                              defaultValue?: Date;
                                                                                                              • Initial day the calendar will display as selected. This should not be set if value is set.

                                                                                                              property onChange

                                                                                                              onChange?: (selectedDate: Date | null, isUserChange: boolean) => void;
                                                                                                              • Called when the user selects a day. If being used in an uncontrolled manner, selectedDate will be null if the user clicks the currently selected day. If being used in a controlled manner, selectedDate will contain the day clicked no matter what. isUserChange is true if the user selected a day, and false if the date was automatically changed by the user navigating to a new month or year rather than explicitly clicking on a date in the calendar.

                                                                                                              property onShortcutChange

                                                                                                              onShortcutChange?: (shortcut: DatePickerShortcut, index: number) => void;
                                                                                                              • Called when the shortcuts props is enabled and the user changes the shortcut.

                                                                                                              property selectedShortcutIndex

                                                                                                              selectedShortcutIndex?: number;
                                                                                                              • The currently selected shortcut. If this prop is provided, the component acts in a controlled manner.

                                                                                                              property shortcuts

                                                                                                              shortcuts?: boolean | DatePickerShortcut[];
                                                                                                              • Whether shortcuts to quickly select a date are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.

                                                                                                              property showActionsBar

                                                                                                              showActionsBar?: boolean;
                                                                                                              • Whether the bottom bar displaying "Today" and "Clear" buttons should be shown.

                                                                                                                false

                                                                                                              property timezone

                                                                                                              timezone?: string;
                                                                                                              • The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".

                                                                                                                This prop is only used to determine what date should be selected when clicking the "Today" button in the actions bar. If this value is omitted, the current date will be set using the user's local timezone.

                                                                                                                See [IANA Time Zones](https://www.iana.org/time-zones).

                                                                                                              property todayButtonText

                                                                                                              todayButtonText?: string;
                                                                                                              • Text for the today button in the action bar.

                                                                                                                "Today"

                                                                                                              property value

                                                                                                              value?: Date | null;
                                                                                                              • The currently selected day. If this prop is provided, the component acts in a controlled manner.

                                                                                                              interface DatePickerShortcut

                                                                                                              interface DatePickerShortcut extends DateShortcutBase {}

                                                                                                                property date

                                                                                                                date: Date;
                                                                                                                • Date represented by this shortcut. Note that time components of a shortcut are ignored by default; set includeTime: true to respect them.

                                                                                                                interface DatePickerShortcutMenuProps

                                                                                                                interface DatePickerShortcutMenuProps {}

                                                                                                                  property allowSingleDayRange

                                                                                                                  allowSingleDayRange?: boolean;

                                                                                                                    property maxDate

                                                                                                                    maxDate: Date;

                                                                                                                      property minDate

                                                                                                                      minDate: Date;

                                                                                                                        property onShortcutClick

                                                                                                                        onShortcutClick: (shortcut: DateRangeShortcut, index: number) => void;

                                                                                                                          property selectedShortcutIndex

                                                                                                                          selectedShortcutIndex?: number;

                                                                                                                            property shortcuts

                                                                                                                            shortcuts: DateRangeShortcut[] | true;

                                                                                                                              property timePrecision

                                                                                                                              timePrecision: TimePrecision | undefined;

                                                                                                                                property useSingleDateShortcuts

                                                                                                                                useSingleDateShortcuts?: boolean;
                                                                                                                                • The DatePicker component reuses this component for a single date. This changes the default shortcut labels and affects which shortcuts are used.

                                                                                                                                  false

                                                                                                                                interface DateRangeInputProps

                                                                                                                                interface DateRangeInputProps
                                                                                                                                extends Omit<DatePickerBaseProps, 'dayPickerProps' | 'locale' | 'modifiers'>,
                                                                                                                                ReactDayPickerRangeProps,
                                                                                                                                DateFnsLocaleProps,
                                                                                                                                Partial<Omit<DateFormatProps, 'locale'>>,
                                                                                                                                DatetimePopoverProps,
                                                                                                                                Props {}

                                                                                                                                  property allowSingleDayRange

                                                                                                                                  allowSingleDayRange?: boolean;
                                                                                                                                  • Whether the start and end dates of the range can be the same day. If true, clicking a selected date will create a one-day range. If false, clicking a selected date will clear the selection.

                                                                                                                                    false

                                                                                                                                  property closeOnSelection

                                                                                                                                  closeOnSelection?: boolean;
                                                                                                                                  • Whether the calendar popover should close when a date range is fully selected.

                                                                                                                                    true

                                                                                                                                  property contiguousCalendarMonths

                                                                                                                                  contiguousCalendarMonths?: boolean;
                                                                                                                                  • Whether displayed months in the calendar are contiguous. If false, each side of the calendar can move independently to non-contiguous months.

                                                                                                                                    true

                                                                                                                                  property dateFnsFormat

                                                                                                                                  dateFnsFormat?: string;
                                                                                                                                  • [date-fns format](https://date-fns.org/docs/format) string used to format & parse date strings.

                                                                                                                                    Mutually exclusive with the formatDate and parseDate props.

                                                                                                                                    See date-fns [format](https://date-fns.org/docs/format).

                                                                                                                                  property defaultValue

                                                                                                                                  defaultValue?: DateRange;
                                                                                                                                  • The default date range to be used in the component when uncontrolled. This will be ignored if value is set.

                                                                                                                                  property disabled

                                                                                                                                  disabled?: boolean;
                                                                                                                                  • Whether the text inputs are non-interactive.

                                                                                                                                    false

                                                                                                                                  property endInputProps

                                                                                                                                  endInputProps?: InputGroupProps;
                                                                                                                                  • Props to pass to the end-date [input group](#core/components/input-group). disabled and value will be ignored in favor of the top-level props on this component. ref is not supported; use inputRef instead.

                                                                                                                                  property fill

                                                                                                                                  fill?: boolean;
                                                                                                                                  • Whether the component should take up the full width of its container.

                                                                                                                                  property onChange

                                                                                                                                  onChange?: (selectedRange: DateRange) => void;
                                                                                                                                  • Called when the user selects a day. If no days are selected, it will pass [null, null]. If a start date is selected but not an end date, it will pass [selectedDate, null]. If both a start and end date are selected, it will pass [startDate, endDate].

                                                                                                                                  property onError

                                                                                                                                  onError?: (errorRange: DateRange) => void;
                                                                                                                                  • Called when the user finishes typing in a new date and the date causes an error state. If the date is invalid, new Date(undefined) will be returned for the corresponding boundary of the date range. If the date is out of range, the out-of-range date will be returned for the corresponding boundary of the date range (onChange is not called in this case).

                                                                                                                                  property overlappingDatesMessage

                                                                                                                                  overlappingDatesMessage?: string;
                                                                                                                                  • The error message to display when the selected dates overlap. This can only happen when typing dates in the input field.

                                                                                                                                    "Overlapping dates"

                                                                                                                                  property selectAllOnFocus

                                                                                                                                  selectAllOnFocus?: boolean;
                                                                                                                                  • Whether the entire text field should be selected on focus.

                                                                                                                                    false

                                                                                                                                  property shortcuts

                                                                                                                                  shortcuts?: boolean | DateRangeShortcut[];
                                                                                                                                  • Whether shortcuts to quickly select a range of dates are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.

                                                                                                                                    true

                                                                                                                                  property singleMonthOnly

                                                                                                                                  singleMonthOnly?: boolean;
                                                                                                                                  • Whether to show only a single month calendar.

                                                                                                                                    false

                                                                                                                                  property startInputProps

                                                                                                                                  startInputProps?: InputGroupProps;
                                                                                                                                  • Props to pass to the start-date [input group](#core/components/input-group). disabled and value will be ignored in favor of the top-level props on this component. ref is not supported; use inputRef instead.

                                                                                                                                  property value

                                                                                                                                  value?: DateRange;
                                                                                                                                  • The currently selected date range. If the prop is strictly undefined, the component acts in an uncontrolled manner. If this prop is anything else, the component acts in a controlled manner. To display an empty value in the input fields in a controlled manner, pass [null, null]. To display an invalid date error in either input field, pass new Date(undefined) for the appropriate date in the value prop.

                                                                                                                                  interface DateRangePickerProps

                                                                                                                                  interface DateRangePickerProps
                                                                                                                                  extends Omit<DatePickerBaseProps, 'dayPickerProps' | 'locale' | 'modifiers'>,
                                                                                                                                  DateFnsLocaleProps,
                                                                                                                                  ReactDayPickerRangeProps,
                                                                                                                                  Props {}

                                                                                                                                    property allowSingleDayRange

                                                                                                                                    allowSingleDayRange?: boolean;
                                                                                                                                    • Whether the start and end dates of the range can be the same day. If true, clicking a selected date will create a one-day range. If false, clicking a selected date will clear the selection.

                                                                                                                                      false

                                                                                                                                    property boundaryToModify

                                                                                                                                    boundaryToModify?: Boundary;
                                                                                                                                    • The date-range boundary that the next click should modify. This will be honored unless the next click would overlap the other boundary date. In that case, the two boundary dates will be auto-swapped to keep them in chronological order. If undefined, the picker will revert to its default selection behavior.

                                                                                                                                    property contiguousCalendarMonths

                                                                                                                                    contiguousCalendarMonths?: boolean;
                                                                                                                                    • Whether displayed months in the calendar are contiguous. If false, each side of the calendar can move independently to non-contiguous months.

                                                                                                                                      true

                                                                                                                                    property defaultValue

                                                                                                                                    defaultValue?: DateRange;
                                                                                                                                    • Initial DateRange the calendar will display as selected. This should not be set if value is set.

                                                                                                                                    property onChange

                                                                                                                                    onChange?: (selectedDates: DateRange) => void;
                                                                                                                                    • Called when the user selects a day. If no days are selected, it will pass [null, null]. If a start date is selected but not an end date, it will pass [selectedDate, null]. If both a start and end date are selected, it will pass [startDate, endDate].

                                                                                                                                    property onHoverChange

                                                                                                                                    onHoverChange?: (
                                                                                                                                    hoveredDates: DateRange | undefined,
                                                                                                                                    hoveredDay: Date,
                                                                                                                                    hoveredBoundary: Boundary | undefined
                                                                                                                                    ) => void;
                                                                                                                                    • Called when the user changes the hovered date range, either from mouseenter or mouseleave. When triggered from mouseenter, it will pass the date range that would result from next click. When triggered from mouseleave, it will pass undefined.

                                                                                                                                    property onShortcutChange

                                                                                                                                    onShortcutChange?: (shortcut: DateRangeShortcut, index: number) => void;
                                                                                                                                    • Called when the shortcuts props is enabled and the user changes the shortcut.

                                                                                                                                    property selectedShortcutIndex

                                                                                                                                    selectedShortcutIndex?: number;
                                                                                                                                    • The currently selected shortcut. If this prop is provided, the component acts in a controlled manner.

                                                                                                                                    property shortcuts

                                                                                                                                    shortcuts?: boolean | DateRangeShortcut[];
                                                                                                                                    • Whether shortcuts to quickly select a range of dates are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.

                                                                                                                                      true

                                                                                                                                    property singleMonthOnly

                                                                                                                                    singleMonthOnly?: boolean;
                                                                                                                                    • Whether to show only a single month calendar.

                                                                                                                                      false

                                                                                                                                    property value

                                                                                                                                    value?: DateRange;
                                                                                                                                    • The currently selected DateRange. If this prop is provided, the component acts in a controlled manner.

                                                                                                                                    interface DateRangeSelectionState

                                                                                                                                    interface DateRangeSelectionState {}

                                                                                                                                      property boundary

                                                                                                                                      boundary: Boundary;
                                                                                                                                      • The boundary that would be modified by clicking the provided day.

                                                                                                                                      property dateRange

                                                                                                                                      dateRange: DateRange;
                                                                                                                                      • The date range that would be selected after clicking the provided day.

                                                                                                                                      interface DateRangeShortcut

                                                                                                                                      interface DateRangeShortcut extends DateShortcutBase {}

                                                                                                                                        property dateRange

                                                                                                                                        dateRange: DateRange;
                                                                                                                                        • Date range represented by this shortcut. Note that time components of a shortcut are ignored by default; set includeTime: true to respect them.

                                                                                                                                        interface TimePickerProps

                                                                                                                                        interface TimePickerProps extends Props {}

                                                                                                                                          property autoFocus

                                                                                                                                          autoFocus?: boolean;
                                                                                                                                          • Whether to focus the first input when it opens initially.

                                                                                                                                            false

                                                                                                                                          property defaultValue

                                                                                                                                          defaultValue?: Date;
                                                                                                                                          • Initial time the TimePicker will display. This should not be set if value is set.

                                                                                                                                          property disabled

                                                                                                                                          disabled?: boolean;
                                                                                                                                          • Whether the time picker is non-interactive.

                                                                                                                                            false

                                                                                                                                          property maxTime

                                                                                                                                          maxTime?: Date;
                                                                                                                                          • The latest time the user can select. The year, month, and day parts of the Date object are ignored. While the maxTime will be later than the minTime in the basic case, it is also allowed to be earlier than the minTime. This is useful, for example, to express a time range that extends before and after midnight. If the maxTime and minTime are equal, then the valid time range is constrained to only that one value.

                                                                                                                                          property minTime

                                                                                                                                          minTime?: Date;
                                                                                                                                          • The earliest time the user can select. The year, month, and day parts of the Date object are ignored. While the minTime will be earlier than the maxTime in the basic case, it is also allowed to be later than the maxTime. This is useful, for example, to express a time range that extends before and after midnight. If the maxTime and minTime are equal, then the valid time range is constrained to only that one value.

                                                                                                                                          property onBlur

                                                                                                                                          onBlur?: (event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void;
                                                                                                                                          • Callback invoked on blur event emitted by specific time unit input

                                                                                                                                          property onChange

                                                                                                                                          onChange?: (newTime: Date) => void;
                                                                                                                                          • Callback invoked when the user changes the time.

                                                                                                                                          property onFocus

                                                                                                                                          onFocus?: (event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void;
                                                                                                                                          • Callback invoked on focus event emitted by specific time unit input

                                                                                                                                          property onKeyDown

                                                                                                                                          onKeyDown?: (
                                                                                                                                          event: React.KeyboardEvent<HTMLInputElement>,
                                                                                                                                          unit: TimeUnit
                                                                                                                                          ) => void;
                                                                                                                                          • Callback invoked on keydown event emitted by specific time unit input

                                                                                                                                          property onKeyUp

                                                                                                                                          onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>, unit: TimeUnit) => void;
                                                                                                                                          • Callback invoked on keyup event emitted by specific time unit input

                                                                                                                                          property precision

                                                                                                                                          precision?: TimePrecision;
                                                                                                                                          • The precision of time the user can set.

                                                                                                                                            TimePrecision.MINUTE

                                                                                                                                          property selectAllOnFocus

                                                                                                                                          selectAllOnFocus?: boolean;
                                                                                                                                          • Whether all the text in each input should be selected on focus.

                                                                                                                                            false

                                                                                                                                          property showArrowButtons

                                                                                                                                          showArrowButtons?: boolean;
                                                                                                                                          • Whether to show arrows buttons for changing the time.

                                                                                                                                            false

                                                                                                                                          property useAmPm

                                                                                                                                          useAmPm?: boolean;
                                                                                                                                          • Whether to use a 12 hour format with an AM/PM dropdown.

                                                                                                                                            false

                                                                                                                                          property value

                                                                                                                                          value?: Date | null;
                                                                                                                                          • The currently set time. If this prop is provided, the component acts in a controlled manner.

                                                                                                                                          interface TimezoneSelectProps

                                                                                                                                          interface TimezoneSelectProps extends Props {}

                                                                                                                                            property buttonProps

                                                                                                                                            buttonProps?: Partial<ButtonProps>;
                                                                                                                                            • Props to spread to the target Button. This prop will be ignored if children is provided.

                                                                                                                                            property children

                                                                                                                                            children?: React.ReactNode;
                                                                                                                                            • Element which triggers the timezone select popover. If this is undefined, by default the component will render a <Button> which shows the currently selected timezone.

                                                                                                                                            property date

                                                                                                                                            date?: Date;
                                                                                                                                            • The date to use when formatting timezone offsets. An offset date is necessary to account for DST, but typically the default value of now will be sufficient.

                                                                                                                                              now

                                                                                                                                            property disabled

                                                                                                                                            disabled?: boolean;
                                                                                                                                            • Whether this component is non-interactive. This prop will be ignored if children is provided.

                                                                                                                                              false

                                                                                                                                            property fill

                                                                                                                                            fill?: boolean;
                                                                                                                                            • Whether the component should take up the full width of its container. This overrides popoverProps.fill and buttonProps.fill.

                                                                                                                                              false

                                                                                                                                            property inputProps

                                                                                                                                            inputProps?: InputGroupProps;
                                                                                                                                            • Props to spread to the filter InputGroup. All props are supported except ref (use inputRef instead). If you want to control the filter input, you can pass value and onChange here to override Select's own behavior.

                                                                                                                                            property onChange

                                                                                                                                            onChange: (timezone: string) => void;
                                                                                                                                            • Callback invoked when the user selects a timezone.

                                                                                                                                              Parameter timezone

                                                                                                                                              the new timezone's IANA code

                                                                                                                                            property placeholder

                                                                                                                                            placeholder?: string;
                                                                                                                                            • Text to show when no timezone has been selected (value === undefined). This prop will be ignored if children is provided.

                                                                                                                                              "Select timezone..."

                                                                                                                                            property popoverProps

                                                                                                                                            popoverProps?: SelectPopoverProps['popoverProps'];
                                                                                                                                            • Props to spread to the popover. Note that content cannot be changed.

                                                                                                                                            property showLocalTimezone

                                                                                                                                            showLocalTimezone?: boolean;
                                                                                                                                            • Whether to show the local timezone at the top of the list of initial timezone suggestions.

                                                                                                                                              false

                                                                                                                                            property value

                                                                                                                                            value: string | undefined;
                                                                                                                                            • The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".

                                                                                                                                              See Also

                                                                                                                                              • https://www.iana.org/time-zones

                                                                                                                                            property valueDisplayFormat

                                                                                                                                            valueDisplayFormat?: TimezoneDisplayFormat;
                                                                                                                                            • Format to use when displaying the selected (or default) timezone within the target element. This prop will be ignored if children is provided.

                                                                                                                                              TimezoneDisplayFormat.COMPOSITE

                                                                                                                                            interface TimezoneWithNames

                                                                                                                                            interface TimezoneWithNames extends Timezone {}

                                                                                                                                              property longName

                                                                                                                                              longName: string;

                                                                                                                                                property shortName

                                                                                                                                                shortName: string;

                                                                                                                                                  Enums

                                                                                                                                                  enum Months

                                                                                                                                                  enum Months {
                                                                                                                                                  JANUARY = 0,
                                                                                                                                                  FEBRUARY = 1,
                                                                                                                                                  MARCH = 2,
                                                                                                                                                  APRIL = 3,
                                                                                                                                                  MAY = 4,
                                                                                                                                                  JUNE = 5,
                                                                                                                                                  JULY = 6,
                                                                                                                                                  AUGUST = 7,
                                                                                                                                                  SEPTEMBER = 8,
                                                                                                                                                  OCTOBER = 9,
                                                                                                                                                  NOVEMBER = 10,
                                                                                                                                                  DECEMBER = 11,
                                                                                                                                                  }
                                                                                                                                                  • Enumeration of calendar months.

                                                                                                                                                    Note that the enum values are numbers (with January as 0) so they can be easily compared to date.getMonth().

                                                                                                                                                  member APRIL

                                                                                                                                                  APRIL = 3

                                                                                                                                                    member AUGUST

                                                                                                                                                    AUGUST = 7

                                                                                                                                                      member DECEMBER

                                                                                                                                                      DECEMBER = 11

                                                                                                                                                        member FEBRUARY

                                                                                                                                                        FEBRUARY = 1

                                                                                                                                                          member JANUARY

                                                                                                                                                          JANUARY = 0

                                                                                                                                                            member JULY

                                                                                                                                                            JULY = 6

                                                                                                                                                              member JUNE

                                                                                                                                                              JUNE = 5

                                                                                                                                                                member MARCH

                                                                                                                                                                MARCH = 2

                                                                                                                                                                  member MAY

                                                                                                                                                                  MAY = 4

                                                                                                                                                                    member NOVEMBER

                                                                                                                                                                    NOVEMBER = 10

                                                                                                                                                                      member OCTOBER

                                                                                                                                                                      OCTOBER = 9

                                                                                                                                                                        member SEPTEMBER

                                                                                                                                                                        SEPTEMBER = 8

                                                                                                                                                                          enum TimeUnit

                                                                                                                                                                          enum TimeUnit {
                                                                                                                                                                          HOUR_24 = 'hour24',
                                                                                                                                                                          HOUR_12 = 'hour12',
                                                                                                                                                                          MINUTE = 'minute',
                                                                                                                                                                          SECOND = 'second',
                                                                                                                                                                          MS = 'ms',
                                                                                                                                                                          }
                                                                                                                                                                          • describes a component of time. H:MM:SS.MS

                                                                                                                                                                          member HOUR_12

                                                                                                                                                                          HOUR_12 = 'hour12'

                                                                                                                                                                            member HOUR_24

                                                                                                                                                                            HOUR_24 = 'hour24'

                                                                                                                                                                              member MINUTE

                                                                                                                                                                              MINUTE = 'minute'

                                                                                                                                                                                member MS

                                                                                                                                                                                MS = 'ms'

                                                                                                                                                                                  member SECOND

                                                                                                                                                                                  SECOND = 'second'

                                                                                                                                                                                    Type Aliases

                                                                                                                                                                                    type DateRange

                                                                                                                                                                                    type DateRange = [Date | null, Date | null];

                                                                                                                                                                                      type DayPickerProps

                                                                                                                                                                                      type DayPickerProps = Omit<DayPickerBase, ReactDayPickerOmittedProps>;
                                                                                                                                                                                      • react-day-picker v8.x options which may be customized / overriden on DatePicker, DateInput, DateRangePicker, and DateRangeInput via the dayPickerProps prop.

                                                                                                                                                                                      type NonNullDateRange

                                                                                                                                                                                      type NonNullDateRange = [Date, Date];

                                                                                                                                                                                        type TimePrecision

                                                                                                                                                                                        type TimePrecision = (typeof TimePrecision)[keyof typeof TimePrecision];

                                                                                                                                                                                          type TimezoneDisplayFormat

                                                                                                                                                                                          type TimezoneDisplayFormat =
                                                                                                                                                                                          (typeof TimezoneDisplayFormat)[keyof typeof TimezoneDisplayFormat];

                                                                                                                                                                                            Namespaces

                                                                                                                                                                                            namespace Classes

                                                                                                                                                                                            module 'lib/esm/common/classes.d.ts' {}
                                                                                                                                                                                            • Class names applied by react-day-picker v8.x

                                                                                                                                                                                            variable DATE_INPUT

                                                                                                                                                                                            const DATE_INPUT: string;

                                                                                                                                                                                              variable DATE_INPUT_POPOVER

                                                                                                                                                                                              const DATE_INPUT_POPOVER: string;

                                                                                                                                                                                                variable DATE_INPUT_TIMEZONE_SELECT

                                                                                                                                                                                                const DATE_INPUT_TIMEZONE_SELECT: string;

                                                                                                                                                                                                  variable DATE_RANGE_INPUT

                                                                                                                                                                                                  const DATE_RANGE_INPUT: string;

                                                                                                                                                                                                    variable DATE_RANGE_INPUT_POPOVER

                                                                                                                                                                                                    const DATE_RANGE_INPUT_POPOVER: string;

                                                                                                                                                                                                      variable DATEPICKER

                                                                                                                                                                                                      const DATEPICKER: string;

                                                                                                                                                                                                        variable DATEPICKER_CAPTION

                                                                                                                                                                                                        const DATEPICKER_CAPTION: string;

                                                                                                                                                                                                          variable DATEPICKER_CAPTION_MEASURE

                                                                                                                                                                                                          const DATEPICKER_CAPTION_MEASURE: string;

                                                                                                                                                                                                            variable DATEPICKER_CONTENT

                                                                                                                                                                                                            const DATEPICKER_CONTENT: string;
                                                                                                                                                                                                              const DATEPICKER_FOOTER: string;

                                                                                                                                                                                                                variable DATEPICKER_MONTH_SELECT

                                                                                                                                                                                                                const DATEPICKER_MONTH_SELECT: string;

                                                                                                                                                                                                                  variable DATEPICKER_TIMEPICKER_WRAPPER

                                                                                                                                                                                                                  const DATEPICKER_TIMEPICKER_WRAPPER: string;

                                                                                                                                                                                                                    variable DATEPICKER_YEAR_SELECT

                                                                                                                                                                                                                    const DATEPICKER_YEAR_SELECT: string;

                                                                                                                                                                                                                      variable DATEPICKER3_CAPTION

                                                                                                                                                                                                                      const DATEPICKER3_CAPTION: string;

                                                                                                                                                                                                                        variable DATEPICKER3_DAY

                                                                                                                                                                                                                        const DATEPICKER3_DAY: string;

                                                                                                                                                                                                                          variable DATEPICKER3_DAY_DISABLED

                                                                                                                                                                                                                          const DATEPICKER3_DAY_DISABLED: string;

                                                                                                                                                                                                                            variable DATEPICKER3_DAY_IS_TODAY

                                                                                                                                                                                                                            const DATEPICKER3_DAY_IS_TODAY: string;

                                                                                                                                                                                                                              variable DATEPICKER3_DAY_OUTSIDE

                                                                                                                                                                                                                              const DATEPICKER3_DAY_OUTSIDE: string;

                                                                                                                                                                                                                                variable DATEPICKER3_DAY_SELECTED

                                                                                                                                                                                                                                const DATEPICKER3_DAY_SELECTED: string;

                                                                                                                                                                                                                                  variable DATEPICKER3_DROPDOWN_MONTH

                                                                                                                                                                                                                                  const DATEPICKER3_DROPDOWN_MONTH: string;

                                                                                                                                                                                                                                    variable DATEPICKER3_DROPDOWN_YEAR

                                                                                                                                                                                                                                    const DATEPICKER3_DROPDOWN_YEAR: string;

                                                                                                                                                                                                                                      variable DATEPICKER3_HIGHLIGHT_CURRENT_DAY

                                                                                                                                                                                                                                      const DATEPICKER3_HIGHLIGHT_CURRENT_DAY: string;

                                                                                                                                                                                                                                        variable DATEPICKER3_NAV_BUTTON

                                                                                                                                                                                                                                        const DATEPICKER3_NAV_BUTTON: string;

                                                                                                                                                                                                                                          variable DATEPICKER3_NAV_BUTTON_NEXT

                                                                                                                                                                                                                                          const DATEPICKER3_NAV_BUTTON_NEXT: string;

                                                                                                                                                                                                                                            variable DATEPICKER3_NAV_BUTTON_PREVIOUS

                                                                                                                                                                                                                                            const DATEPICKER3_NAV_BUTTON_PREVIOUS: string;

                                                                                                                                                                                                                                              variable DATEPICKER3_REVERSE_MONTH_AND_YEAR

                                                                                                                                                                                                                                              const DATEPICKER3_REVERSE_MONTH_AND_YEAR: string;

                                                                                                                                                                                                                                                variable DatePickerCaptionClasses

                                                                                                                                                                                                                                                const DatePickerCaptionClasses: {
                                                                                                                                                                                                                                                DATEPICKER3_CAPTION: string;
                                                                                                                                                                                                                                                DATEPICKER3_DROPDOWN_MONTH: string;
                                                                                                                                                                                                                                                DATEPICKER3_DROPDOWN_YEAR: string;
                                                                                                                                                                                                                                                DATEPICKER3_NAV_BUTTON: string;
                                                                                                                                                                                                                                                DATEPICKER3_NAV_BUTTON_NEXT: string;
                                                                                                                                                                                                                                                DATEPICKER3_NAV_BUTTON_PREVIOUS: string;
                                                                                                                                                                                                                                                };

                                                                                                                                                                                                                                                  variable DatePickerClasses

                                                                                                                                                                                                                                                  const DatePickerClasses: {
                                                                                                                                                                                                                                                  DATEPICKER3_DAY: string;
                                                                                                                                                                                                                                                  DATEPICKER3_DAY_DISABLED: string;
                                                                                                                                                                                                                                                  DATEPICKER3_DAY_IS_TODAY: string;
                                                                                                                                                                                                                                                  DATEPICKER3_DAY_OUTSIDE: string;
                                                                                                                                                                                                                                                  DATEPICKER3_DAY_SELECTED: string;
                                                                                                                                                                                                                                                  DATEPICKER3_HIGHLIGHT_CURRENT_DAY: string;
                                                                                                                                                                                                                                                  DATEPICKER3_REVERSE_MONTH_AND_YEAR: string;
                                                                                                                                                                                                                                                  };

                                                                                                                                                                                                                                                    variable DATERANGEPICKER

                                                                                                                                                                                                                                                    const DATERANGEPICKER: string;

                                                                                                                                                                                                                                                      variable DATERANGEPICKER_CALENDARS

                                                                                                                                                                                                                                                      const DATERANGEPICKER_CALENDARS: string;

                                                                                                                                                                                                                                                        variable DATERANGEPICKER_CONTIGUOUS

                                                                                                                                                                                                                                                        const DATERANGEPICKER_CONTIGUOUS: string;

                                                                                                                                                                                                                                                          variable DATERANGEPICKER_SHORTCUTS

                                                                                                                                                                                                                                                          const DATERANGEPICKER_SHORTCUTS: string;

                                                                                                                                                                                                                                                            variable DATERANGEPICKER_SINGLE_MONTH

                                                                                                                                                                                                                                                            const DATERANGEPICKER_SINGLE_MONTH: string;

                                                                                                                                                                                                                                                              variable DATERANGEPICKER_TIMEPICKERS

                                                                                                                                                                                                                                                              const DATERANGEPICKER_TIMEPICKERS: string;

                                                                                                                                                                                                                                                                variable DATERANGEPICKER3_HOVERED_RANGE

                                                                                                                                                                                                                                                                const DATERANGEPICKER3_HOVERED_RANGE: string;

                                                                                                                                                                                                                                                                  variable DATERANGEPICKER3_HOVERED_RANGE_END

                                                                                                                                                                                                                                                                  const DATERANGEPICKER3_HOVERED_RANGE_END: string;

                                                                                                                                                                                                                                                                    variable DATERANGEPICKER3_HOVERED_RANGE_START

                                                                                                                                                                                                                                                                    const DATERANGEPICKER3_HOVERED_RANGE_START: string;

                                                                                                                                                                                                                                                                      variable DATERANGEPICKER3_REVERSE_MONTH_AND_YEAR

                                                                                                                                                                                                                                                                      const DATERANGEPICKER3_REVERSE_MONTH_AND_YEAR: string;

                                                                                                                                                                                                                                                                        variable DATERANGEPICKER3_SELECTED_RANGE_END

                                                                                                                                                                                                                                                                        const DATERANGEPICKER3_SELECTED_RANGE_END: string;

                                                                                                                                                                                                                                                                          variable DATERANGEPICKER3_SELECTED_RANGE_MIDDLE

                                                                                                                                                                                                                                                                          const DATERANGEPICKER3_SELECTED_RANGE_MIDDLE: string;

                                                                                                                                                                                                                                                                            variable DATERANGEPICKER3_SELECTED_RANGE_START

                                                                                                                                                                                                                                                                            const DATERANGEPICKER3_SELECTED_RANGE_START: string;

                                                                                                                                                                                                                                                                              variable DATERANGEPICKER3_TIMEPICKERS_STACKED

                                                                                                                                                                                                                                                                              const DATERANGEPICKER3_TIMEPICKERS_STACKED: string;

                                                                                                                                                                                                                                                                                variable DateRangePickerClasses

                                                                                                                                                                                                                                                                                const DateRangePickerClasses: {
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_HOVERED_RANGE: string;
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_HOVERED_RANGE_END: string;
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_HOVERED_RANGE_START: string;
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_REVERSE_MONTH_AND_YEAR: string;
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_SELECTED_RANGE_END: string;
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_SELECTED_RANGE_MIDDLE: string;
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_SELECTED_RANGE_START: string;
                                                                                                                                                                                                                                                                                DATERANGEPICKER3_TIMEPICKERS_STACKED: string;
                                                                                                                                                                                                                                                                                };

                                                                                                                                                                                                                                                                                  variable dayPickerClassNameOverrides

                                                                                                                                                                                                                                                                                  const dayPickerClassNameOverrides: StyledElement<string>;
                                                                                                                                                                                                                                                                                  • Class name overrides for components rendered by react-day-picker. These offer more predictable and standard DOM selectors in custom styles & tests.

                                                                                                                                                                                                                                                                                  variable ReactDayPickerClasses

                                                                                                                                                                                                                                                                                  const ReactDayPickerClasses: {
                                                                                                                                                                                                                                                                                  RDP: string;
                                                                                                                                                                                                                                                                                  RDP_CAPTION: string;
                                                                                                                                                                                                                                                                                  RDP_CAPTION_DROPDOWNS: string;
                                                                                                                                                                                                                                                                                  RDP_CAPTION_LABEL: string;
                                                                                                                                                                                                                                                                                  RDP_DAY: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_DISABLED: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_HOVERED_RANGE: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_HOVERED_RANGE_END: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_HOVERED_RANGE_START: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_OUTSIDE: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_RANGE_END: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_RANGE_MIDDLE: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_RANGE_START: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_SELECTED: string;
                                                                                                                                                                                                                                                                                  RDP_DAY_TODAY: string;
                                                                                                                                                                                                                                                                                  RDP_MONTH: string;
                                                                                                                                                                                                                                                                                  RDP_NAV: string;
                                                                                                                                                                                                                                                                                  RDP_TABLE: string;
                                                                                                                                                                                                                                                                                  RDP_VHIDDEN: string;
                                                                                                                                                                                                                                                                                  };
                                                                                                                                                                                                                                                                                  • Class names applied by react-day-picker v8.x

                                                                                                                                                                                                                                                                                  variable TIMEPICKER

                                                                                                                                                                                                                                                                                  const TIMEPICKER: string;

                                                                                                                                                                                                                                                                                    variable TIMEPICKER_AMPM_SELECT

                                                                                                                                                                                                                                                                                    const TIMEPICKER_AMPM_SELECT: string;

                                                                                                                                                                                                                                                                                      variable TIMEPICKER_ARROW_BUTTON

                                                                                                                                                                                                                                                                                      const TIMEPICKER_ARROW_BUTTON: string;

                                                                                                                                                                                                                                                                                        variable TIMEPICKER_ARROW_ROW

                                                                                                                                                                                                                                                                                        const TIMEPICKER_ARROW_ROW: string;

                                                                                                                                                                                                                                                                                          variable TIMEPICKER_DIVIDER_TEXT

                                                                                                                                                                                                                                                                                          const TIMEPICKER_DIVIDER_TEXT: string;

                                                                                                                                                                                                                                                                                            variable TIMEPICKER_HOUR

                                                                                                                                                                                                                                                                                            const TIMEPICKER_HOUR: string;

                                                                                                                                                                                                                                                                                              variable TIMEPICKER_INPUT

                                                                                                                                                                                                                                                                                              const TIMEPICKER_INPUT: string;

                                                                                                                                                                                                                                                                                                variable TIMEPICKER_INPUT_ROW

                                                                                                                                                                                                                                                                                                const TIMEPICKER_INPUT_ROW: string;

                                                                                                                                                                                                                                                                                                  variable TIMEPICKER_MILLISECOND

                                                                                                                                                                                                                                                                                                  const TIMEPICKER_MILLISECOND: string;

                                                                                                                                                                                                                                                                                                    variable TIMEPICKER_MINUTE

                                                                                                                                                                                                                                                                                                    const TIMEPICKER_MINUTE: string;

                                                                                                                                                                                                                                                                                                      variable TIMEPICKER_SECOND

                                                                                                                                                                                                                                                                                                      const TIMEPICKER_SECOND: string;

                                                                                                                                                                                                                                                                                                        variable TIMEZONE_SELECT

                                                                                                                                                                                                                                                                                                        const TIMEZONE_SELECT: string;

                                                                                                                                                                                                                                                                                                          variable TIMEZONE_SELECT_POPOVER

                                                                                                                                                                                                                                                                                                          const TIMEZONE_SELECT_POPOVER: string;

                                                                                                                                                                                                                                                                                                            namespace DateInputMigrationUtils

                                                                                                                                                                                                                                                                                                            module 'lib/esm/dateInputMigrationUtils.d.ts' {}
                                                                                                                                                                                                                                                                                                            • onChange prop adapter for automated DateInput -> DateInput2 migration in @blueprintjs/datetime2 v0.x.

                                                                                                                                                                                                                                                                                                              Note that we exclude undefined from the input & output types since we expect the callback to be defined if this adapter is used.

                                                                                                                                                                                                                                                                                                              Parameter handler

                                                                                                                                                                                                                                                                                                              DateInput onChange handler

                                                                                                                                                                                                                                                                                                              Returns

                                                                                                                                                                                                                                                                                                              DateInput2 onChange handler

                                                                                                                                                                                                                                                                                                            function defaultValueAdapter

                                                                                                                                                                                                                                                                                                            defaultValueAdapter: (
                                                                                                                                                                                                                                                                                                            defaultValue: DateInputLegacyDefaultValue,
                                                                                                                                                                                                                                                                                                            timePrecision?: TimePrecision
                                                                                                                                                                                                                                                                                                            ) => DateInputProps['defaultValue'];
                                                                                                                                                                                                                                                                                                            • Adapter for automated DateInput -> DateInput2 migration in @blueprintjs/datetime2 v0.x.

                                                                                                                                                                                                                                                                                                              Parameter defaultValue

                                                                                                                                                                                                                                                                                                              DateInput value

                                                                                                                                                                                                                                                                                                              Parameter timePrecision

                                                                                                                                                                                                                                                                                                              (optional) DateInput timePrecision

                                                                                                                                                                                                                                                                                                              Returns

                                                                                                                                                                                                                                                                                                              DateInput2 value

                                                                                                                                                                                                                                                                                                            function onChangeAdapter

                                                                                                                                                                                                                                                                                                            onChangeAdapter: (
                                                                                                                                                                                                                                                                                                            handler: DateInputLegacyChangeHandler
                                                                                                                                                                                                                                                                                                            ) => NonNullable<DateInputProps['onChange']>;
                                                                                                                                                                                                                                                                                                            • onChange prop adapter for automated DateInput -> DateInput2 migration in @blueprintjs/datetime2 v0.x.

                                                                                                                                                                                                                                                                                                              Note that we exclude undefined from the input & output types since we expect the callback to be defined if this adapter is used.

                                                                                                                                                                                                                                                                                                              Parameter handler

                                                                                                                                                                                                                                                                                                              DateInput onChange handler

                                                                                                                                                                                                                                                                                                              Returns

                                                                                                                                                                                                                                                                                                              DateInput2 onChange handler

                                                                                                                                                                                                                                                                                                            function valueAdapter

                                                                                                                                                                                                                                                                                                            valueAdapter: (
                                                                                                                                                                                                                                                                                                            value: DateInputLegacyValue,
                                                                                                                                                                                                                                                                                                            timePrecision?: TimePrecision
                                                                                                                                                                                                                                                                                                            ) => DateInputProps['value'];
                                                                                                                                                                                                                                                                                                            • value prop adapter for automated DateInput -> DateInput2 migration in @blueprintjs/datetime2 v0.x.

                                                                                                                                                                                                                                                                                                              Parameter value

                                                                                                                                                                                                                                                                                                              DateInput value

                                                                                                                                                                                                                                                                                                              Parameter timePrecision

                                                                                                                                                                                                                                                                                                              (optional) DateInput timePrecision

                                                                                                                                                                                                                                                                                                              Returns

                                                                                                                                                                                                                                                                                                              DateInput2 value

                                                                                                                                                                                                                                                                                                            namespace DateUtils

                                                                                                                                                                                                                                                                                                            module 'lib/esm/common/dateUtils.d.ts' {}
                                                                                                                                                                                                                                                                                                            • Returns true if the time part of date is later than or equal to the time part of dateToCompare. The day, month, and year parts will not be compared.

                                                                                                                                                                                                                                                                                                            function areRangesEqual

                                                                                                                                                                                                                                                                                                            areRangesEqual: (
                                                                                                                                                                                                                                                                                                            dateRange1: DateRange | null,
                                                                                                                                                                                                                                                                                                            dateRange2: DateRange | null
                                                                                                                                                                                                                                                                                                            ) => boolean;

                                                                                                                                                                                                                                                                                                              function clone

                                                                                                                                                                                                                                                                                                              clone: (d: Date) => Date;

                                                                                                                                                                                                                                                                                                                function convert24HourMeridiem

                                                                                                                                                                                                                                                                                                                convert24HourMeridiem: (hour: number, toPm: boolean) => number;

                                                                                                                                                                                                                                                                                                                  function get12HourFrom24Hour

                                                                                                                                                                                                                                                                                                                  get12HourFrom24Hour: (hour: number) => number;

                                                                                                                                                                                                                                                                                                                    function get24HourFrom12Hour

                                                                                                                                                                                                                                                                                                                    get24HourFrom12Hour: (hour: number, isPm: boolean) => number;

                                                                                                                                                                                                                                                                                                                      function getDateBetween

                                                                                                                                                                                                                                                                                                                      getDateBetween: (dateRange: DateRange) => Date;
                                                                                                                                                                                                                                                                                                                      • Returns

                                                                                                                                                                                                                                                                                                                        a Date at the exact time-wise midpoint between startDate and endDate

                                                                                                                                                                                                                                                                                                                        TODO: Convert dateRange argument to a NonNullDateRange to avoid non-null assertions see: https://github.com/palantir/blueprint/pull/7337#discussion_r1990189512

                                                                                                                                                                                                                                                                                                                      function getDateNextMonth

                                                                                                                                                                                                                                                                                                                      getDateNextMonth: (date: Date) => Date;

                                                                                                                                                                                                                                                                                                                        function getDateOnlyWithTime

                                                                                                                                                                                                                                                                                                                        getDateOnlyWithTime: (date: Date) => Date;

                                                                                                                                                                                                                                                                                                                          function getDatePreviousMonth

                                                                                                                                                                                                                                                                                                                          getDatePreviousMonth: (date: Date) => Date;

                                                                                                                                                                                                                                                                                                                            function getDateTime

                                                                                                                                                                                                                                                                                                                            getDateTime: (date: Date | null, time?: Date | null) => Date | null;

                                                                                                                                                                                                                                                                                                                              function getIsPmFrom24Hour

                                                                                                                                                                                                                                                                                                                              getIsPmFrom24Hour: (hour: number) => boolean;

                                                                                                                                                                                                                                                                                                                                function getTimeInRange

                                                                                                                                                                                                                                                                                                                                getTimeInRange: (time: Date, minTime: Date, maxTime: Date) => Date;

                                                                                                                                                                                                                                                                                                                                  function hasMonthChanged

                                                                                                                                                                                                                                                                                                                                  hasMonthChanged: (prevDate: Date | null, nextDate: Date | null) => boolean;

                                                                                                                                                                                                                                                                                                                                    function hasTimeChanged

                                                                                                                                                                                                                                                                                                                                    hasTimeChanged: (prevDate: Date | null, nextDate: Date | null) => boolean;

                                                                                                                                                                                                                                                                                                                                      function isDateValid

                                                                                                                                                                                                                                                                                                                                      isDateValid: (date: Date | false | null) => date is Date;

                                                                                                                                                                                                                                                                                                                                        function isDayInRange

                                                                                                                                                                                                                                                                                                                                        isDayInRange: (
                                                                                                                                                                                                                                                                                                                                        date: Date | null,
                                                                                                                                                                                                                                                                                                                                        dateRange: DateRange,
                                                                                                                                                                                                                                                                                                                                        exclusive?: boolean
                                                                                                                                                                                                                                                                                                                                        ) => boolean;

                                                                                                                                                                                                                                                                                                                                          function isDayRangeInRange

                                                                                                                                                                                                                                                                                                                                          isDayRangeInRange: (innerRange: DateRange, outerRange: DateRange) => boolean;

                                                                                                                                                                                                                                                                                                                                            function isEqual

                                                                                                                                                                                                                                                                                                                                            isEqual: (date1: Date, date2: Date) => boolean;

                                                                                                                                                                                                                                                                                                                                              function isMonthInRange

                                                                                                                                                                                                                                                                                                                                              isMonthInRange: (date: Date, dateRange: DateRange) => boolean;

                                                                                                                                                                                                                                                                                                                                                function isSameMonth

                                                                                                                                                                                                                                                                                                                                                isSameMonth: (date1: Date, date2: Date) => boolean;

                                                                                                                                                                                                                                                                                                                                                  function isSameTime

                                                                                                                                                                                                                                                                                                                                                  isSameTime: (d1: Date | null, d2: Date | null) => boolean;

                                                                                                                                                                                                                                                                                                                                                    function isTimeEqualOrGreaterThan

                                                                                                                                                                                                                                                                                                                                                    isTimeEqualOrGreaterThan: (time: Date, timeToCompare: Date) => boolean;

                                                                                                                                                                                                                                                                                                                                                      function isTimeEqualOrSmallerThan

                                                                                                                                                                                                                                                                                                                                                      isTimeEqualOrSmallerThan: (time: Date, timeToCompare: Date) => boolean;

                                                                                                                                                                                                                                                                                                                                                        function isTimeInRange

                                                                                                                                                                                                                                                                                                                                                        isTimeInRange: (date: Date, minDate: Date, maxDate: Date) => boolean;

                                                                                                                                                                                                                                                                                                                                                          function isTimeSameOrAfter

                                                                                                                                                                                                                                                                                                                                                          isTimeSameOrAfter: (date: Date, dateToCompare: Date) => boolean;
                                                                                                                                                                                                                                                                                                                                                          • Returns true if the time part of date is later than or equal to the time part of dateToCompare. The day, month, and year parts will not be compared.

                                                                                                                                                                                                                                                                                                                                                          function isToday

                                                                                                                                                                                                                                                                                                                                                          isToday: (date: Date) => boolean;

                                                                                                                                                                                                                                                                                                                                                            namespace Errors

                                                                                                                                                                                                                                                                                                                                                            module 'lib/esm/common/errors.d.ts' {}

                                                                                                                                                                                                                                                                                                                                                              variable DATEINPUT_INVALID_DEFAULT_TIMEZONE

                                                                                                                                                                                                                                                                                                                                                              const DATEINPUT_INVALID_DEFAULT_TIMEZONE: string;

                                                                                                                                                                                                                                                                                                                                                                variable DATEINPUT_INVALID_TIMEZONE

                                                                                                                                                                                                                                                                                                                                                                const DATEINPUT_INVALID_TIMEZONE: string;

                                                                                                                                                                                                                                                                                                                                                                  variable DATEPICKER_DEFAULT_VALUE_INVALID

                                                                                                                                                                                                                                                                                                                                                                  const DATEPICKER_DEFAULT_VALUE_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                    variable DATEPICKER_INITIAL_MONTH_INVALID

                                                                                                                                                                                                                                                                                                                                                                    const DATEPICKER_INITIAL_MONTH_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                      variable DATEPICKER_MAX_DATE_INVALID

                                                                                                                                                                                                                                                                                                                                                                      const DATEPICKER_MAX_DATE_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                        variable DATEPICKER_VALUE_INVALID

                                                                                                                                                                                                                                                                                                                                                                        const DATEPICKER_VALUE_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                          variable DATERANGEINPUT_NULL_VALUE

                                                                                                                                                                                                                                                                                                                                                                          const DATERANGEINPUT_NULL_VALUE: string;

                                                                                                                                                                                                                                                                                                                                                                            variable DATERANGEPICKER_DEFAULT_VALUE_INVALID

                                                                                                                                                                                                                                                                                                                                                                            const DATERANGEPICKER_DEFAULT_VALUE_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                              variable DATERANGEPICKER_INITIAL_MONTH_INVALID

                                                                                                                                                                                                                                                                                                                                                                              const DATERANGEPICKER_INITIAL_MONTH_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                                variable DATERANGEPICKER_MAX_DATE_INVALID

                                                                                                                                                                                                                                                                                                                                                                                const DATERANGEPICKER_MAX_DATE_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                                  variable DATERANGEPICKER_PREFERRED_BOUNDARY_TO_MODIFY_INVALID

                                                                                                                                                                                                                                                                                                                                                                                  const DATERANGEPICKER_PREFERRED_BOUNDARY_TO_MODIFY_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                                    variable DATERANGEPICKER_VALUE_INVALID

                                                                                                                                                                                                                                                                                                                                                                                    const DATERANGEPICKER_VALUE_INVALID: string;

                                                                                                                                                                                                                                                                                                                                                                                      namespace TimezoneNameUtils

                                                                                                                                                                                                                                                                                                                                                                                      module 'lib/esm/common/timezoneNameUtils.d.ts' {}
                                                                                                                                                                                                                                                                                                                                                                                      • Augments a simple Timezone metadata object with long and short names formatted by date-fns-tz.

                                                                                                                                                                                                                                                                                                                                                                                      function getInitialTimezoneItems

                                                                                                                                                                                                                                                                                                                                                                                      getInitialTimezoneItems: (
                                                                                                                                                                                                                                                                                                                                                                                      date: Date | undefined,
                                                                                                                                                                                                                                                                                                                                                                                      showLocalTimezone: boolean
                                                                                                                                                                                                                                                                                                                                                                                      ) => TimezoneWithNames[];

                                                                                                                                                                                                                                                                                                                                                                                        function getTimezoneNames

                                                                                                                                                                                                                                                                                                                                                                                        getTimezoneNames: (
                                                                                                                                                                                                                                                                                                                                                                                        tz: Timezone,
                                                                                                                                                                                                                                                                                                                                                                                        date?: Date | number | undefined
                                                                                                                                                                                                                                                                                                                                                                                        ) => TimezoneWithNames;
                                                                                                                                                                                                                                                                                                                                                                                        • Augments a simple Timezone metadata object with long and short names formatted by date-fns-tz.

                                                                                                                                                                                                                                                                                                                                                                                        function getTimezoneShortName

                                                                                                                                                                                                                                                                                                                                                                                        getTimezoneShortName: (tzIanaCode: string, date: Date | undefined) => string;

                                                                                                                                                                                                                                                                                                                                                                                          function isValidTimezone

                                                                                                                                                                                                                                                                                                                                                                                          isValidTimezone: (timeZone: string | undefined) => boolean;

                                                                                                                                                                                                                                                                                                                                                                                            function mapTimezonesWithNames

                                                                                                                                                                                                                                                                                                                                                                                            mapTimezonesWithNames: (
                                                                                                                                                                                                                                                                                                                                                                                            date: Date | undefined,
                                                                                                                                                                                                                                                                                                                                                                                            timezones: Timezone[] | TimezoneWithNames[]
                                                                                                                                                                                                                                                                                                                                                                                            ) => TimezoneWithNames[];

                                                                                                                                                                                                                                                                                                                                                                                              namespace TimezoneUtils

                                                                                                                                                                                                                                                                                                                                                                                              module 'lib/esm/common/timezoneUtils.d.ts' {}
                                                                                                                                                                                                                                                                                                                                                                                              • HACKHACK: this method relies on parsing strings with the Date() constructor, which is discouraged by the MDN documentation and the Moment.js status page. If we continue to use this approach, we need to validate that input strings conform to the ISO 8601 format.

                                                                                                                                                                                                                                                                                                                                                                                                Parameter value

                                                                                                                                                                                                                                                                                                                                                                                                ISO string representation of a date

                                                                                                                                                                                                                                                                                                                                                                                                Parameter timezone

                                                                                                                                                                                                                                                                                                                                                                                                target timezone IANA code

                                                                                                                                                                                                                                                                                                                                                                                                See Also

                                                                                                                                                                                                                                                                                                                                                                                                • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters

                                                                                                                                                                                                                                                                                                                                                                                                • https://momentjs.com/docs/#/-project-status/

                                                                                                                                                                                                                                                                                                                                                                                              variable UTC_TIME

                                                                                                                                                                                                                                                                                                                                                                                              const UTC_TIME: Timezone;

                                                                                                                                                                                                                                                                                                                                                                                                function convertDateToLocalEquivalentOfTimezoneTime

                                                                                                                                                                                                                                                                                                                                                                                                convertDateToLocalEquivalentOfTimezoneTime: (
                                                                                                                                                                                                                                                                                                                                                                                                date: Date,
                                                                                                                                                                                                                                                                                                                                                                                                newTimezone: string
                                                                                                                                                                                                                                                                                                                                                                                                ) => Date;
                                                                                                                                                                                                                                                                                                                                                                                                • Converts a date to match a new timezone selection. The date is the internal local time representation for the user, meaning if 8 AM local time is currently selected, and local time is Oslo and the user switches timezone to UTC, the new date should represent 9 AM in Oslo time.

                                                                                                                                                                                                                                                                                                                                                                                                  Parameter date

                                                                                                                                                                                                                                                                                                                                                                                                  the current existing date object

                                                                                                                                                                                                                                                                                                                                                                                                  Parameter newTimezone

                                                                                                                                                                                                                                                                                                                                                                                                  the new timezone that the date should be converted to represent

                                                                                                                                                                                                                                                                                                                                                                                                  Returns

                                                                                                                                                                                                                                                                                                                                                                                                  The date converted to match the new timezone

                                                                                                                                                                                                                                                                                                                                                                                                function convertLocalDateToTimezoneTime

                                                                                                                                                                                                                                                                                                                                                                                                convertLocalDateToTimezoneTime: (date: Date, newTimezone: string) => Date;
                                                                                                                                                                                                                                                                                                                                                                                                • Converts a date in local timezone to represent better the passed through timezone representation for the user, meaning if 8 AM local time is currently the date, and local time is Oslo and the user has a default of UTC in selection, the new date should represent 7 AM.

                                                                                                                                                                                                                                                                                                                                                                                                  Parameter date

                                                                                                                                                                                                                                                                                                                                                                                                  the current existing date object

                                                                                                                                                                                                                                                                                                                                                                                                  Parameter newTimezone

                                                                                                                                                                                                                                                                                                                                                                                                  the new timezone that we need to update the date to represent

                                                                                                                                                                                                                                                                                                                                                                                                  Returns

                                                                                                                                                                                                                                                                                                                                                                                                  The date converted to match the new timezone

                                                                                                                                                                                                                                                                                                                                                                                                function getCurrentTimezone

                                                                                                                                                                                                                                                                                                                                                                                                getCurrentTimezone: () => string;
                                                                                                                                                                                                                                                                                                                                                                                                • Gets the users current time zone, for example "Europe/Oslo". This is currently backed by the browser or computer's locale setting.

                                                                                                                                                                                                                                                                                                                                                                                                function getDateObjectFromIsoString

                                                                                                                                                                                                                                                                                                                                                                                                getDateObjectFromIsoString: {
                                                                                                                                                                                                                                                                                                                                                                                                (value: string | undefined, timezone: string): Date | undefined;
                                                                                                                                                                                                                                                                                                                                                                                                (value: string, timezone: string): Date;
                                                                                                                                                                                                                                                                                                                                                                                                };
                                                                                                                                                                                                                                                                                                                                                                                                • HACKHACK: this method relies on parsing strings with the Date() constructor, which is discouraged by the MDN documentation and the Moment.js status page. If we continue to use this approach, we need to validate that input strings conform to the ISO 8601 format.

                                                                                                                                                                                                                                                                                                                                                                                                  Parameter value

                                                                                                                                                                                                                                                                                                                                                                                                  ISO string representation of a date

                                                                                                                                                                                                                                                                                                                                                                                                  Parameter timezone

                                                                                                                                                                                                                                                                                                                                                                                                  target timezone IANA code

                                                                                                                                                                                                                                                                                                                                                                                                  See Also

                                                                                                                                                                                                                                                                                                                                                                                                  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters

                                                                                                                                                                                                                                                                                                                                                                                                  • https://momentjs.com/docs/#/-project-status/

                                                                                                                                                                                                                                                                                                                                                                                                function getIsoEquivalentWithUpdatedTimezone

                                                                                                                                                                                                                                                                                                                                                                                                getIsoEquivalentWithUpdatedTimezone: (
                                                                                                                                                                                                                                                                                                                                                                                                date: Date,
                                                                                                                                                                                                                                                                                                                                                                                                timezone: string,
                                                                                                                                                                                                                                                                                                                                                                                                timePrecision: TimePrecision | undefined
                                                                                                                                                                                                                                                                                                                                                                                                ) => string;

                                                                                                                                                                                                                                                                                                                                                                                                  Package Files (34)

                                                                                                                                                                                                                                                                                                                                                                                                  Dependencies (9)

                                                                                                                                                                                                                                                                                                                                                                                                  Dev Dependencies (13)

                                                                                                                                                                                                                                                                                                                                                                                                  Peer Dependencies (3)

                                                                                                                                                                                                                                                                                                                                                                                                  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/@blueprintjs/datetime.

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