Date picker / calendar

In review

Live · web

Field + popover · single date

Due date

Selected: Jun 18, 2026

Inline · min/max bounds · today marked

June 2026

MoTuWeThFrSaSu

No past dates · selectable through Jun 30

Selected: Jun 15, 2026

Range · start → end with in-range tint

June 2026

MoTuWeThFrSaSu

Click start, then end · click again to restart

Range: Jun 9, 2026 → Jun 13, 2026 · 5 days

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the intended API, not yet exported from @dizyx/nockerl-react (promotion tracked).
// Neither app ships a custom calendar, so the web demo is designed from the laws.)

export function ScheduleForm() {
  const [due, setDue] = useState<Date | null>(null);
  const [span, setSpan] = useState<{ start: Date | null; end: Date | null }>({ start: null, end: null });

  return (
    <>
      {/* Field + popover, single date, no past dates. */}
      <DatePicker label="Due date" value={due} onChange={setDue} min={new Date()} />

      {/* Always-open inline calendar. */}
      <DatePicker label="Run on" value={due} onChange={setDue} inline />

      {/* Range mode: two-endpoint range with in-range tint (absorbs the former DateRangePicker). */}
      <DatePicker range label="Window" value={span} onChange={setSpan} />
    </>
  );
}

// Android: Jetpack Compose, Material 3 (BOM 2026.02.01). The app has no custom
// calendar: tasks/domain/Task.kt stores `dueDate` as an ISO String and only
// FORMATS it (DateTimeFormatter "MMM d, yyyy h:mm a"). Use the stock picker,
// themed by NockerlTheme (cyan accent, 12dp control radius).
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.rememberDatePickerState

val state = rememberDatePickerState(
    initialSelectedDateMillis = task.dueDateMillis,
    selectableDates = NoPastDates,   // SelectableDates: gate min/max + per-day
)

DatePickerDialog(
    onDismissRequest = onDismiss,
    confirmButton = {
        NockerlButton("Set", onClick = { onPick(state.selectedDateMillis) })
    },
) {
    DatePicker(state = state, title = null)
}

// macOS: SwiftUI. Nockerl Voice has no custom calendar; it formats dates with
// `.dateTime` / `Calendar.current` (HistoryView, HomeSection). Use the stock
// graphical DatePicker, tinted to the brand cyan from NockerlTheme.
import SwiftUI

struct ScheduleForm: View {
    @State private var due = Date()

    var body: some View {
        DatePicker(
            "Due date",
            selection: $due,
            in: Date()...,                    // min bound; use a ClosedRange for min…max
            displayedComponents: .date
        )
        .datePickerStyle(.graphical)          // the month-grid calendar
        .tint(NockerlTheme.accent)            // cyan selection fill
    }
}

Parameters

Prop	Type	Default	Description
`label` *	`string`		Persistent field label above the trigger (never placeholder-as-label).
`value` *	`Date \| null`		Selected date (controlled). `null` renders the empty `Pick a date` prompt.
`onChange` *	`(date: Date) => void`		Fires when a day is picked (click, or `Enter`/`Space` on the focused day).
`inline`	`boolean`	`false`	When `true`, the calendar is always open (no field trigger / popover).
`min`	`Date`		Inclusive earliest selectable day. Earlier days render disabled but legible.
`max`	`Date`		Inclusive latest selectable day. Later days render disabled but legible.
`weekStartsOn`	`0 \| 1`	`1`	First column weekday: `1` = Monday (Nockerl default), `0` = Sunday.
`disabled`	`boolean`	`false`	Inert and clearly seen (never faded to invisible). The trigger is non-interactive.

Range mode (range) swaps value/onChange for value: { start: Date | null; end: Date | null } and a matching onChange; the two endpoints get the accent fill and the days between get the in-range tint. (The former standalone DateRangePicker was merged into this range mode; recover its preset-rail / dual-month demo from git history if that richer surface is revived.)

Parameter	Type	Default	Description
`state` *	`DatePickerState`		From `rememberDatePickerState(...)`. Holds `selectedDateMillis` + the displayed month.
`initialSelectedDateMillis`	`Long?`	`null`	Pre-selected day (UTC midnight millis). Passed to `rememberDatePickerState`.
`selectableDates`	`SelectableDates`	`all dates`	Gates min/max and per-day enablement (`isSelectableDate` / `isSelectableYear`).
`title`	`(@Composable -> Unit)?`	`default`	Header slot above the grid. Pass `null` to drop the supporting headline.
`headline`	`(@Composable -> Unit)?`	`default`	The large selected-date readout under the title.
`showModeToggle`	`Boolean`	`true`	Shows the calendar/text-input toggle in the header.
`colors`	`DatePickerColors`	`NockerlTheme`	Selection fill, today marker, and headers, bound to the cyan accent tokens.

SwiftUI exposes the calendar as the standard DatePicker with the .graphical style. State is the bound selection; bounds come from the in: range. There is no separate range component; model a range as two DatePickers.

Style	Type	Default	Description
`selection` *	`Binding<Date>`		Two-way bound selected date. `Binding<Date?>` via the optional initializer for an empty state.
`in`	`ClosedRange / PartialRangeFrom<Date>`		Selectable bounds, e.g. `Date()...` (no past) or `start...end` (min…max).
`displayedComponents`	`DatePickerComponents`	`.date`	Use `.date` for the calendar grid (omit `.hourAndMinute`, which is the time picker).
`.datePickerStyle`	`DatePickerStyle`	`.automatic`	Set to `.graphical` for the month-grid calendar shown here.
`.tint`	`Color`	`accentColor`	Selection-fill color. Set to `NockerlTheme.accent` (brand cyan).

Cross-platform drift (tracked for reconciliation)

No shipped custom calendar. Neither Android nor Voice draws its own month grid. Android stores dueDate as an ISO string and only formats it; Voice formats a chart axis. Kotlin/Swift above document the stock Material 3 / SwiftUI pickers; the web island is designed originally from the laws (recessed field-trigger, lifted calendar card, cyan selected fill, today ring, in-range tint).
Range: web ships range as a mode of DatePicker (the standalone DateRangePicker was merged in); SwiftUI has no range picker (model it as two DatePickers); Material 3 has DateRangePicker but the apps don’t use it yet.
Week start (resolved): weekStartsOn defaults to the device locale, with an explicit prop override. The Nockerl web demo (Monday-first) and the stock pickers converge on that shared default + prop.