Clawscale

Date picker

A DatePicker is an inline calendar for one day, with an optional time. To pick a date from a text field, use Date input.

Usage#

import { DatePicker } from "@clawscale/react/datetime";
<DatePicker defaultValue={new Date(2026, 7, 17)} onChange={(date) => setReleaseDate(date)} />

Examples#

Basic#

Pass value and onChange to control the selection. Clicking the selected day again clears it and calls onChange with null. Set canClearSelection={false} to prevent that.

Open dropdown
Open dropdown
SuMoTuWeThFrSa
Release cut: 2026-08-17
datetime/date-picker/basic.tsx
import { Tag } from "@clawscale/react";
import { DatePicker } from "@clawscale/react/datetime";
import { useState } from "react";

const pad = (n: number) => String(n).padStart(2, "0");
const isoDate = (date: Date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;

export default function DatePickerBasic() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 7, 17));
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "center" }}>
      <DatePicker value={date} onChange={setDate} />
      <Tag minimal>{date ? `Release cut: ${isoDate(date)}` : "No release date"}</Tag>
    </div>
  );
}

Shortcuts#

shortcuts adds a menu beside the calendar. true shows presets relative to today, such as Yesterday and 1 week ago. An array of { label, date } objects shows your own.

Open dropdown
Open dropdown
SuMoTuWeThFrSa
datetime/date-picker/shortcuts.tsx
import { DatePicker, type DatePickerShortcut } from "@clawscale/react/datetime";

const milestones: DatePickerShortcut[] = [
  { label: "Code freeze", date: new Date(2026, 7, 12) },
  { label: "Release cut", date: new Date(2026, 7, 17) },
  { label: "Canary at 10%", date: new Date(2026, 7, 19) },
  { label: "General availability", date: new Date(2026, 7, 24) },
];

export default function DatePickerShortcuts() {
  return <DatePicker shortcuts={milestones} defaultValue={new Date(2026, 7, 17)} />;
}

Minimum and maximum dates#

minDate and maxDate limit the days a user can pick. Days outside the range are disabled, and the month and year menus only list months inside it. The defaults are January 1st, 20 years ago, and 6 months from today.

Open dropdown
Open dropdown
SuMoTuWeThFrSa
datetime/date-picker/min-max.tsx
import { DatePicker } from "@clawscale/react/datetime";

// Backfills can only target days inside the 90-day retention window.
export default function DatePickerMinMax() {
  return (
    <DatePicker minDate={new Date(2026, 5, 3)} maxDate={new Date(2026, 7, 31)} defaultValue={new Date(2026, 7, 17)} />
  );
}

Time precision#

timePrecision adds a time picker under the calendar: minute, second or millisecond. Picking another day keeps the time. Configure the time picker with timePickerProps, for example { useAmPm: true }.

Open dropdown
Open dropdown
SuMoTuWeThFrSa
:
Deploy window opens 2026-08-17 02:30
datetime/date-picker/time-precision.tsx
import { Tag } from "@clawscale/react";
import { DatePicker } from "@clawscale/react/datetime";
import { useState } from "react";

const pad = (n: number) => String(n).padStart(2, "0");
const format = (date: Date) =>
  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;

export default function DatePickerTimePrecision() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 7, 17, 2, 30));
  return (
    <div style={{ display: "grid", gap: 12, justifyItems: "center" }}>
      <DatePicker timePrecision="minute" value={date} onChange={setDate} />
      <Tag minimal>{date ? `Deploy window opens ${format(date)}` : "No deploy window"}</Tag>
    </div>
  );
}

showActionsBar adds Today and Clear buttons under the calendar. Rename them with todayButtonText and clearButtonText. For other content, pass an element to footerElement.

Open dropdown
Open dropdown
SuMoTuWeThFrSa
datetime/date-picker/actions-bar.tsx
import { DatePicker } from "@clawscale/react/datetime";

export default function DatePickerActionsBar() {
  return <DatePicker showActionsBar clearButtonText="Unschedule" defaultValue={new Date(2026, 7, 17)} />;
}

Interactive playground#

Open dropdown
Open dropdown
SuMoTuWeThFrSa
Props
Open dropdown
View source on GitHub

Props interface#

interface DatePickerProps extends Omit<DatePickerBaseProps, "dayPickerProps" | "locale" | "modifiers">, DateFnsLocaleProps, ReactDayPickerSingleProps, Props@clawscale/react/datetime
PropsDescription
canClearSelection
boolean = true
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.
className
string
A space-delimited list of class names to pass along to a child element.
Inherited from Props
clearButtonText
string = "Clear"
Text for the reset button in the action bar.
dateFnsLocaleLoader
DateFnsLocaleLoader
Optional custom loader function for the date-fns Locale which will be used to localize the date picker. This is useful in test environments or in build systems where you wish to customize module loading behavior. If not provided, a default loader will be used which uses dynamic imports to load date-fns/locale/${localeCode} modules.
Inherited from DateFnsLocaleProps
dayPickerProps
Omit<DayPickerSingleProps, ReactDayPickerOmittedProps>
Props to pass to react-day-picker's single day picker. See API documentation here.
Inherited from ReactDayPickerSingleProps
defaultValue
Date
Initial day the calendar will display as selected. This should not be set if value is set.
footerElement
React.JSX.Element
An additional element to show below the date picker.
Inherited from DatePickerBaseProps
highlightCurrentDay
boolean = false
Whether the current day should be highlighted in the calendar.
Inherited from DatePickerBaseProps
initialMonth
Date
The initial month the calendar displays.
Inherited from DatePickerBaseProps
locale
Locale | string = "en-US"
date-fns Locale object or locale code string ((ISO 639-1 + optional country code) which will be used to localize the date picker.
Inherited from DateFnsLocaleProps
maxDate
Date = 6 months from now.
The latest date the user can select.
Inherited from DatePickerBaseProps
minDate
Date = Jan. 1st, 20 years in the past.
The earliest date the user can select.
Inherited from DatePickerBaseProps
onChange
(selectedDate: Date | null, 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.
onShortcutChange
(shortcut: DatePickerShortcut, index: number) => void
Called when the shortcuts props is enabled and the user changes the shortcut.
reverseMonthAndYearMenus
boolean = false
If true, the month menu will appear to the left of the year menu. Otherwise, the month menu will apear to the right of the year menu.
Inherited from DatePickerBaseProps
selectedShortcutIndex
number
The currently selected shortcut. If this prop is provided, the component acts in a controlled manner.
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.
showActionsBar
boolean = false
Whether the bottom bar displaying "Today" and "Clear" buttons should be shown.
timePickerProps
TimePickerProps
Further configure the TimePicker that appears beneath the calendar. onChange and value are ignored in favor of the corresponding top-level props on this component.
Inherited from DatePickerBaseProps
timePrecision
TimePrecision
The precision of time selection that accompanies the calendar. Passing a TimePrecision value (or providing timePickerProps) shows a TimePicker below the calendar. Time is preserved across date changes.
Inherited from DatePickerBaseProps
timezone
string
The currently selected timezone UTC identifier, e.g. "Pacific/Honolulu".
todayButtonText
string = "Today"
Text for the today button in the action bar.
value
Date | null
The currently selected day. If this prop is provided, the component acts in a controlled manner.