The auto-close attribute controls when the calendar automatically closes. Combined with button visibility options, you can create various interaction patterns.

AC01 Auto-Close on Selection (Default)

Calendar closes immediately when selection is complete

Live Demo

Select two dates - calendar closes automatically

Code Examples
HTML 
 
 
JavaScript 
 
 
 
Details
 
Behavior
 
  • Calendar closes when selection completes (both dates selected)
    •  
  • Input value updates immediately
    •  
  • Events fire immediately
 
Use Cases
 
  • Quick selection - Minimal user interaction
    •  
  • Mobile-friendly - Less screen time
    •  
  • Simple forms - One-step date selection
 
Key Option
 
  • auto-close="selection" - Default value
 
AC02 Auto-Close on Apply Only
 
Selection is deferred until Apply button is clicked
 
Live Demo
  
Select dates, then click Apply to confirm
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Behavior
 
  • Calendar shows Apply button automatically
    •  
  • Selection is visual only until Apply is clicked
    •  
  • Input value updates on Apply
    •  
  • Events fire on Apply
    •  
  • Closing without Apply reverts selection
 
Use Cases
 
  • Review before commit - User can verify selection
    •  
  • Complex workflows - Allow adjustments
    •  
  • Prevent accidents - Explicit confirmation
 
Key Option
 
  • auto-close="apply" - Defers selection to Apply
 
AC03 Never Auto-Close
 
Calendar stays open, selection commits immediately
 
Live Demo
  
Calendar stays open - click Apply or outside to close
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Behavior
 
  • Calendar never closes automatically on selection
    •  
  • Selection commits immediately to input
    •  
  • Apply button closes the calendar (optional)
    •  
  • Click outside also closes
 
Use Cases
 
  • Multiple adjustments - User can refine selection
    •  
  • Exploration - Browse dates freely
    •  
  • Dashboard widgets - Persistent calendar
 
Key Options
 
  • auto-close="never" - Prevents auto-close
    •  
  • show-apply-button="true" - Provides explicit close
 
AC04 Button & Summary Visibility Control
 
Customize which buttons and the days/nights summary appear in the calendar footer
 
Live Demo
 
 
 
 
 
 
 
 
 
Code Examples
 
HTML 
 
 
 
Details
 
Button Options
 
  • show-today-button - Jump to today (default: true)
    •  
  • show-clear-button - Clear selection (default: true)
    •  
  • show-apply-button - Confirm/close (default: true for range/multiple)
    •  
  • show-summary v1.12 -
							Days/nights summary line in range mode (default: true). Set to false to remove the line entirely (no empty-div height jump).
 
Common Patterns
 
Patternauto-closeButtons
Quick selectselectionNone or Today only
Confirm flowapplyApply required
ExplorationneverAll buttons
 
Notes
 
With auto-close="apply", the Apply button is always shown
						regardless of show-apply-button setting.
 
AC05 Custom Preset Buttons
 
Programmatically set dates with custom action buttons
 
Code Example
 
Custom Preset 
 
 
 
Best Practices
 
Required Steps
 
  1. Assign el.selectedRanges = [{ start, end }] on
							the web component element. The reactive setter merges the new range
							into picker state and triggers a re-render — no manual renderCalendar() or focus-reset needed.
    2.  
  2. Use el.selectedDate = date for single mode and el.selectedDates = [dates] for multiple mode.
 
When to reach for internals
 
The lower-level picker.selectedStartDate / picker.selectedEndDate fields plus picker.renderCalendar() / picker.updateSummary() still exist on the core class. Use them only when you specifically need to
						bypass the setter's validation (e.g. setting a transient preview range that
						won't pass beforeDateSelectCallback). For ordinary preset
						buttons, the public selectedRanges setter is the right tool.
 
Details
 
Action Button Properties
 
  • action: 'custom' - Custom onClick handler
    •  
  • text - Button label
    •  
  • onClick(picker) - Handler receives picker instance
 
Built-in Actions
 
  • action: 'today' - Jump to today
    •  
  • action: 'clear' - Clear selection
    •  
  • action: 'apply' - Apply and close
 
Tip
 
The Apply button will commit any selected dates to the input,
						even if they were set programmatically via custom buttons.
 
AC06 Mode Comparison
 
Quick reference for auto-close behavior
 
Behavior Matrix
 
ModeCloses on SelectionInput UpdatesEvents Fire
selectionYes (immediately)ImmediatelyImmediately
applyOn Apply clickOn ApplyOn Apply
neverManual onlyImmediatelyImmediately