@elementmints/date

Zero-dependency date picker with range selection, swipe navigation, dual-month booking, time picking, and more.

Slide animation Split native input Dual-month range Quick presets Time picker Week & month modes Inline calendar Mobile sheet Portal mode Calendar only Custom header Clear button

Split Native Input

Three separate fields for day, month, and year with clear placeholders. Supports single D and M formats. Auto-advances on segment completion.

Native mode Split fields Auto-advance

Segmented Single-Date

Guided segment editing with Tab/Arrow navigation. Calendar popup with slide animation on month change.

Segmented Keyboard Slide animation

Dual-Month Hotel Booking

Two months side by side for booking flows. Min 2 nights, max 14 nights. Quick preset buttons for Tonight, This Weekend, Next 7 Days. Blocked check-in on Sundays. Calendar-only mode prevents manual typing.

Dual month Min/max nights Presets Blocked days Calendar only

Range Selection (Calendar Only)

Range selection where input is read-only. Users must select dates from the calendar popup. Includes clear button.

Range mode Calendar only Clear button

Week Picker (Calendar Only)

Click any day to select the whole week. Calendar-only mode ensures selection is from the calendar. Row highlights on hover.

Week mode Calendar only Row highlight

Month Picker (Calendar Only)

Opens directly to the month selection grid. Calendar-only mode prevents manual entry.

Month mode Calendar only

Inline Calendar

Calendar renders inline (not as a popup). Great for embedding in settings panels, dashboards, or sidebars.

Inline mode Always visible

Date + Time Picker

Combined date and time selection. Supports 12-hour and 24-hour formats with hour/minute inputs.

Time picker 12h / 24h

Disabled Dates + Validation

Disable weekends via recurring rules. If you manually type a disabled date, an error is shown. Calendar-only mode recommended for strict enforcement.

Disabled rules Input validation Calendar only

Portal Mode

Calendar is appended to document.body as a portal, avoiding overflow clipping from parent containers. Position auto-adjusts to viewport.

Portal Auto-position

Hidden Calendar Icon

Use data-hide-calendar-icon to remove the calendar toggle button. Users can still open the calendar by focusing the input or use it as input-only.

No icon Native mode

Calendar Only (Single Date)

Force users to pick a date only through the calendar popup. The input is read-only. Great for strict date selection workflows.

Calendar only Single date Clear + Today

Custom Calendar Header

Add custom HTML content above the calendar navigation. Useful for instructions, branding, or context-specific messages.

Custom header

Analytics & Touch Navigation

Emits analytics events for every interaction. Swipe left/right on touch devices to navigate months with slide animation.

Analytics Touch swipe Event log