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.

PM01 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
 
PM02 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)
 
PM03 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
 
PM04 Modal Mode
 
Centered overlay with backdrop scrim — solves the small-screen overflow problem
 
Live Demo
   
Calendar centers in the viewport with a backdrop. Closes via Escape, backdrop click, or completing a selection.
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
CSS Variables 
 
 
 
Details
 
Use Cases
 
  • Mobile and small viewports - multi-month layouts that horizontally overflow in floating mode
    •  
  • Focus-demanding selection - when picking dates is the primary task on the screen
    •  
  • Complex configurations - 2×3 grids, 6-month layouts that need real estate
 
Closes On
 
  • Escape key
    •  
  • Backdrop (scrim) click
    •  
  • Apply button (range mode)
    •  
  • Completing a selection (when auto-close="selection", the default)
 
Behavior Details
 
  • Body scroll is locked while open
    •  
  • Input is blur()-ed on open (suppresses mobile soft keyboard) and re-focused on close
    •  
  • Per-month headers stick to the top of the scrolling months area; the action bar (Today/Clear/Apply) sticks to the bottom
    •  
  • closeOnScroll is a no-op in modal mode
    •  
  • Inner content collapses to fewer columns when the modal is narrow (see Responsive Behavior)
 
PM05 Auto-Engage on Small Viewports
 
Float on desktop, modal on mobile — flip automatically based on viewport size
 
Live Demo
  
Floating below 768px wide or 500px tall switches to modal. Resize the window in both dimensions to test.
 
Code Examples
 
HTML 
 
 
 
Details
 
Attributes
 
  • mobile-modal-breakpoint="768px" — viewport width threshold (accepts any CSS length: "640", "640px", "40em")
    •  
  • mobile-modal-min-height="500px" — viewport height threshold
 
If both are set they OR — modal engages when either matches; switches back to floating only when both are clear.
 
How It Works
 
  • A matchMedia listener flips the positioning-mode attribute between floating and modal as the viewport crosses the threshold.
    •  
  • Selection survives the transition because the input value persists across rebuild and the fresh init re-parses it.
    •  
  • Only auto-engages when the configured mode is floating. Pickers explicitly set to inline or modal are left alone.