Menu
v0.10.1

Components / primitive

DatePicker

Selects a date with a labelled native control.

Generated from @oods/foundry 0.10.1

Categories
primitive
Contexts
form
Readiness
proven-in-generated-apps

Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example date-picker-bounded : enter 2026-10-01, ISO value emitted.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real DatePicker, live
React
Vue

Events it emits: input, change, update. Use either render above, and each event shows here with the framework that sent it.

    Code

    The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

    import { DatePicker } from '@oods/components-react';
import '@oods/component-styles/css';

export function Example() {
  return (
    <DatePicker
      id="renewal"
      label="Renewal date"
      value="2026-09-30"
      min="2026-09-01"
      max="2026-12-31"
      step={1}
    />
  );
}

    Props, slots and events

    Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

    PropTypeRequiredDocumented example
    id string yes renewal
    label ReactNode yes Renewal date
    value string | number | readonly string[] | undefined no 2026-09-30
    defaultValue string | number | readonly string[] | undefined no
    min string | number | undefined no 2026-09-01
    max string | number | undefined no 2026-12-31
    step string | number | undefined no 1
    required boolean | undefined no
    disabled boolean | undefined no
    readOnly boolean | undefined no
    help ReactNode no
    validation FieldValidation | undefined no

    Slots

    label, help, validation

    Events

    input, change, update

    States

    empty, valued, disabled, readOnly, invalid

    Accessibility

    Role
    none
    How it gets its name
    label on input[type="date"]

    Keyboard

    KeyWhat it does
    TabMove focus to the named native control

    Obligations in the contract

    • Native date input semantics
    • ISO YYYY-MM-DD values
    • Label and descriptions are associated

    Composes canonical Input; no custom calendar claim.

    Tokens

    The token roles this component reads.

    • input.background
    • input.border
    • input.text
    • input.focus
    • field.message

    Readiness

    The evidence recorded for this component, with its label.

    proven-in-generated-apps: catalog_list gives this label when generated React and Vue apps in the runtime sweep that ships with this version both use the component. That sweep was measured on the published 0.4.1, not on this version.

    EvidenceReactVue
    stateimplemented-evidence-completeimplemented-evidence-complete
    versioned contractpassedpassed
    target implementationpassedpassed
    package exportpassedpassed
    public declarationpassedpassed
    dependency closurepassedpassed
    framework scenariopassedpassed
    accessibilityverifiedverified
    interactionverifiedverified
    visual themesverifiedverified

    Use your own

    You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

    The component_map call, with the parts in angle brackets yours to fill:

    {
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourDatePicker>",
  "oodsTraits": [
    "<trait names>"
  ],
  "substitution": {
    "component": "DatePicker",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourDatePicker>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourDatePicker>"
    }
  }
}

    How this page was made

    Generated at build from the published data, each source with the hash of what was read. The page's manifest.

    • Contract: @oods/component-contracts@0.10.1 componentContracts.DatePicker sha256:1a5330e410cc…
    • Documented example: @oods/component-contracts@0.10.1 sharedScenarios date-picker-bounded sha256:0a70e67058f9…
    • Catalog entry (catalog_list): generated/0.10.1/system/catalog.json DatePicker sha256:80a3fe4b4ab9…
    • React readiness: @oods/components-react@0.10.1 readiness DatePicker sha256:dbd909386ff2…
    • Vue readiness: @oods/components-vue@0.10.1 readiness DatePicker sha256:ba7f43cdf916…
    • Prop types: generated/0.10.1/components/prop-types.json DatePicker sha256:25a512d67fcb…