Date picker / calendar

In review

Live · web

Field + popover · single date

Due dateJun 18, 2026

Selected: Jun 18, 2026

Inline · min/max bounds · today marked

June 2026

MoTuWeThFrSaSu

123456789101112131415161718192021222324252627282930123456789101112

No past dates · selectable through Jun 30

Selected: Jun 15, 2026

Range · start → end with in-range tint

June 2026

MoTuWeThFrSaSu

123456789101112131415161718192021222324252627282930123456789101112

Click start, then end · click again to restart

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

Code

TypeScript

// 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} />
    </>
  );
}

Kotlin

// 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)
}

Swift

// 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

TypeScript

Prop	Type	Default	Description
label *	string	n/a	Persistent field label above the trigger (never placeholder-as-label).
value *	Date | null	n/a	Selected date (controlled). null renders the empty Pick a date prompt.
onChange *	(date: Date) => void	n/a	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	n/a	Inclusive earliest selectable day. Earlier days render disabled but legible.
max	Date	n/a	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 at 7cbf645 if that richer surface is revived.)

Kotlin

Parameter	Type	Default	Description
state *	DatePickerState	n/a	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.

Swift

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>	n/a	Two-way bound selected date. Binding<Date?> via the optional initializer for an empty state.
in	ClosedRange / PartialRangeFrom<Date>	n/a	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 in [adjudication 2026-07-02 · B7]): 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.