Choose between floating and inline positioning modes to fit your UI requirements. Floating mode (default) shows a popup calendar, while inline mode embeds it directly in the page.

Floating Mode (Default)

Calendar appears as a popup below the input

Live Demo

Click the input to open the floating calendar popup

Code Examples
HTML 
 
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Forms - Standard date input in forms
    •  
  • Filters - Date range filters in toolbars
    •  
  • Space-efficient - Calendar only visible when needed
 
Key Features
 
  • positioning-mode="floating" - Default mode (can be omitted)
    •  
  • Uses Floating UI for smart positioning
    •  
  • Automatically flips if not enough space
 
Calendar Placement
 
Control where the floating calendar appears
 
Live Demo
  
Click to see calendar open above the input
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Available Placements
 
  • bottom - Below, centered
    •  
  • bottom-start - Below, left-aligned (default)
    •  
  • bottom-end - Below, right-aligned
    •  
  • top - Above, centered
    •  
  • top-start - Above, left-aligned
    •  
  • top-end - Above, right-aligned
    •  
  • left - To the left
    •  
  • right - To the right
 
Smart Positioning
 
Uses Floating UI for automatic flipping and shifting when there's not enough space in the viewport.
 
Key Options
 
  • calendar-placement - Preferred placement (will flip if needed)
 
Inline Mode
 
Calendar always visible in the page flow
 
Live Demo
  
Calendar is always visible
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Dashboards - Persistent calendar widget
    •  
  • Booking interfaces - Always-visible availability calendar
    •  
  • Date browsing - When calendar is primary UI element
 
Key Option
 
  • positioning-mode="inline" - Embeds calendar in page