The date picker can display multiple months simultaneously in horizontal or grid layouts, making it easier to select date ranges and see more context at once.

Horizontal Layout

Display months side-by-side

Live Demo

Two months displayed horizontally for easy range selection

Code Examples
HTML 
 
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Date ranges - Easier to select ranges spanning multiple weeks
    •  
  • Hotel bookings - See check-in and check-out months together
    •  
  • Trip planning - Compare dates across two months
 
Behavior
 
Months are displayed side-by-side horizontally. Use Tab/Shift+Tab to switch focus
						between month columns for keyboard navigation.
 
Key Options
 
  • visible-months-count="2" - Number of months to show (1-12+)
    •  
  • month-layout="horizontal" - Horizontal arrangement (default)
 
Grid Layout
 
Display months in a grid pattern
 
Live Demo
  
6 months in a 2×3 grid for broader overview
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Quarter planning - See 3-6 months at once
    •  
  • Event calendars - Browse multiple months for available dates
    •  
  • Seasonal booking - View entire seasons in one view
 
Configuration
 
Grid layout requires specifying both rows and columns:
 
  • grid-rows - Number of rows (e.g., 2)
    •  
  • grid-columns - Number of columns (e.g., 3)
    •  
  • visible-months-count - Must equal grid-rows × grid-columns
 
Important: The visible-months-count must equal grid-rows × grid-columns.
						For example, a 2×3 grid requires visible-months-count="6" (2 rows × 3 columns = 6 months).
 
Common Grid Configurations
 
  • 2×2 grid: grid-rows="2" grid-columns="2" visible-months-count="4"
    •  
  • 2×3 grid: grid-rows="2" grid-columns="3" visible-months-count="6"
    •  
  • 3×4 grid: grid-rows="3" grid-columns="4" visible-months-count="12"
 
Best Practices
 
  • Use inline mode for grid layouts to keep them always visible
    •  
  • Ensure visible-months-count matches the grid dimensions
 
Three Month View
 
Perfect for quarterly planning
 
Live Demo
  
Three consecutive months for extended planning
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Quarterly reports - Select date ranges within a quarter
    •  
  • Extended trips - Plan vacations spanning multiple months
    •  
  • Project timelines - View project duration across months
 
Flexibility
 
You can show any number of months from 1 to 12 or more:
 
  • visible-months-count="1" - Single month (default for single mode)
    •  
  • visible-months-count="2" - Two months (default for range mode)
    •  
  • visible-months-count="3" - Three months
    •  
  • visible-months-count="12" - Full year view