@blueprintjs/datetime

  • Version 5.3.4
  • Published
  • 1.8 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

    Deprecated

    use { DateInput3 } from "@blueprintjs/datetime2" instead

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. Initially created for use in @blueprintjs/datetime2.

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 AbstractPureComponent<DatePickerProps, DatePickerState> {}
      • Date picker component.

        See Also

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

        Deprecated

        use { DatePicker3 } from "@blueprintjs/datetime2" instead

      constructor

      constructor(props: DatePickerProps);

        property defaultProps

        static defaultProps: DatePickerProps;

          property displayName

          static displayName: string;

            method componentDidUpdate

            componentDidUpdate: (
            prevProps: DatePickerProps,
            prevState: DatePickerState
            ) => void;

              method render

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

                method validateProps

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

                  class DatePickerShortcutMenu

                  class DatePickerShortcutMenu extends React.PureComponent<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.

                  property defaultProps

                  static defaultProps: Partial<DatePickerShortcutMenuProps>;

                    method render

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

                      class DateRangeInput

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

                        See Also

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

                        Deprecated

                        use { DateRangeInput3 } from "@blueprintjs/datetime2" instead

                      constructor

                      constructor(props: DateRangeInputProps);

                        property defaultProps

                        static defaultProps: Partial<DateRangeInputProps>;

                          property displayName

                          static displayName: string;

                            property endInputElement

                            endInputElement: HTMLInputElement;

                              property startInputElement

                              startInputElement: HTMLInputElement;

                                method componentDidUpdate

                                componentDidUpdate: (
                                prevProps: DateRangeInputProps,
                                prevState: DateRangeInputState
                                ) => void;

                                  method render

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

                                    method reset

                                    reset: (props?: DateRangeInputProps) => void;
                                    • Public method intended for unit testing only. Do not use in feature work!

                                    method validateProps

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

                                      class DateRangePicker

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

                                        See Also

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

                                        Deprecated

                                        use { DateRangePicker3 } from "@blueprintjs/datetime2" instead

                                      constructor

                                      constructor(props: DateRangePickerProps);

                                        property defaultProps

                                        static defaultProps: DateRangePickerProps;

                                          property displayName

                                          static displayName: string;

                                            method componentDidUpdate

                                            componentDidUpdate: (
                                            prevProps: DateRangePickerProps,
                                            prevState: DateRangePickerState
                                            ) => 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;

                                                            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, and the functions in localeUtils.

                                                                                                    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 DatePickerBaseProps,
                                                                                                    DateFormatProps,
                                                                                                    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 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 Also

                                                                                                        • 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://react-day-picker-v7.netlify.app/api/DayPicker).

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

                                                                                                          In case of supplying your owner renderDay function, make sure to apply the appropriate CSS wrapper class to obtain default Blueprint styling. eg. <div className={Classes.DATEPICKER_DAY_WRAPPER}>{CONTENT_HERE}</div>

                                                                                                        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 the functions in localeUtils (and formatDate and parseDate if supported).

                                                                                                        property localeUtils

                                                                                                        localeUtils?: typeof LocaleUtils;
                                                                                                        • Collection of functions that provide internationalization support.

                                                                                                        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://react-day-picker-v7.netlify.app/api/ModifiersUtils) 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://react-day-picker-v7.netlify.app/api/ModifiersUtils) to learn more.

                                                                                                        index signature

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

                                                                                                          interface DatePickerProps

                                                                                                          interface DatePickerProps extends DatePickerBaseProps, 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, 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 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;

                                                                                                                              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 DatePickerBaseProps,
                                                                                                                              DateFormatProps,
                                                                                                                              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 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 DatePickerBaseProps, 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 DatePickerLocaleUtils

                                                                                                                                                                                  type DatePickerLocaleUtils = typeof LocaleUtils;

                                                                                                                                                                                    type DateRange

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

                                                                                                                                                                                      type NonNullDateRange

                                                                                                                                                                                      type NonNullDateRange = [Date, Date];

                                                                                                                                                                                        type TimePrecision

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

                                                                                                                                                                                          type TimezoneDisplayFormat

                                                                                                                                                                                          type TimezoneDisplayFormat =
                                                                                                                                                                                          | 'offset'
                                                                                                                                                                                          | 'abbreviation'
                                                                                                                                                                                          | 'name'
                                                                                                                                                                                          | 'composite'
                                                                                                                                                                                          | 'code'
                                                                                                                                                                                          | 'long-name';

                                                                                                                                                                                            Namespaces

                                                                                                                                                                                            namespace Classes

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

                                                                                                                                                                                              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_CARET

                                                                                                                                                                                                            const DATEPICKER_CAPTION_CARET: string;

                                                                                                                                                                                                              variable DATEPICKER_CAPTION_MEASURE

                                                                                                                                                                                                              const DATEPICKER_CAPTION_MEASURE: string;

                                                                                                                                                                                                                variable DATEPICKER_CAPTION_SELECT

                                                                                                                                                                                                                const DATEPICKER_CAPTION_SELECT: string;

                                                                                                                                                                                                                  variable DATEPICKER_CONTENT

                                                                                                                                                                                                                  const DATEPICKER_CONTENT: string;

                                                                                                                                                                                                                    variable DATEPICKER_DAY

                                                                                                                                                                                                                    const DATEPICKER_DAY: string;

                                                                                                                                                                                                                      variable DATEPICKER_DAY_DISABLED

                                                                                                                                                                                                                      const DATEPICKER_DAY_DISABLED: string;

                                                                                                                                                                                                                        variable DATEPICKER_DAY_IS_TODAY

                                                                                                                                                                                                                        const DATEPICKER_DAY_IS_TODAY: string;

                                                                                                                                                                                                                          variable DATEPICKER_DAY_OUTSIDE

                                                                                                                                                                                                                          const DATEPICKER_DAY_OUTSIDE: string;

                                                                                                                                                                                                                            variable DATEPICKER_DAY_SELECTED

                                                                                                                                                                                                                            const DATEPICKER_DAY_SELECTED: string;

                                                                                                                                                                                                                              variable DATEPICKER_DAY_WRAPPER

                                                                                                                                                                                                                              const DATEPICKER_DAY_WRAPPER: string;
                                                                                                                                                                                                                                const DATEPICKER_FOOTER: string;

                                                                                                                                                                                                                                  variable DATEPICKER_MONTH_SELECT

                                                                                                                                                                                                                                  const DATEPICKER_MONTH_SELECT: string;

                                                                                                                                                                                                                                    variable DATEPICKER_NAVBAR

                                                                                                                                                                                                                                    const DATEPICKER_NAVBAR: string;

                                                                                                                                                                                                                                      variable DATEPICKER_NAVBUTTON

                                                                                                                                                                                                                                      const DATEPICKER_NAVBUTTON: string;

                                                                                                                                                                                                                                        variable DATEPICKER_TIMEPICKER_WRAPPER

                                                                                                                                                                                                                                        const DATEPICKER_TIMEPICKER_WRAPPER: string;

                                                                                                                                                                                                                                          variable DATEPICKER_YEAR_SELECT

                                                                                                                                                                                                                                          const DATEPICKER_YEAR_SELECT: string;

                                                                                                                                                                                                                                            variable DATERANGEPICKER

                                                                                                                                                                                                                                            const DATERANGEPICKER: string;

                                                                                                                                                                                                                                              variable DATERANGEPICKER_CALENDARS

                                                                                                                                                                                                                                              const DATERANGEPICKER_CALENDARS: string;

                                                                                                                                                                                                                                                variable DATERANGEPICKER_CONTIGUOUS

                                                                                                                                                                                                                                                const DATERANGEPICKER_CONTIGUOUS: string;

                                                                                                                                                                                                                                                  variable DATERANGEPICKER_DAY_HOVERED_RANGE

                                                                                                                                                                                                                                                  const DATERANGEPICKER_DAY_HOVERED_RANGE: string;

                                                                                                                                                                                                                                                    variable DATERANGEPICKER_DAY_SELECTED_RANGE

                                                                                                                                                                                                                                                    const DATERANGEPICKER_DAY_SELECTED_RANGE: 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 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 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, dateRange2: DateRange) => 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

                                                                                                                                                                                                                                                                                                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;

                                                                                                                                                                                                                                                                                                        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 (28)

                                                                                                                                                                                                                                                                                                                                                                            Dependencies (9)

                                                                                                                                                                                                                                                                                                                                                                            Dev Dependencies (14)

                                                                                                                                                                                                                                                                                                                                                                            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>