Skip to main content

Overview

HuxDatePicker provides a modern date selection experience with an overlay calendar, theme-aware styling, and flexible configuration options. HuxDatePicker Component

Basic Usage

Variants

With Text Label

Default behavior showing both icon and text.

Icon Only

Compact icon-only version for tight spaces.

Properties

  • initialDate - Initially selected date
  • firstDate - Earliest selectable date
  • lastDate - Latest selectable date
  • onDateChanged - Callback when date is selected
  • placeholder - Text shown when no date is selected
  • variant - Button visual style (HuxButtonVariant)
  • size - Button size (HuxButtonSize)
  • icon - Calendar icon (defaults to Icons.calendar_today)
  • primaryColor - Custom primary color override
  • overlayColor - Custom overlay background color
  • showText - Whether to show text label (default: true)

Date Range Validation

Set boundaries for selectable dates:

Custom Styling

Custom Colors

Custom Icon

Integration with Forms

Use HuxDatePicker in forms with validation:

Features

  • Overlay Calendar - Modern calendar interface that appears below the button
  • Smart Positioning - Automatically adjusts position to prevent screen overflow
  • Theme Aware - Seamlessly adapts to light and dark themes
  • Date Validation - Enforces date range constraints
  • Keyboard Navigation - Arrow keys and Enter/Space for calendar/header interactions
  • Tab Focus Cycling - Tab navigation stays within picker regions (calendar/header) while open
  • Bounded Month/Year Navigation - Month/year views and focus state are clamped to firstDate..lastDate
  • Flexible Styling - Multiple button variants and size options
  • Icon Only Mode - Compact display for space-constrained layouts
For more examples, see the full example app and Basic Usage guide.