@blueprintjs/datetime

  • Version 4.4.8
  • Published
  • 1.4 MB
  • 4 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

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable Classes

const Classes: typeof classes;

    variable DatePickerUtils

    const DatePickerUtils: {
    getDefaultMaxDate: typeof getDefaultMaxDate;
    getDefaultMinDate: typeof getDefaultMinDate;
    getFormattedDateString: typeof getFormattedDateString;
    };
    • 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';
    };

      Classes

      class DateInput

      class DateInput extends AbstractPureComponent2<DateInputProps, IDateInputState> {}
      • Date input component.

        See Also

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

        Deprecated

        use { DateInput2 } from "@blueprintjs/datetime2"

      property defaultProps

      static defaultProps: Partial<IDateInputProps>;

        property displayName

        static displayName: string;

          property inputElement

          inputElement: HTMLInputElement;

            property popoverContentElement

            popoverContentElement: HTMLDivElement;

              property state

              state: IDateInputState;

                method componentDidUpdate

                componentDidUpdate: (
                prevProps: DateInputProps,
                prevState: IDateInputState
                ) => void;

                  method render

                  render: () => JSX.Element;

                    class DatePicker

                    class DatePicker extends AbstractPureComponent2<DatePickerProps, IDatePickerState> {}
                    • Date picker component.

                      See Also

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

                    constructor

                    constructor(props: IDatePickerProps, context?: any);

                      property defaultProps

                      static defaultProps: IDatePickerProps;

                        property displayName

                        static displayName: string;

                          method componentDidUpdate

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

                            method render

                            render: () => JSX.Element;

                              method validateProps

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

                                class DateRangeInput

                                class DateRangeInput extends AbstractPureComponent2<
                                DateRangeInputProps,
                                IDateRangeInputState
                                > {}
                                • Date range input component.

                                  See Also

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

                                  Deprecated

                                  use { DateRangeInput2 } from "@blueprintjs/datetime2"

                                constructor

                                constructor(props: IDateRangeInputProps);

                                  property defaultProps

                                  static defaultProps: Partial<IDateRangeInputProps>;

                                    property displayName

                                    static displayName: string;

                                      property endInputElement

                                      endInputElement: HTMLInputElement;

                                        property startInputElement

                                        startInputElement: HTMLInputElement;

                                          method componentDidUpdate

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

                                            method render

                                            render: () => 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 AbstractPureComponent2<
                                                DateRangePickerProps,
                                                IDateRangePickerState
                                                > {}
                                                • Date range picker component.

                                                  See Also

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

                                                constructor

                                                constructor(props: IDateRangePickerProps, context?: any);

                                                  property defaultProps

                                                  static defaultProps: IDateRangePickerProps;

                                                    property displayName

                                                    static displayName: string;

                                                      method componentDidUpdate

                                                      componentDidUpdate: (
                                                      prevProps: DateRangePickerProps,
                                                      prevState: IDateRangePickerState
                                                      ) => void;

                                                        method render

                                                        render: () => JSX.Element;

                                                          method validateProps

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

                                                            class DateTimePicker

                                                            class DateTimePicker extends AbstractPureComponent2<
                                                            IDateTimePickerProps,
                                                            IDateTimePickerState
                                                            > {}
                                                            • Date time picker component.

                                                              See Also

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

                                                              Deprecated

                                                              since 3.4.0. Prefer <DatePicker> with timePrecision and timePickerProps.

                                                            constructor

                                                            constructor(props?: IDateTimePickerProps, context?: any);

                                                              property defaultProps

                                                              static defaultProps: IDateTimePickerProps;

                                                                property displayName

                                                                static displayName: string;

                                                                  property handleDateChange

                                                                  handleDateChange: (dateValue: Date, isUserChange: boolean) => void;

                                                                    property handleTimeChange

                                                                    handleTimeChange: (timeValue: Date) => void;

                                                                      method componentDidUpdate

                                                                      componentDidUpdate: (prevProps: DatePickerProps) => void;

                                                                        method render

                                                                        render: () => JSX.Element;

                                                                          class TimePicker

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

                                                                            See Also

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

                                                                          constructor

                                                                          constructor(props?: ITimePickerProps, context?: any);

                                                                            property defaultProps

                                                                            static defaultProps: ITimePickerProps;

                                                                              property displayName

                                                                              static displayName: string;

                                                                                method componentDidUpdate

                                                                                componentDidUpdate: (prevProps: TimePickerProps) => void;

                                                                                  method render

                                                                                  render: () => JSX.Element;

                                                                                    Interfaces

                                                                                    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?: 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 IDateFormatProps

                                                                                      interface IDateFormatProps {}
                                                                                      • Deprecated

                                                                                        use 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, locale?: string) => string;
                                                                                      • Function to render a JavaScript Date to a string. Optional locale 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, locale?: 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 locale argument comes directly from the prop on this component.

                                                                                      interface IDateInputProps

                                                                                      interface IDateInputProps extends DatePickerBaseProps, DateFormatProps, Props {}
                                                                                      • Deprecated

                                                                                        use DateInputProps

                                                                                      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 defaultValue

                                                                                      defaultValue?: Date;
                                                                                      • The default date to be used in the component when uncontrolled.

                                                                                      property disabled

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

                                                                                        false

                                                                                      property fill

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

                                                                                      property inputProps

                                                                                      inputProps?: InputGroupProps2;
                                                                                      • Props to pass to the [input group](#core/components/text-inputs.input-group). disabled and value will be ignored in favor of the top-level props on this component. type is fixed to "text".

                                                                                      property onChange

                                                                                      onChange?: (selectedDate: Date | null, isUserChange: boolean) => void;
                                                                                      • Called when the user selects a new valid date through the DatePicker or by typing in the input.

                                                                                        Parameter newDate

                                                                                        Date 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 popoverProps

                                                                                      popoverProps?: Partial<IPopoverProps> & object;
                                                                                      • Props to pass to the Popover. Note that content, autoFocus, and enforceFocus cannot be changed.

                                                                                      property rightElement

                                                                                      rightElement?: 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 todayButtonText

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

                                                                                        "Today"

                                                                                      property value

                                                                                      value?: Date | null;
                                                                                      • The currently selected day. If this prop is provided, the component acts in a controlled manner. To display no date in the input field, pass null to the value prop. To display an invalid date error in the input field, pass new Date(undefined) to the value prop.

                                                                                      interface IDatePickerModifiers

                                                                                      interface IDatePickerModifiers {}
                                                                                      • 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.

                                                                                        Deprecated

                                                                                        use DatePickerModifiers

                                                                                      index signature

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

                                                                                        interface IDatePickerProps

                                                                                        interface IDatePickerProps extends DatePickerBaseProps, Props {}
                                                                                        • Deprecated

                                                                                          use DatePickerProps

                                                                                        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 IDatePickerShortcut

                                                                                        interface IDatePickerShortcut extends IDateShortcutBase {}
                                                                                        • Deprecated

                                                                                          use DatePickerShortcut

                                                                                        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 IDateRangeInputProps

                                                                                        interface IDateRangeInputProps extends DatePickerBaseProps, DateFormatProps, Props {}
                                                                                        • Deprecated

                                                                                          use DateRangeInputProps

                                                                                        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?: InputGroupProps2;
                                                                                        • Props to pass to the end-date [input group](#core/components/text-inputs.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 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 popoverProps

                                                                                        popoverProps?: Partial<IPopoverProps>;
                                                                                        • The props to pass to the popover. autoFocus, content, and enforceFocus will be ignored to avoid compromising usability.

                                                                                        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?: InputGroupProps2;
                                                                                        • Props to pass to the start-date [input group](#core/components/text-inputs.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 IDateRangePickerProps

                                                                                        interface IDateRangePickerProps extends DatePickerBaseProps, Props {}
                                                                                        • Deprecated

                                                                                          use DateRangePickerProps

                                                                                        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,
                                                                                        hoveredDay: Date,
                                                                                        hoveredBoundary: Boundary
                                                                                        ) => 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 IDateRangeShortcut

                                                                                        interface IDateRangeShortcut extends IDateShortcutBase {}
                                                                                        • Deprecated

                                                                                          use DateRangeShortcut

                                                                                        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 IDateTimePickerProps

                                                                                        interface IDateTimePickerProps extends Props {}

                                                                                          property canClearSelection

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

                                                                                            true

                                                                                          property datePickerProps

                                                                                          datePickerProps?: DatePickerProps;
                                                                                          • Any props to be passed on to the DatePicker other than the value and onChange props as they come directly from the DateTimePicker props.

                                                                                          property defaultValue

                                                                                          defaultValue?: Date;
                                                                                          • The initial date and time value that will be set. This will be ignored if value is set.

                                                                                            Date.now()

                                                                                          property onChange

                                                                                          onChange?: (selectedDate: Date, isUserChange: boolean) => void;
                                                                                          • Callback invoked when the user changes the date or time.

                                                                                          property timePickerProps

                                                                                          timePickerProps?: TimePickerProps;
                                                                                          • Any props to be passed on to the TimePicker other than the value and onChange props as they come directly from the DateTimePicker props.

                                                                                          property value

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

                                                                                          interface ITimePickerProps

                                                                                          interface ITimePickerProps extends Props {}
                                                                                          • Deprecated

                                                                                            use TimePickerProps

                                                                                          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.

                                                                                          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 DateFormatProps

                                                                                                                            type DateFormatProps = IDateFormatProps;

                                                                                                                              type DateInputProps

                                                                                                                              type DateInputProps = IDateInputProps;

                                                                                                                                type DatePickerDayModifiers

                                                                                                                                type DatePickerDayModifiers = IDatePickerDayModifiers;

                                                                                                                                  type DatePickerLocaleUtils

                                                                                                                                  type DatePickerLocaleUtils = IDatePickerLocaleUtils;

                                                                                                                                    type DatePickerModifiers

                                                                                                                                    type DatePickerModifiers = IDatePickerModifiers;

                                                                                                                                      type DatePickerProps

                                                                                                                                      type DatePickerProps = IDatePickerProps;

                                                                                                                                        type DatePickerShortcut

                                                                                                                                        type DatePickerShortcut = IDatePickerShortcut;

                                                                                                                                          type DateRange

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

                                                                                                                                            type DateRangeInputProps

                                                                                                                                            type DateRangeInputProps = IDateRangeInputProps;

                                                                                                                                              type DateRangePickerProps

                                                                                                                                              type DateRangePickerProps = IDateRangePickerProps;

                                                                                                                                                type DateRangeShortcut

                                                                                                                                                type DateRangeShortcut = IDateRangeShortcut;

                                                                                                                                                  type IDatePickerLocaleUtils

                                                                                                                                                  type IDatePickerLocaleUtils = typeof LocaleUtils;

                                                                                                                                                    type TimePickerProps

                                                                                                                                                    type TimePickerProps = ITimePickerProps;

                                                                                                                                                      type TimePrecision

                                                                                                                                                      type TimePrecision = typeof TimePrecision[keyof typeof TimePrecision];

                                                                                                                                                        Namespaces

                                                                                                                                                        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 areEqual

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

                                                                                                                                                          function areRangesEqual

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

                                                                                                                                                            function areSameDay

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

                                                                                                                                                              function areSameMonth

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

                                                                                                                                                                function areSameTime

                                                                                                                                                                areSameTime: (date1: Date, date2: Date) => 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 isDateValid

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

                                                                                                                                                                                        function isDayInRange

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

                                                                                                                                                                                          function isDayRangeInRange

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

                                                                                                                                                                                            function isMonthInRange

                                                                                                                                                                                            isMonthInRange: (date: Date, dateRange: DateRange) => 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;

                                                                                                                                                                                                      Package Files (15)

                                                                                                                                                                                                      Dependencies (4)

                                                                                                                                                                                                      Dev Dependencies (13)

                                                                                                                                                                                                      Peer Dependencies (3)

                                                                                                                                                                                                      Badge

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

                                                                                                                                                                                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@blueprintjs/datetime.

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