maud-ui64 components

Date Picker

No selection (placeholder)

With selected date

Disabled

Custom format + range mode

Usage

use maud_ui::primitives::date_picker;

let html = date_picker::render(date_picker::Props {
    id: "start-date".into(),
    name: "start_date".into(),
    selected: Some((2026, 4, 15)),
    placeholder: "Pick a start date".into(),
    disabled: false,
    min_date: Some((2026, 1, 1)),
    max_date: None,
});

DatePicker

Date input with inline calendar dropdown, range selection support, and custom formatting.

Import

use maud_ui::primitives::date_picker::{self, Props, Mode};

Example

use maud::html;
use maud_ui::primitives::date_picker;

html! {
    (date_picker::render(date_picker::Props {
        id: "dp".to_string(),
        name: "date".to_string(),
        selected: Some((2026, 4, 20)),
        placeholder: "Pick a date".to_string(),
        mode: date_picker::Mode::Single,
        format: Some("yyyy-MM-dd".to_string()),
        ..Default::default()
    }))
}

Props

FieldTypeDefaultDescription
idString"date-picker"Unique identifier
nameString"date"Form field name
selectedOption<(u32, u32, u32)>NoneSelected date as (year, month, day); month is 1-based
placeholderString"Pick a date"Placeholder text
disabledboolfalseWhether the picker is disabled
min_dateOption<(u32, u32, u32)>NoneMinimum selectable date
max_dateOption<(u32, u32, u32)>NoneMaximum selectable date
modeModeMode::SingleSelection mode: Single or Range
formatOption<String>NoneDisplay format token (e.g., "yyyy-MM-dd"). Supports yyyy, MM, dd

Mode Enum

VariantDescription
SingleSingle-date selection (default)
RangeRange selection (start + end). Interaction is a TODO; markup emits data-mode="range" hint

Features

  • Format tokens: yyyy (4-digit year), MM (2-digit month), dd (2-digit day). Without format, displays long form ("April 20, 2026")
  • Hidden input: Stores ISO-formatted date (YYYY-MM-DD) in a hidden <input> for form submission
  • Inline calendar: Month/year navigation buttons, disabled date ranges via min/max
  • Day-of-week calculation: Uses Tomohiko Sakamoto's algorithm; no external date library needed
  • Leap year handling: Correct February counts for leap years

Accessibility

  • Trigger button has aria-expanded and aria-haspopup="dialog"
  • Calendar buttons labeled with aria-label for month navigation
  • Disabled dates rendered with disabled attribute and visually distinct

Related

  • Dialog
  • Input
  • Combobox

Shadcn reference

https://ui.shadcn.com/docs/components/date-picker

← Back to Gallery