DatePicker

Stable

A date field people can type into or fill from a calendar popover.

Use DatePicker for a single date in a form. People can type the date in their locale’s order (for example 31/01/2026 in the UK), or open the calendar with the button or Alt+↓. Typed input is validated on blur and Enter. Inside a form, name submits the value as ISO yyyy-mm-dd.

Source Edit docs Report an issue

Overview

Go-live date

Signatures update at 00:00 on this day.

tsx

import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Basic() {
  return (
    <FormField
      label="Go-live date"
      description="Signatures update at 00:00 on this day."
      style={{ width: 280 }}
    >
      <DatePicker locale="en-GB" today={TODAY} name="goLive" />
    </FormField>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Go-live date

Signatures update at 00:00 on this day.

Light

Go-live date

Signatures update at 00:00 on this day.

Dark

Go-live date

Signatures update at 00:00 on this day.

High contrast

Import

tsx

import { DatePicker } from '@bindshq/stance-react';

Platforms

DatePicker has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { DatePicker } from '@bindshq/stance-react';

Examples

With constraints

Weekdays from today onwards.

Roll-out date

tsx

import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function WithConstraints() {
  return (
    <FormField label="Roll-out date" style={{ width: 280 }}>
      <DatePicker
        locale="en-GB"
        today={TODAY}
        min={TODAY}
        isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}
      />
    </FormField>
  );
}

Controlled

Contract renewal

Tue Dec 01 2026

tsx

import { useState } from 'react';
import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Controlled() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 11, 1));
  return (
    <div style={{ display: 'grid', gap: 8, width: 280 }}>
      <FormField label="Contract renewal">
        <DatePicker locale="en-GB" today={TODAY} value={date} onValueChange={setDate} />
      </FormField>
      <p style={{ margin: 0, fontSize: 13 }}>{date ? date.toDateString() : 'No date chosen'}</p>
    </div>
  );
}

Sizes and states

Invalid

Choose a date after today

tsx

import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: 280 }}>
      <DatePicker aria-label="Small" size="sm" locale="en-GB" today={TODAY} />
      <DatePicker aria-label="Large" size="lg" locale="en-GB" today={TODAY} defaultValue={TODAY} />
      <FormField label="Invalid" error="Choose a date after today">
        <DatePicker locale="en-GB" today={TODAY} defaultValue={new Date(2026, 9, 1)} />
      </FormField>
      <DatePicker aria-label="Disabled" disabled locale="en-GB" today={TODAY} />
    </div>
  );
}

API reference

Prop	Type	Default	Description
`value / defaultValue`	`Date \| null`	None	Selected date.
`onValueChange`	`(value: Date \| null) => void`	None	Called with the new date, or null when cleared.
`name`	`string`	None	Submits the ISO date in a hidden input.
`min / max`	`Date \| null`	None	Selectable window; typed dates outside it are invalid.
`isDateDisabled`	`(date: Date) => boolean`	None	Unavailable dates.
`locale`	`string`	None	Controls parsing order, display and calendar names.
`weekStartsOn`	`0 to 6`	`1`	First day of the week in the calendar.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height.
`clearable`	`boolean`	`true`	Show a clear button when a date is set.
`invalid`	`boolean`	None	Marks the field invalid (set automatically inside an erroring FormField).
`placeholder`	`string`	`locale pattern, e.g. dd/mm/yyyy`	Placeholder text.
`labels`	`Partial<DatePickerLabels>`	None	openCalendar, clear, calendar.
`disabled / readOnly / required`	`boolean`	None	Native field states, also inherited from FormField.

Accessibility

The text input gets its label, description and error from FormField.
The calendar button is labelled “Choose date” and reports aria-expanded; the popover is a labelled dialog.
Opening moves focus to the selected (or today’s) day; choosing a date closes the popover and returns focus to the button.
Unparseable or out-of-range typed input sets aria-invalid instead of silently discarding what was typed.

Keyboard

Keys	Action
`Alt + ↓`	Open the calendar from the text field.
`Enter`	Commit typed text.
`Esc`	Close the calendar.
`Arrows` `Page Up/Down`	Navigate days in the calendar (see Calendar).

Usage guidelines

Do

Show the expected format in the description when typing is likely.
Use min/max rather than validating after submit.

Don’t

Use for date ranges; use DateRangePicker.

Components Forms

DatePicker

Stable

A date field people can type into or fill from a calendar popover.

Source Edit docs Report an issue

Overview

Go-live date

Signatures update at 00:00 on this day.

tsx

import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Basic() {
  return (
    <FormField
      label="Go-live date"
      description="Signatures update at 00:00 on this day."
      style={{ width: 280 }}
    >
      <DatePicker locale="en-GB" today={TODAY} name="goLive" />
    </FormField>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Go-live date

Signatures update at 00:00 on this day.

Light

Go-live date

Signatures update at 00:00 on this day.

Dark

Go-live date

Signatures update at 00:00 on this day.

High contrast

Import

tsx

import { DatePicker } from '@bindshq/stance-react';

Platforms

DatePicker has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { DatePicker } from '@bindshq/stance-react';

Examples

With constraints

Weekdays from today onwards.

Roll-out date

tsx

import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function WithConstraints() {
  return (
    <FormField label="Roll-out date" style={{ width: 280 }}>
      <DatePicker
        locale="en-GB"
        today={TODAY}
        min={TODAY}
        isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}
      />
    </FormField>
  );
}

Controlled

Contract renewal

Tue Dec 01 2026

tsx

import { useState } from 'react';
import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Controlled() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 11, 1));
  return (
    <div style={{ display: 'grid', gap: 8, width: 280 }}>
      <FormField label="Contract renewal">
        <DatePicker locale="en-GB" today={TODAY} value={date} onValueChange={setDate} />
      </FormField>
      <p style={{ margin: 0, fontSize: 13 }}>{date ? date.toDateString() : 'No date chosen'}</p>
    </div>
  );
}

Sizes and states

Invalid

Choose a date after today

tsx

import { DatePicker, FormField } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Sizes() {
  return (
    <div style={{ display: 'grid', gap: 12, width: 280 }}>
      <DatePicker aria-label="Small" size="sm" locale="en-GB" today={TODAY} />
      <DatePicker aria-label="Large" size="lg" locale="en-GB" today={TODAY} defaultValue={TODAY} />
      <FormField label="Invalid" error="Choose a date after today">
        <DatePicker locale="en-GB" today={TODAY} defaultValue={new Date(2026, 9, 1)} />
      </FormField>
      <DatePicker aria-label="Disabled" disabled locale="en-GB" today={TODAY} />
    </div>
  );
}

API reference

Prop	Type	Default	Description
`value / defaultValue`	`Date \| null`	None	Selected date.
`onValueChange`	`(value: Date \| null) => void`	None	Called with the new date, or null when cleared.
`name`	`string`	None	Submits the ISO date in a hidden input.
`min / max`	`Date \| null`	None	Selectable window; typed dates outside it are invalid.
`isDateDisabled`	`(date: Date) => boolean`	None	Unavailable dates.
`locale`	`string`	None	Controls parsing order, display and calendar names.
`weekStartsOn`	`0 to 6`	`1`	First day of the week in the calendar.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height.
`clearable`	`boolean`	`true`	Show a clear button when a date is set.
`invalid`	`boolean`	None	Marks the field invalid (set automatically inside an erroring FormField).
`placeholder`	`string`	`locale pattern, e.g. dd/mm/yyyy`	Placeholder text.
`labels`	`Partial<DatePickerLabels>`	None	openCalendar, clear, calendar.
`disabled / readOnly / required`	`boolean`	None	Native field states, also inherited from FormField.

Accessibility

The text input gets its label, description and error from FormField.
The calendar button is labelled “Choose date” and reports aria-expanded; the popover is a labelled dialog.
Opening moves focus to the selected (or today’s) day; choosing a date closes the popover and returns focus to the button.
Unparseable or out-of-range typed input sets aria-invalid instead of silently discarding what was typed.

Keyboard

Keys	Action
`Alt + ↓`	Open the calendar from the text field.
`Enter`	Commit typed text.
`Esc`	Close the calendar.
`Arrows` `Page Up/Down`	Navigate days in the calendar (see Calendar).

Overview

Light, dark and high contrast

Import

Platforms

Examples

With constraints

Controlled

Sizes and states

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

With constraints

Controlled

Sizes and states

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related