yew-date-range

Components

Component	Description
DateRangePicker	Full picker with predefined range sidebar and multi-month calendar
DateRange	Standalone range calendar without sidebar
DatePicker	Versatile picker with single, range, and multiple selection modes
Calendar	Base calendar with drill-down (Days → Months → Years)
TimePicker	Time spinner with 12h/24h format and seconds support
Overlay	Popup overlay with outside-click and Escape-key dismissal
DefinedRange	Sidebar with predefined ranges (Today, This Week, etc.)

Features

• Single date, date range, and multiple date selection
• Inline and popup display modes with click/focus triggers
• Predefined range sidebar (Today, Yesterday, This Week, etc.)
• 12-hour and 24-hour time picker with AM/PM toggle
• Min/max date constraints, disabled dates, disabled weekdays, disabled ranges
• Min/max span constraints for range selection
• Drill-down calendar navigation (Days → Months → Years)
• Custom date format patterns (yyyy-MM-dd, dd/MM/yyyy, etc.)
• Week numbers, custom locale, custom colors
• ARIA labels on all interactive elements
• Automatic CSS injection — no manual stylesheet setup
• 100% safe Rust — no unsafe, no unwrap, no expect

Installation

Add to your Cargo.toml:

[dependencies]
yew-date-range = "0.1"

For the headless core only:

[dependencies]
yew-date-range-core = "0.1"

Internationalization (i18n)

Every visible string in the picker is driven by CalendarLocale. Pass a locale prop to any component to translate the entire UI.

Option 1 — Browser Intl API: Use LocaleHelper::for_locale("fr") or CalendarLocale::from_bcp47("de") to auto-resolve month and day names from the browser's native Intl.DateTimeFormat.

Option 2 — Manual override: Override any field on CalendarLocale using struct update syntax.

// Auto-resolve French month/day names via Intl
let locale = LocaleHelper::for_locale("fr");

// Or override specific labels manually
let locale = CalendarLocale {
    today_label: "Custom Today".into(),
    clear_label: "Custom Clear".into(),
    ..CalendarLocale::from_bcp47("de")
};

html! { <DateRangePicker locale={locale} ... /> }

All keys follow the yew_date_range.* namespace:

Namespace	Keys
yew_date_range.nav.*	prev_month_label, next_month_label, prev_year_label, next_year_label, prev_decade_label, next_decade_label, select_month_label, select_year_label
yew_date_range.display.*	start_date_placeholder, end_date_placeholder
yew_date_range.action.*	today_label, clear_label
yew_date_range.input.*	select_date_placeholder, select_range_placeholder, select_dates_placeholder
yew_date_range.time.*	increment_hour_label, decrement_hour_label, increment_minute_label, decrement_minute_label, increment_second_label, decrement_second_label, toggle_period_label
yew_date_range.range.*	today_range_label, yesterday_range_label, this_week_label, last_week_label, this_month_label, last_month_label
yew_date_range.select.*	select_prefix
yew_date_range.week.*	week_number_header

Custom Styles

The library auto-injects default CSS via StyleInjector. No manual stylesheet setup is required. To customize, override specific .rdr* classes in your own stylesheet.

Theme overrides:

/* Override the primary accent color */
.rdrStartEdge, .rdrEndEdge { background: #10b981; }
.rdrStaticRangeSelected { color: #10b981; }
.rdrDayTodayDot { background: #10b981; }

Programmatic injection: Use StyleInjector::inject_custom_css(css, id) to inject additional CSS at runtime without duplicates.

Dark mode: See the Tailwind example's dark-overrides.css for a complete dark theme that overrides all .rdr* classes under html.dark.

Key CSS classes:

Class	Element
.rdrCalendarWrapper	Calendar container
.rdrDateRangePickerWrapper	Full picker container
.rdrDefinedRangesWrapper	Sidebar container
.rdrMonth	Single month grid
.rdrDay	Day cell button
.rdrDayToday	Today marker
.rdrDaySelected	Selected day
.rdrStartEdge / .rdrEndEdge	Range edges
.rdrInRange	Range body highlight
.rdrOverlay	Popup overlay
.rdrTimePicker	Time picker container
.rdrDatePickerInput	Popup input field

Resources

GitHub Repository → crates.io →