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 Visibility Control
 
Customize which buttons 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: false)
 
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. Set selectedStartDate and selectedEndDate
    2.  
  2. Clear focusedDayIndex = null to remove old focus indicator
    3.  
  3. Call renderCalendar() to update display
    4.  
  4. Call updateSummary() to update the summary text
 
Why Clear focusedDayIndex?
 
If a user clicks a date before using a preset button, the focus indicator
						(dotted border) remains on that date. Setting focusedDayIndex = null clears this visual state so only the new range is highlighted.
 
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