Last modified: August 22, 2025
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>
  );
}
PropTypeDescription
nameStringThe input’s unique identifier.
labelStringThe text that displays above the input.
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).
defaultValueObjectThe default date value. Uses the same format as the value field.
requiredBooleanWhen set to true, displays a required field indicator.
tooltipStringThe text that displays in a tooltip next to the label.
readOnlyBooleanWhen set to true, the checkbox cannot be selected.
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.
validationMessageStringThe text to display if the input has an error.
minObjectSets the earliest valid date available using the following format:{ year: number;``month: number;``date: number }
maxObjectA Sets the latest 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.
maxValidationMessageStringSets the message that users will see when the hover over dates after the max date.
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
clearButtonLabelStringSets the label of the button that clears the date.
todayButtonLabelStringSets the label of the button that inserts today’s date.
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.
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.
onBlur(value: DateInputEventsPayload) => voidA function that is called and passes the value when the field loses focus.
onFocus(value: DateInputEventsPayload) => voidA function that is called and passed the value when the field gets focused.