Date Input

Overview

DateInput is the standard date field component used in forms, filters, and scheduling UI.

It composes:

Label
Popover
DateSelector
FieldError

Use DateInput when you want a normal field-style date picker with a trigger button and dropdown calendar.

Use DateSelector directly when you need a custom trigger or custom popover layout.

Basic Usage

<DateInput
  label="Start Date"
  value={startDate}
  onChange={setStartDate}
/>

With react-hook-form

<Controller
  control={control}
  name="startDate"
  render={({ field }) => (
    <DateInput
      label="Start Date"
      value={field.value}
      onChange={field.onChange}
      onBlur={field.onBlur}
      error={errors.startDate?.message}
    />
  )}
/>

This is the common pattern used in project forms.

Date Direction

Use direction to limit the selectable date range:

future
past
both

<DateInput
  value={startDate}
  onChange={setStartDate}
  direction="future"
/>

Important Date Parsing Behavior

DateInput accepts Date, timestamp-like values, and strings.

A YYYY-MM-DD string is parsed as a local calendar date rather than a UTC midnight value. This matters for forms and filters that store date-only values and should not shift because of timezone conversion.

Props

Prop	Type	Default	Description
`value`	`Date \| string \| number \| null`	—	Current date value.
`onChange`	`(date: Date) => void`	—	Required. Called when a date is selected.
`onBlur`	`() => void`	—	Blur handler, usually for form integration.
`disabled`	`boolean`	`false`	Disables interaction.
`isLoading`	`boolean`	`false`	Shows a loading skeleton inside the trigger.
`label`	`string`	—	Field label.
`formatString`	`string`	`'dd MMM yyyy'`	Display format for the selected date.
`className`	`string`	`''`	Additional trigger classes.
`placeholder`	`string`	`'Select Date'`	Placeholder text when no date is selected.
`icon`	`IconName`	`'CalendarDays'`	Trigger icon.
`size`	`'md' \| 'sm'`	`'md'`	Trigger size.
`error`	`string`	—	Inline field error text.
`direction`	`'future' \| 'past' \| 'both'`	`'both'`	Selectable date direction constraint.

Brand Dashboard Usage

Pattern	Path	Notes
Project date fields	`fsai/apps/brand-dashboard/src/pages/Projects/components/CreateProjectModal.tsx`	Standard `Controller`-driven field usage.
Analytics or tracking filters	`fsai/apps/brand-dashboard/src/pages/LinkTracking/components/LinkTrackingPanel.tsx`	Date-range filtering UI.
Due date selection	`fsai/apps/brand-dashboard/src/pages/Learning/components/DueDatePicker.tsx`	Date field paired with `TimeSelect`.
Shared table filters	`fsai/packages/shared-ui/src/components/DataTable/toolbar/Filters.tsx`	Stores date-only values for filtering.

Guidelines

Do use DateInput for ordinary date fields in forms and filters
Do use Controller in react-hook-form
Do use DateSelector directly only when you need custom trigger or popover composition
Don't treat DateInput like a native text input; its ref points to the popover button trigger

Date Input

On this page