Skip to main content
Browse docs

Marwes documentation

Date Picker

Calendar selection surface synced from the V2 Date Picker component, with device metadata, day-state contracts, and shared React/Vue adapters.

What this family solves

Calendar selection surface synced from the V2 Date Picker component, with device metadata, day-state contracts, and shared React/Vue adapters.

Use when

  • The UI needs a calendar panel for choosing a date or reviewing a date range.
  • The product already owns date math, month navigation state, and selected date state.
  • React and Vue consumers should receive the same day-state anatomy and data metadata.

Avoid when

  • The experience needs a complete form field/popover with parsing and validation baked in.
  • The component must own locale-aware calendar math or complex range-selection behavior.
  • The product needs time picking or multi-calendar comparison layouts.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

DatePickerField

Type

DatePickerFieldProps

Vue — @marwes-ui/vue

Component

DatePickerField

Type

DatePickerFieldProps

Svelte — @marwes-ui/svelte

Component

DatePickerField

Type

DatePickerFieldProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { DatePickerField } from "@marwes-ui/react"

export function Example() {
  return <DatePickerField label="Choose a date" />
}

Vue

<script setup lang="ts">
import { DatePickerField } from "@marwes-ui/vue"
</script>

<template>
  <DatePickerField label="Choose a date" />
</template>

Svelte

<script lang="ts">
  import { DatePickerField } from "@marwes-ui/svelte"
</script>

<DatePickerField label="Choose a date" />

Accessibility requirements

  • Distinguishable date states: Verify the selected date and today's date are both distinguishable without relying on color alone.
  • Keyboard date navigation: Verify keyboard arrow-key day navigation and month change announcements work without a pointer.
  • Connected field wiring: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: Keyboard interaction model review when product-level month navigation and range selection are wired.
  • Manual review 2: Visual review against the synced V2 Date Picker page for spacing and state fidelity.
  • Manual review 3: Locale/date-format review before use in production forms.

Theming

Date Picker uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources