WebFolks Date Picker for React

One input, one date — with the month and the year a tap away. Desktop popover, fullscreen mobile sheet, keyboard and screen-reader friendly, zero dependencies.

GitHub Date Range Picker (sibling)WebFolks.io

npm install github:mikhailvol/webfolks-date-picker-react

Resize the window below 768px (or open on a phone) to see the fullscreen mobile experience.

Playground

Configure it live

Every control maps to a prop. The picker below and the generated code update as you change them.

value: null

<DatePicker
  placeholder="Select date"
/>

Examples

Default

Month, day and year. Tap the month or the year in the header to jump straight there; arrows step one month at a time. Selectable window: 30 years back, 10 ahead.

<DatePicker value={date} onChange={setDate} placeholder="Select date" />

value: null

Month and day only

mode="month-day" drops the year: a birthday, an anniversary, a yearly renewal. The value is a { month, day } pair (month 1–12), February 29 included, and the grid has no weekdays because they change every year.

<DatePicker mode="month-day" value={value} onChange={setValue} />

value: { month: 2, day: 29 }

Date of birth

yearsPast opens a century, disableFuture stops at today. The year pane scrolls to the current year; keyboard users can PageUp/PageDown by month and Shift+PageUp/PageDown by year.

<DatePicker yearsPast={100} disableFuture format="d MMMM yyyy" />

value: null

Upcoming dates only

disablePast greys out everything before today, including whole months and years in the panes, and the prev arrow stops at the first month of the window.

<DatePicker disablePast yearsFuture={2} />

value: null

Primary color

primaryColor styles the selected day, active toggles, and the buttons — including the popover, which renders in a portal on <body>. Hover and tint colors are derived from it automatically.

<DatePicker primaryColor="#0f766e" />

value: 2026-09-25

Locale and week start

Month, weekday and pane labels come from Intl. weekStartsOn={0} starts the week on Sunday. Every UI string is overridable.

<DatePicker locale="uk" format="d MMMM yyyy"
  strings={{ selectDate: "Оберіть дату", today: "Сьогодні", clear: "Очистити" }} />
<DatePicker locale="ja" weekStartsOn={0} format="yyyy/MM/dd" />

uk: null · ja: null

Plain HTML form, validation, ref

name adds a hidden yyyy-mm-dd input, so a normal <form> submit just works. required shows the built-in message when the picker closes empty; error shows yours. The ref exposes open(), close(), clear(), focus(), getValue().

<DatePicker ref={ref} name="start_date" required error={error} />
ref.current?.clear()

CSS variables

Prefer CSS? Every color and radius is a --wf-sdp-* variable, with --wf-dp-* fallbacks so a theme written for the WebFolks Date Range Picker applies here too. Scope it on :root, or pass the class to both the field and the popover.

.themed { --wf-sdp-primary: #0f766e; --wf-sdp-radius-input: 0; --wf-sdp-radius-popover: 0; }

<DatePicker className="themed" classNames={{ popover: "themed" }} />

value: null

Reference

Props

The full list, with defaults. Everything is optional.

Prop	Default	What it does
`mode`	`"date"`	"date" — month, day, year (value: Date \| null). "month-day" — no year (value: { month, day } \| null).
`valuedefaultValueonChange`	`—`	Controlled or uncontrolled value. onChange fires on pick (desktop), on the CTA (mobile), and on clear.
`primaryColor`	`—`	Any CSS color. Applied to the field and the portaled popover; hover and tint colors are derived from it.
`yearsPastyearsFuture`	`30 / 10`	Whole calendar years around today that are selectable and listed in the year pane (date mode).
`minDatemaxDate`	`—`	Exact bounds; override the year window (date mode).
`disablePastdisableFuture`	`false`	Clamp the window to today. Whole months and years outside it are disabled in the panes.
`format`	`"MMM d, yyyy" · "MMMM d"`	Display pattern: yyyy, yy, MMMM, MMM, MM, M, dd, d, EEEE, EEE.
`locale`	`"en"`	BCP-47 tag for month and weekday names.
`weekStartsOn`	`1`	1 = Monday, 0 = Sunday.
`compact`	`false`	Tighter spacing: slimmer input, smaller desktop popover (about 25% less tall). Mobile keeps full-size touch targets.
`showFooter`	`true`	The whole footer (summary, Today, Clear). Off, the desktop popover ends after the day grid; the mobile sheet keeps its confirm CTA.
`showFooterDate`	`true`	Selected date (or the prompt) in the calendar footer. Off, together with showToday / showClear, removes the desktop footer entirely.
`showTodayshowClear`	`true`	Footer shortcuts. Today is hidden automatically when today is out of bounds.
`aligndrop`	`"center" / "down"`	Desktop popover placement; drop "auto" flips up when there is no room below.
`requirederror`	`false / —`	required validates on close; error shows a message from your form library (string) or the default (true).
`strings`	`—`	Override any UI text (selectDate, today, clear, close, chooseMonth, chooseYear, …).
`name`	`—`	Hidden input for plain forms: yyyy-mm-dd in date mode, mm-dd in month-day mode.
`placeholderdisabledidclassNameclassNamesstyle`	`—`	Standard field props. classNames targets root, input, error, popover, cta.
`onOpenChangeonBlur`	`—`	Open-state and blur callbacks.
`ref`	`—`	open(), close(), clear(), focus(), getValue().