Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

The DateInput component renders an input field where a user can select a date.
ui-extension-components-date-input
import { Flex, DateInput } from "@hubspot/ui-extensions";

function RemoteApp() {
  const [dateValue, setDateValue] = useState(null);

  return (
    <Flex direction="column">
      <DateInput
        label="Appointment Date Partially Controlled"
        name="date"
        onChange={value => {
          setDateValue(value);
        }}
        value={dateValue}
        format="ll"
      />

      <DateInput label="Appointment Date Uncontrolled" name="appointment-date" format="LL" />
    </Flex>
  );
}

​
Props

PropTypeDescription
clearButtonLabelStringSets the label of the button that clears the date.
defaultValueObjectThe default date value. Uses the same format as the value field.
descriptionStringText that describes the field’s purpose.
errorBooleanWhen set to true, validationMessage is displayed as an error message if provided. The input will also render its error state to let the user know there’s an error. If left false (default), validationMessage is displayed as a success message.
format'short' (default) | 'long' | 'medium' | 'standard' | 'YYYY-MM-DD' | L | LL | llThe date format.
  • short: 09/04/1986
  • long: September 4, 1986
  • medium: Sep 4, 1986
  • standard: 1986-09-04
  • YYYY-MM-DD: 1986-09-04
  • L: 09/04/1986
  • LL: September 4, 1986
  • ll: Sep 4, 1986
labelStringThe text that displays above the input.
maxObjectA Sets the latest valid date available using the following format:{ year: number;``month: number;``date: number }
maxValidationMessageStringSets the message that users will see when the hover over dates after the max date.
minObjectSets the earliest valid date available using the following format:{ year: number;``month: number;``date: number }
minValidationMessageStringSets the message that users will see when they hover over dates before the min date.
nameStringThe input’s unique identifier.
onBlur(value: DateInputEventsPayload) => voidA function that is called and passes the value when the field loses focus.
onChange(checked: boolean, value: string) => voidA callback function that is invoked when the value is committed. Currently, this occurs on onBlur of the input and when the user submits the form.
onFocus(value: DateInputEventsPayload) => voidA function that is called and passed the value when the field gets focused.
readOnlyBooleanWhen set to true, the checkbox cannot be selected.
requiredBooleanWhen set to true, displays a required field indicator.
timezone'userTz' (default) | 'portalTz'Sets the timezone that the component will user to calculate valid dates.
  • userTz (default): the user’s time zone.
  • portalTz: the portal’s default time zone.
todayButtonLabelStringSets the label of the button that inserts today’s date.
tooltipStringThe text that displays in a tooltip next to the label.
validationMessageStringThe text to display if the input has an error.
valueObjectThe value of the input. Must include the year, month, and day:
{ year: number; month: number; date: number }
  • year: the four-digit year (e.g., 2023).
  • month: starting at 0, the number of the month (e.g., 0 = January, 11 = December).
  • date: the number of the day (e.g., 1 = the first day of the month).
Last modified on March 30, 2026