I made a datepicker

I’ve been working on a new project and needed a React datepicker component which makes it super easy to select far-future dates by scrolling an infinite calendar, is quickly keyboard navigable via the up/down/left/right keys and also supports natural-language input like “tomorrow”, “next weds”, “+5d” and the like. Basically I wanted the datepicker from Things but with a few tweaks, as a React component.

After ten minutes looking online for the Things 3 Datepicker Clone I was certain must exist, I drew a blank and fired up Claude Code to build my own. Here it is…

How it works

You can install it with npm install @dannysmith/datepicker and then use it like this:

import { DatePicker } from '@dannysmith/datepicker';
import '@dannysmith/datepicker/styles.css';

function MyComponent() {
  const [date, setDate] = useState(new Date());

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      placeholder="When"
    />
  );
}

It takes the following props, all optional:

• value - The currently selected date. Defaults to today. Pass null for no selection.
• minDate - Minimum selectable date. Earlier dates are disabled.
• maxDate - Maximum selectable date. Later dates are disabled.
• placeholder - Placeholder text for the search input. Defaults to “When”.
• showClearButton - Show a clear button below the calendar to reset the date selection. Useful when using in a popover.
• onChange - Callback fired on any date change, including keyboard navigation. Receives null when cleared.
• onCommit - Callback fired only on explicit selection (click or Enter). Useful for popovers. Receives null when cleared.

I’ve done my best to make it somewhat resiliant and general purpose. It should respond reasonably to being used in various containers, most of the colours and theme setting can be configured via CSS variables, and I’ve made some attempt to make it work reasonably with screen readers and other assistive technology. That said, it was primarily built for use inside popovers in a Tauri desktop app, so I’m open to feedback on how to make it better when used on the web.