@blueprintjs/datetime

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;

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;

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;

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;

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;

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;

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.

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.

index signature

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

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.

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.

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.

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.

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.

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.

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.

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

member HOUR_12

HOUR_12 = 'hour12'

member HOUR_24

HOUR_24 = 'hour24'

member MINUTE

MINUTE = 'minute'

member MS

MS = 'ms'

member SECOND

SECOND = 'second'

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;