@blueprintjs/datetime

  • Version 4.2.3
  • Published
  • 1.3 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 TimePrecision

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

      Classes

      class DateInput

      class DateInput extends AbstractPureComponent2<DateInputProps, IDateInputState> {}

        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> {}

                        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
                                    > {}

                                      constructor

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

                                        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
                                                      > {}

                                                        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
                                                                    > {}
                                                                    • 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> {}

                                                                                    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 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 IDatePickerBaseProps, 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, isUserChange: boolean) => void;
                                                                                              • Called when the user selects a new valid date through the DatePicker or by typing in the input. The second argument is true if the user clicked on a date in the calendar, changed the input value, or cleared the selection; it will be false if the date was changed by choosing a new 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](http://react-day-picker.js.org/api/ModifiersUtils) to learn more.

                                                                                                Deprecated

                                                                                                use DatePickerModifiers

                                                                                              index signature

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

                                                                                                interface IDatePickerProps

                                                                                                interface IDatePickerProps extends IDatePickerBaseProps, 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 IDatePickerBaseProps,
                                                                                                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 IDatePickerBaseProps, 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 (14)

                                                                                                                                                                                                              Dependencies (4)

                                                                                                                                                                                                              Dev Dependencies (13)

                                                                                                                                                                                                              Peer Dependencies (2)

                                                                                                                                                                                                              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>