@blueprintjs/datetime

@blueprintjs/datetime

Version 5.1.0
Published 1 day ago
1.74 MB
9 dependencies
Apache-2.0 license

Install

npm i @blueprintjs/datetime

yarn add @blueprintjs/datetime

pnpm add @blueprintjs/datetime

Overview

Components for interacting with dates and times

Index

Variables

variable DateInput

const DateInput: React.FC<DateInputProps>;

Date input component.
See Also
- https://blueprintjs.com/docs/#datetime/date-input

variable DatePickerUtils

const DatePickerUtils: {
    getDefaultMaxDate: typeof getDefaultMaxDate;
    getDefaultMinDate: typeof getDefaultMinDate;
    getFormattedDateString: typeof getFormattedDateString;
    measureTextWidth: typeof measureTextWidth;
};

DatePicker-related utility functions which may be useful outside this package to build date/time components. Initially created for use in @blueprintjs/datetime2.

variable TimePrecision

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

variable TimezoneDisplayFormat

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

Functions

function getTimezoneMetadata

getTimezoneMetadata: (
    timezoneIanaCode: string,
    date?: Date
) => TimezoneWithNames | undefined;

Given a timezone IANA code and an optional date object, retrieve additional metadata like its common name, offset, and abbreviation.

Classes

class DatePicker

class DatePicker extends AbstractPureComponent<DatePickerProps, DatePickerState> {}

Date picker component.
See Also
- https://blueprintjs.com/docs/#datetime/datepicker

constructor

constructor(props: DatePickerProps);

property defaultProps

static defaultProps: DatePickerProps;

property displayName

static displayName: string;

method componentDidUpdate

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

method render

render: () => JSX.Element;

method validateProps

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

class DatePickerShortcutMenu

class DatePickerShortcutMenu extends React.PureComponent<DatePickerShortcutMenuProps> {}

Menu of DateRangeShortcut items, typically displayed in the UI to the left of a day picker calendar.
This component may be used for single date pickers as well as range pickers by toggling the useSingleDateShortcuts option.

property defaultProps

static defaultProps: Partial<DatePickerShortcutMenuProps>;

method render

render: () => JSX.Element;

class DateRangeInput

class DateRangeInput extends AbstractPureComponent<
    DateRangeInputProps,
    DateRangeInputState
> {}

Date range input component.
See Also
- https://blueprintjs.com/docs/#datetime/date-range-input

constructor

constructor(props: DateRangeInputProps);

property defaultProps

static defaultProps: Partial<DateRangeInputProps>;

property displayName

static displayName: string;

property endInputElement

endInputElement: HTMLInputElement;

property startInputElement

startInputElement: HTMLInputElement;

method componentDidUpdate

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

method render

render: () => JSX.Element;

method reset

reset: (props?: DateRangeInputProps) => void;

Public method intended for unit testing only. Do not use in feature work!

method validateProps

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

class DateRangePicker

class DateRangePicker extends AbstractPureComponent<
    DateRangePickerProps,
    DateRangePickerState
> {}

Date range picker component.
See Also
- https://blueprintjs.com/docs/#datetime/daterangepicker

constructor

constructor(props: DateRangePickerProps);

property defaultProps

static defaultProps: DateRangePickerProps;

property displayName

static displayName: string;

method componentDidUpdate

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

method render

render: () => JSX.Element;

method validateProps

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

class DateRangeSelectionStrategy

class DateRangeSelectionStrategy {}

method getNextState

static getNextState: (
    currentRange: DateRange,
    day: Date,
    allowSingleDayRange: boolean,
    boundary?: Boundary
) => DateRangeSelectionState;

Returns the new date-range and the boundary that would be affected if day were clicked. The affected boundary may be different from the provided boundary in some cases. For example, clicking a particular boundary's selected date will always deselect it regardless of which boundary you provide to this function (because it's simply a more intuitive interaction).

class MonthAndYear

class MonthAndYear {}

constructor

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

method clone

clone: () => MonthAndYear;

method fromDate

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

method getFullDate

getFullDate: () => Date;

method getMonth

getMonth: () => number;

method getNextMonth

getNextMonth: () => MonthAndYear;

method getPreviousMonth

getPreviousMonth: () => MonthAndYear;

method getYear

getYear: () => number;

method isAfter

isAfter: (monthAndYear: MonthAndYear) => boolean;

method isBefore

isBefore: (monthAndYear: MonthAndYear) => boolean;

method isSame

isSame: (monthAndYear: MonthAndYear) => boolean;

method isSameMonth

isSameMonth: (monthAndYear: MonthAndYear) => boolean;

class TimePicker

class TimePicker extends React.Component<TimePickerProps, TimePickerState> {}

Time picker component.
See Also
- https://blueprintjs.com/docs/#datetime/timepicker

constructor

constructor(props?: TimePickerProps);

property defaultProps

static defaultProps: TimePickerProps;

property displayName

static displayName: string;

method componentDidUpdate

componentDidUpdate: (prevProps: TimePickerProps) => void;

method render

render: () => JSX.Element;

class TimezoneSelect

class TimezoneSelect extends AbstractPureComponent<
    TimezoneSelectProps,
    TimezoneSelectState
> {}

Timezone select component.
See Also
- https://blueprintjs.com/docs/#datetime/timezone-select

constructor

constructor(props: TimezoneSelectProps);

property defaultProps

static defaultProps: Partial<TimezoneSelectProps>;

property displayName

static displayName: string;

method componentDidUpdate

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

method render

render: () => JSX.Element;

Interfaces

interface DateFormatProps

interface DateFormatProps {}

property invalidDateMessage

invalidDateMessage?: string;

The error message to display when the date selected is invalid.
"Invalid date"

property locale

locale?: string;

The locale name, which is passed to formatDate, parseDate, and the functions in localeUtils.

property outOfRangeMessage

outOfRangeMessage?: string;

The error message to display when the date selected is out of range.
"Out of range"

property placeholder

placeholder?: string;

Placeholder text to display in empty input fields. Recommended practice is to indicate the expected date format.

method formatDate

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

Function to render a JavaScript Date to a string. Optional localeCode argument comes directly from the prop on this component: if the prop is defined, then the argument will be too.

method parseDate

parseDate: (str: string, localeCode?: string) => Date | false | null;

Function to deserialize user input text to a JavaScript Date object. Return false if the string is an invalid date. Return null to represent the absence of a date. Optional localeCode argument comes directly from the prop on this component.

interface DateInputProps

interface DateInputProps
    extends DatePickerBaseProps,
        DateFormatProps,
        DatetimePopoverProps,
        Props {}

property canClearSelection

canClearSelection?: boolean;

Allows the user to clear the selection by clicking the currently selected day. Passed to DatePicker component.
true

property clearButtonText

clearButtonText?: string;

Text for the reset button in the date picker action bar. Passed to DatePicker component.
"Clear"

property closeOnSelection

closeOnSelection?: boolean;

Whether the calendar popover should close when a date is selected.
true

property defaultTimezone

defaultTimezone?: string;

The default timezone selected. Defaults to the user's local timezone.
Mutually exclusive with timezone prop.
See Also
- https://www.iana.org/time-zones

property defaultValue

defaultValue?: string;

The default date to be used in the component when uncontrolled, represented as an ISO string.

property disabled

disabled?: boolean;

Whether the date input is non-interactive.
false

property disableTimezoneSelect

disableTimezoneSelect?: boolean;

Whether to disable the timezone select.
false

property fill

fill?: boolean;

Whether the component should take up the full width of its container.

property inputProps

inputProps?: Partial<Omit<InputGroupProps, 'disabled' | 'type' | 'value'>>;

Props to pass to the [InputGroup component](#core/components/input-group).
Some properties are unavailable: - inputProps.value: use value instead - inputProps.disabled: use disabled instead - inputProps.type: cannot be customized, always set to "text"
Note that inputProps.tagName will override popoverProps.targetTagName.

property onChange

onChange?: (newDate: string | null, isUserChange: boolean) => void;

Callback invoked whenever the date or timezone has changed.
Parameter newDate
ISO string or null (if the date is invalid or text input has been cleared)
Parameter isUserChange
true if the user clicked on a date in the calendar, changed the input value, or cleared the selection; false if the date was changed by changing the month or year.

property onError

onError?: (errorDate: Date) => void;

Called when the user finishes typing in a new date and the date causes an error state. If the date is invalid, new Date(undefined) will be returned. If the date is out of range, the out of range date will be returned (onChange is not called in this case).

property onTimezoneChange

onTimezoneChange?: (timezone: string) => void;

Callback invoked when the user selects a timezone.
Parameter timezone
the new timezone's IANA code

property rightElement

rightElement?: JSX.Element;

Element to render on right side of input.

property shortcuts

shortcuts?: boolean | DatePickerShortcut[];

Whether shortcuts to quickly select a date are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.
false

property showActionsBar

showActionsBar?: boolean;

Whether the bottom bar displaying "Today" and "Clear" buttons should be shown below the calendar.
false

property showTimezoneSelect

showTimezoneSelect?: boolean;

Whether to show the timezone select dropdown on the right side of the input. If timePrecision is undefined, this will always be false.
false

property timezone

timezone?: string;

The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".
If you set this prop, the TimezoneSelect will behave in a controlled manner and you are responsible for updating this value using the onTimezoneChange callback.
Mutually exclusive with defaultTimezone prop.
See Also
- https://www.iana.org/time-zones

property todayButtonText

todayButtonText?: string;

Text for the today button in the date picker action bar. Passed to DatePicker component.
"Today"

property value

value?: string | null;

An ISO string representing the selected time.

interface DatePickerBaseProps

interface DatePickerBaseProps {}

property dayPickerProps

dayPickerProps?: DayPickerProps;

Props to pass to ReactDayPicker. See API documentation [here](https://react-day-picker-v7.netlify.app/api/DayPicker).
The following props are managed by the component and cannot be configured: canChangeMonth, captionElement, fromMonth (use minDate), month (use initialMonth), toMonth (use maxDate).
In case of supplying your owner renderDay function, make sure to apply the appropriate CSS wrapper class to obtain default Blueprint styling. eg. <div className={Classes.DATEPICKER_DAY_WRAPPER}>{CONTENT_HERE}</div>

property footerElement

footerElement?: JSX.Element;

An additional element to show below the date picker.

property highlightCurrentDay

highlightCurrentDay?: boolean;

Whether the current day should be highlighted in the calendar.
false

property initialMonth

initialMonth?: Date;

The initial month the calendar displays.

property locale

locale?: string;

The locale name, which is passed to the functions in localeUtils (and formatDate and parseDate if supported).

property localeUtils

localeUtils?: typeof LocaleUtils;

Collection of functions that provide internationalization support.

property maxDate

maxDate?: Date;

The latest date the user can select.
6 months from now.

property minDate

minDate?: Date;

The earliest date the user can select.
Jan. 1st, 20 years in the past.

property modifiers

modifiers?: DatePickerModifiers;

Collection of functions that determine which modifier classes get applied to which days. Each function should accept a Date and return a boolean. See the [**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/api/ModifiersUtils) to learn more.

property reverseMonthAndYearMenus

reverseMonthAndYearMenus?: boolean;

If true, the month menu will appear to the left of the year menu. Otherwise, the month menu will apear to the right of the year menu.
false

property timePickerProps

timePickerProps?: TimePickerProps;

Further configure the TimePicker that appears beneath the calendar. onChange and value are ignored in favor of the corresponding top-level props on this component.
Passing any non-empty object to this prop will cause the TimePicker to appear.

property timePrecision

timePrecision?: TimePrecision;

The precision of time selection that accompanies the calendar. Passing a TimePrecision value (or providing timePickerProps) shows a TimePicker below the calendar. Time is preserved across date changes.
This is shorthand for timePickerProps.precision and is a quick way to enable time selection.

interface DatePickerModifiers

interface DatePickerModifiers {}

Collection of functions that determine which modifier classes get applied to which days. See the [**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/api/ModifiersUtils) to learn more.

index signature

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

interface DatePickerProps

interface DatePickerProps extends DatePickerBaseProps, Props {}

property canClearSelection

canClearSelection?: boolean;

Allows the user to clear the selection by clicking the currently selected day. If disabled, the "Clear" Button in the Actions Bar will also be disabled.
true

property clearButtonText

clearButtonText?: string;

Text for the reset button in the action bar.
"Clear"

property defaultValue

defaultValue?: Date;

Initial day the calendar will display as selected. This should not be set if value is set.

property onChange

onChange?: (selectedDate: Date, isUserChange: boolean) => void;

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

property onShortcutChange

onShortcutChange?: (shortcut: DatePickerShortcut, index: number) => void;

Called when the shortcuts props is enabled and the user changes the shortcut.

property selectedShortcutIndex

selectedShortcutIndex?: number;

The currently selected shortcut. If this prop is provided, the component acts in a controlled manner.

property shortcuts

shortcuts?: boolean | DatePickerShortcut[];

Whether shortcuts to quickly select a date are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.

property showActionsBar

showActionsBar?: boolean;

Whether the bottom bar displaying "Today" and "Clear" buttons should be shown.
false

property todayButtonText

todayButtonText?: string;

Text for the today button in the action bar.
"Today"

property value

value?: Date | null;

The currently selected day. If this prop is provided, the component acts in a controlled manner.

interface DatePickerShortcut

interface DatePickerShortcut extends DateShortcutBase {}

property date

date: Date;

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

interface DatePickerShortcutMenuProps

interface DatePickerShortcutMenuProps {}

property allowSingleDayRange

allowSingleDayRange: boolean;

property maxDate

maxDate: Date;

property minDate

minDate: Date;

property onShortcutClick

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

property selectedShortcutIndex

selectedShortcutIndex?: number;

property shortcuts

shortcuts: DateRangeShortcut[] | true;

property timePrecision

timePrecision: TimePrecision;

property useSingleDateShortcuts

useSingleDateShortcuts?: boolean;

The DatePicker component reuses this component for a single date. This changes the default shortcut labels and affects which shortcuts are used.
false

interface DateRangeInputProps

interface DateRangeInputProps
    extends DatePickerBaseProps,
        DateFormatProps,
        DatetimePopoverProps,
        Props {}

property allowSingleDayRange

allowSingleDayRange?: boolean;

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

property closeOnSelection

closeOnSelection?: boolean;

Whether the calendar popover should close when a date range is fully selected.
true

property contiguousCalendarMonths

contiguousCalendarMonths?: boolean;

Whether displayed months in the calendar are contiguous. If false, each side of the calendar can move independently to non-contiguous months.
true

property defaultValue

defaultValue?: DateRange;

The default date range to be used in the component when uncontrolled. This will be ignored if value is set.

property disabled

disabled?: boolean;

Whether the text inputs are non-interactive.
false

property endInputProps

endInputProps?: InputGroupProps;

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

property fill

fill?: boolean;

Whether the component should take up the full width of its container.

property onChange

onChange?: (selectedRange: DateRange) => void;

Called when the user selects a day. If no days are selected, it will pass [null, null]. If a start date is selected but not an end date, it will pass [selectedDate, null]. If both a start and end date are selected, it will pass [startDate, endDate].

property onError

onError?: (errorRange: DateRange) => void;

Called when the user finishes typing in a new date and the date causes an error state. If the date is invalid, new Date(undefined) will be returned for the corresponding boundary of the date range. If the date is out of range, the out-of-range date will be returned for the corresponding boundary of the date range (onChange is not called in this case).

property overlappingDatesMessage

overlappingDatesMessage?: string;

The error message to display when the selected dates overlap. This can only happen when typing dates in the input field.
"Overlapping dates"

property selectAllOnFocus

selectAllOnFocus?: boolean;

Whether the entire text field should be selected on focus.
false

property shortcuts

shortcuts?: boolean | DateRangeShortcut[];

Whether shortcuts to quickly select a range of dates are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.
true

property singleMonthOnly

singleMonthOnly?: boolean;

Whether to show only a single month calendar.
false

property startInputProps

startInputProps?: InputGroupProps;

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

property value

value?: DateRange;

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

interface DateRangePickerProps

interface DateRangePickerProps extends DatePickerBaseProps, Props {}

property allowSingleDayRange

allowSingleDayRange?: boolean;

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

property boundaryToModify

boundaryToModify?: Boundary;

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

property contiguousCalendarMonths

contiguousCalendarMonths?: boolean;

Whether displayed months in the calendar are contiguous. If false, each side of the calendar can move independently to non-contiguous months.
true

property defaultValue

defaultValue?: DateRange;

Initial DateRange the calendar will display as selected. This should not be set if value is set.

property onChange

onChange?: (selectedDates: DateRange) => void;

Called when the user selects a day. If no days are selected, it will pass [null, null]. If a start date is selected but not an end date, it will pass [selectedDate, null]. If both a start and end date are selected, it will pass [startDate, endDate].

property onHoverChange

onHoverChange?: (
    hoveredDates: DateRange | undefined,
    hoveredDay: Date,
    hoveredBoundary: Boundary | undefined
) => void;

Called when the user changes the hovered date range, either from mouseenter or mouseleave. When triggered from mouseenter, it will pass the date range that would result from next click. When triggered from mouseleave, it will pass undefined.

property onShortcutChange

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

Called when the shortcuts props is enabled and the user changes the shortcut.

property selectedShortcutIndex

selectedShortcutIndex?: number;

The currently selected shortcut. If this prop is provided, the component acts in a controlled manner.

property shortcuts

shortcuts?: boolean | DateRangeShortcut[];

Whether shortcuts to quickly select a range of dates are displayed or not. If true, preset shortcuts will be displayed. If false, no shortcuts will be displayed. If an array is provided, the custom shortcuts will be displayed.
true

property singleMonthOnly

singleMonthOnly?: boolean;

Whether to show only a single month calendar.
false

property value

value?: DateRange;

The currently selected DateRange. If this prop is provided, the component acts in a controlled manner.

interface DateRangeSelectionState

interface DateRangeSelectionState {}

property boundary

boundary: Boundary;

The boundary that would be modified by clicking the provided day.

property dateRange

dateRange: DateRange;

The date range that would be selected after clicking the provided day.

interface DateRangeShortcut

interface DateRangeShortcut extends DateShortcutBase {}

property dateRange

dateRange: DateRange;

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

interface TimePickerProps

interface TimePickerProps extends Props {}

property autoFocus

autoFocus?: boolean;

Whether to focus the first input when it opens initially.
false

property defaultValue

defaultValue?: Date;

Initial time the TimePicker will display. This should not be set if value is set.

property disabled

disabled?: boolean;

Whether the time picker is non-interactive.
false

property maxTime

maxTime?: Date;

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

property minTime

minTime?: Date;

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

property onBlur

onBlur?: (event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void;

Callback invoked on blur event emitted by specific time unit input

property onChange

onChange?: (newTime: Date) => void;

Callback invoked when the user changes the time.

property onFocus

onFocus?: (event: React.FocusEvent<HTMLInputElement>, unit: TimeUnit) => void;

Callback invoked on focus event emitted by specific time unit input

property onKeyDown

onKeyDown?: (
    event: React.KeyboardEvent<HTMLInputElement>,
    unit: TimeUnit
) => void;

Callback invoked on keydown event emitted by specific time unit input

property onKeyUp

onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>, unit: TimeUnit) => void;

Callback invoked on keyup event emitted by specific time unit input

property precision

precision?: TimePrecision;

The precision of time the user can set.
TimePrecision.MINUTE

property selectAllOnFocus

selectAllOnFocus?: boolean;

Whether all the text in each input should be selected on focus.
false

property showArrowButtons

showArrowButtons?: boolean;

Whether to show arrows buttons for changing the time.
false

property useAmPm

useAmPm?: boolean;

Whether to use a 12 hour format with an AM/PM dropdown.
false

property value

value?: Date | null;

The currently set time. If this prop is provided, the component acts in a controlled manner.

interface TimezoneSelectProps

interface TimezoneSelectProps extends Props {}

property buttonProps

buttonProps?: Partial<ButtonProps>;

Props to spread to the target Button. This prop will be ignored if children is provided.

property children

children?: React.ReactNode;

Element which triggers the timezone select popover. If this is undefined, by default the component will render a <Button> which shows the currently selected timezone.

property date

date?: Date;

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

property disabled

disabled?: boolean;

Whether this component is non-interactive. This prop will be ignored if children is provided.
false

property fill

fill?: boolean;

Whether the component should take up the full width of its container. This overrides popoverProps.fill and buttonProps.fill.
false

property inputProps

inputProps?: InputGroupProps;

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

property onChange

onChange: (timezone: string) => void;

Callback invoked when the user selects a timezone.
Parameter timezone
the new timezone's IANA code

property placeholder

placeholder?: string;

Text to show when no timezone has been selected (value === undefined). This prop will be ignored if children is provided.
"Select timezone..."

property popoverProps

popoverProps?: SelectPopoverProps['popoverProps'];

Props to spread to the popover. Note that content cannot be changed.

property showLocalTimezone

showLocalTimezone?: boolean;

Whether to show the local timezone at the top of the list of initial timezone suggestions.
false

property value

value: string | undefined;

The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".
See Also
- https://www.iana.org/time-zones

property valueDisplayFormat

valueDisplayFormat?: TimezoneDisplayFormat;

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

interface TimezoneWithNames

interface TimezoneWithNames extends Timezone {}

property longName

longName: string;

property shortName

shortName: string;

Enums

enum Months

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

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

member APRIL

APRIL = 3

member AUGUST

AUGUST = 7

member DECEMBER

DECEMBER = 11

member FEBRUARY

FEBRUARY = 1

member JANUARY

JANUARY = 0

member JULY

JULY = 6

member JUNE

JUNE = 5

member MARCH

MARCH = 2

member MAY

MAY = 4

member NOVEMBER

NOVEMBER = 10

member OCTOBER

OCTOBER = 9

member SEPTEMBER

SEPTEMBER = 8

enum TimeUnit

enum TimeUnit {
    HOUR_24 = 'hour24',
    HOUR_12 = 'hour12',
    MINUTE = 'minute',
    SECOND = 'second',
    MS = 'ms',
}

describes a component of time. H:MM:SS.MS

member HOUR_12

HOUR_12 = 'hour12'

member HOUR_24

HOUR_24 = 'hour24'

member MINUTE

MINUTE = 'minute'

member MS

MS = 'ms'

member SECOND

SECOND = 'second'

Type Aliases

type DatePickerLocaleUtils

type DatePickerLocaleUtils = typeof LocaleUtils;

type DateRange

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

type NonNullDateRange

type NonNullDateRange = [Date, Date];

type TimePrecision

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

type TimezoneDisplayFormat

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

Namespaces

namespace Classes

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

variable DATE_INPUT

const DATE_INPUT: string;

const DATE_INPUT_POPOVER: string;

variable DATE_INPUT_TIMEZONE_SELECT

const DATE_INPUT_TIMEZONE_SELECT: string;

variable DATE_RANGE_INPUT

const DATE_RANGE_INPUT: string;

const DATE_RANGE_INPUT_POPOVER: string;

variable DATEPICKER

const DATEPICKER: string;

variable DATEPICKER_CAPTION

const DATEPICKER_CAPTION: string;

variable DATEPICKER_CAPTION_CARET

const DATEPICKER_CAPTION_CARET: string;

variable DATEPICKER_CAPTION_MEASURE

const DATEPICKER_CAPTION_MEASURE: string;

variable DATEPICKER_CAPTION_SELECT

const DATEPICKER_CAPTION_SELECT: string;

variable DATEPICKER_CONTENT

const DATEPICKER_CONTENT: string;

variable DATEPICKER_DAY

const DATEPICKER_DAY: string;

variable DATEPICKER_DAY_DISABLED

const DATEPICKER_DAY_DISABLED: string;

variable DATEPICKER_DAY_IS_TODAY

const DATEPICKER_DAY_IS_TODAY: string;

variable DATEPICKER_DAY_OUTSIDE

const DATEPICKER_DAY_OUTSIDE: string;

variable DATEPICKER_DAY_SELECTED

const DATEPICKER_DAY_SELECTED: string;

variable DATEPICKER_DAY_WRAPPER

const DATEPICKER_DAY_WRAPPER: string;

variable DATEPICKER_FOOTER

const DATEPICKER_FOOTER: string;

variable DATEPICKER_MONTH_SELECT

const DATEPICKER_MONTH_SELECT: string;

variable DATEPICKER_NAVBAR

const DATEPICKER_NAVBAR: string;

variable DATEPICKER_NAVBUTTON

const DATEPICKER_NAVBUTTON: string;

variable DATEPICKER_TIMEPICKER_WRAPPER

const DATEPICKER_TIMEPICKER_WRAPPER: string;

variable DATEPICKER_YEAR_SELECT

const DATEPICKER_YEAR_SELECT: string;

variable DATERANGEPICKER

const DATERANGEPICKER: string;

variable DATERANGEPICKER_CALENDARS

const DATERANGEPICKER_CALENDARS: string;

variable DATERANGEPICKER_CONTIGUOUS

const DATERANGEPICKER_CONTIGUOUS: string;

variable DATERANGEPICKER_DAY_HOVERED_RANGE

const DATERANGEPICKER_DAY_HOVERED_RANGE: string;

variable DATERANGEPICKER_DAY_SELECTED_RANGE

const DATERANGEPICKER_DAY_SELECTED_RANGE: string;

variable DATERANGEPICKER_SHORTCUTS

const DATERANGEPICKER_SHORTCUTS: string;

variable DATERANGEPICKER_SINGLE_MONTH

const DATERANGEPICKER_SINGLE_MONTH: string;

variable DATERANGEPICKER_TIMEPICKERS

const DATERANGEPICKER_TIMEPICKERS: string;

variable TIMEPICKER

const TIMEPICKER: string;

variable TIMEPICKER_AMPM_SELECT

const TIMEPICKER_AMPM_SELECT: string;

variable TIMEPICKER_ARROW_BUTTON

const TIMEPICKER_ARROW_BUTTON: string;

variable TIMEPICKER_ARROW_ROW

const TIMEPICKER_ARROW_ROW: string;

variable TIMEPICKER_DIVIDER_TEXT

const TIMEPICKER_DIVIDER_TEXT: string;

variable TIMEPICKER_HOUR

const TIMEPICKER_HOUR: string;

variable TIMEPICKER_INPUT

const TIMEPICKER_INPUT: string;

variable TIMEPICKER_INPUT_ROW

const TIMEPICKER_INPUT_ROW: string;

variable TIMEPICKER_MILLISECOND

const TIMEPICKER_MILLISECOND: string;

variable TIMEPICKER_MINUTE

const TIMEPICKER_MINUTE: string;

variable TIMEPICKER_SECOND

const TIMEPICKER_SECOND: string;

variable TIMEZONE_SELECT

const TIMEZONE_SELECT: string;

const TIMEZONE_SELECT_POPOVER: string;

namespace DateUtils

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

Returns true if the time part of date is later than or equal to the time part of dateToCompare. The day, month, and year parts will not be compared.

function areRangesEqual

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

function clone

clone: (d: Date) => Date;

function convert24HourMeridiem

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

function get12HourFrom24Hour

get12HourFrom24Hour: (hour: number) => number;

function get24HourFrom12Hour

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

function getDateBetween

getDateBetween: (dateRange: DateRange) => Date;

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

function getDateNextMonth

getDateNextMonth: (date: Date) => Date;

function getDateOnlyWithTime

getDateOnlyWithTime: (date: Date) => Date;

function getDatePreviousMonth

getDatePreviousMonth: (date: Date) => Date;

function getDateTime

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

function getIsPmFrom24Hour

getIsPmFrom24Hour: (hour: number) => boolean;

function getTimeInRange

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

function hasMonthChanged

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

function hasTimeChanged

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

function isDateValid

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

function isDayInRange

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

function isDayRangeInRange

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

function isEqual

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

function isMonthInRange

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

function isSameMonth

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

function isSameTime

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

function isTimeEqualOrGreaterThan

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

function isTimeEqualOrSmallerThan

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

function isTimeInRange

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

function isTimeSameOrAfter

isTimeSameOrAfter: (date: Date, dateToCompare: Date) => boolean;

Returns true if the time part of date is later than or equal to the time part of dateToCompare. The day, month, and year parts will not be compared.

function isToday

isToday: (date: Date) => boolean;

namespace Errors

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

variable DATEINPUT_INVALID_DEFAULT_TIMEZONE

const DATEINPUT_INVALID_DEFAULT_TIMEZONE: string;

variable DATEINPUT_INVALID_TIMEZONE

const DATEINPUT_INVALID_TIMEZONE: string;

variable DATEPICKER_DEFAULT_VALUE_INVALID

const DATEPICKER_DEFAULT_VALUE_INVALID: string;

variable DATEPICKER_INITIAL_MONTH_INVALID

const DATEPICKER_INITIAL_MONTH_INVALID: string;

variable DATEPICKER_MAX_DATE_INVALID

const DATEPICKER_MAX_DATE_INVALID: string;

variable DATEPICKER_VALUE_INVALID

const DATEPICKER_VALUE_INVALID: string;

variable DATERANGEINPUT_NULL_VALUE

const DATERANGEINPUT_NULL_VALUE: string;

variable DATERANGEPICKER_DEFAULT_VALUE_INVALID

const DATERANGEPICKER_DEFAULT_VALUE_INVALID: string;

variable DATERANGEPICKER_INITIAL_MONTH_INVALID

const DATERANGEPICKER_INITIAL_MONTH_INVALID: string;

variable DATERANGEPICKER_MAX_DATE_INVALID

const DATERANGEPICKER_MAX_DATE_INVALID: string;

variable DATERANGEPICKER_PREFERRED_BOUNDARY_TO_MODIFY_INVALID

const DATERANGEPICKER_PREFERRED_BOUNDARY_TO_MODIFY_INVALID: string;

variable DATERANGEPICKER_VALUE_INVALID

const DATERANGEPICKER_VALUE_INVALID: string;

namespace TimezoneNameUtils

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

Augments a simple Timezone metadata object with long and short names formatted by date-fns-tz.

function getInitialTimezoneItems

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

function getTimezoneNames

getTimezoneNames: (
    tz: Timezone,
    date?: Date | number | undefined
) => TimezoneWithNames;

Augments a simple Timezone metadata object with long and short names formatted by date-fns-tz.

function getTimezoneShortName

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

function isValidTimezone

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

function mapTimezonesWithNames

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

namespace TimezoneUtils

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

HACKHACK: this method relies on parsing strings with the Date() constructor, which is discouraged by the MDN documentation and the Moment.js status page. If we continue to use this approach, we need to validate that input strings conform to the ISO 8601 format.
Parameter value
ISO string representation of a date
Parameter timezone
target timezone IANA code
See Also
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters
- https://momentjs.com/docs/#/-project-status/

variable UTC_TIME

const UTC_TIME: Timezone;

function convertDateToLocalEquivalentOfTimezoneTime

convertDateToLocalEquivalentOfTimezoneTime: (
    date: Date,
    newTimezone: string
) => Date;

Converts a date to match a new timezone selection. The date is the internal local time representation for the user, meaning if 8 AM local time is currently selected, and local time is Oslo and the user switches timezone to UTC, the new date should represent 9 AM in Oslo time.
Parameter date
the current existing date object
Parameter newTimezone
the new timezone that the date should be converted to represent
Returns
The date converted to match the new timezone

function convertLocalDateToTimezoneTime

convertLocalDateToTimezoneTime: (date: Date, newTimezone: string) => Date;

Converts a date in local timezone to represent better the passed through timezone representation for the user, meaning if 8 AM local time is currently the date, and local time is Oslo and the user has a default of UTC in selection, the new date should represent 7 AM.
Parameter date
the current existing date object
Parameter newTimezone
the new timezone that we need to update the date to represent
Returns
The date converted to match the new timezone

function getCurrentTimezone

getCurrentTimezone: () => string;

Gets the users current time zone, for example "Europe/Oslo". This is currently backed by the browser or computer's locale setting.

function getDateObjectFromIsoString

getDateObjectFromIsoString: {
    (value: string | undefined, timezone: string): Date | undefined;
    (value: string, timezone: string): Date;
};

HACKHACK: this method relies on parsing strings with the Date() constructor, which is discouraged by the MDN documentation and the Moment.js status page. If we continue to use this approach, we need to validate that input strings conform to the ISO 8601 format.
Parameter value
ISO string representation of a date
Parameter timezone
target timezone IANA code
See Also
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters
- https://momentjs.com/docs/#/-project-status/

function getIsoEquivalentWithUpdatedTimezone

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

Package Files (28)

Peer Dependencies (3)

@types/react
react
react-dom

Badge

To add a badge like this oneto 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>

Updated just now.
Package analyzed in 4415 ms.
Missing or incorrect documentation? Open an issue for this package.

@blueprintjs/datetime

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable DateInput

See Also

variable DatePickerUtils

variable TimePrecision

variable TimezoneDisplayFormat

Functions

function getTimezoneMetadata

Classes

class DatePicker

See Also

constructor

property defaultProps

property displayName

method componentDidUpdate

method render

method validateProps

class DatePickerShortcutMenu

property defaultProps

method render

class DateRangeInput

See Also

constructor

property defaultProps

property displayName

property endInputElement

property startInputElement

method componentDidUpdate

method render

method reset

method validateProps

class DateRangePicker

See Also

constructor

property defaultProps

property displayName

method componentDidUpdate

method render

method validateProps

class DateRangeSelectionStrategy

method getNextState

class MonthAndYear

constructor

method clone

method fromDate

method getFullDate

method getMonth

method getNextMonth

method getPreviousMonth

method getYear

method isAfter

method isBefore

method isSame

method isSameMonth

class TimePicker

See Also

constructor

property defaultProps

property displayName

method componentDidUpdate

method render

class TimezoneSelect

See Also

constructor

property defaultProps

property displayName

method componentDidUpdate

method render

Interfaces