What It Does

The beforeDateSelectCallback is called BEFORE a date selection is finalized, allowing you to:

• Validate: Check if selection meets business rules
• Block: Prevent invalid selections with a message
• Adjust: Modify the selection before applying
• Async: Make API calls for validation

Callback Parameters

The callback receives:

• Single mode: Date object
• Range mode: DateRange with start and end properties

Return Values (BeforeSelectResult)

• { action: 'accept' } - Allow selection
• { action: 'restore', message?: string } - Revert to previous selection
• { action: 'adjust', adjustedStartDate, adjustedEndDate } - Modify selection
• { action: 'clear' } - Clear selection entirely

Automatic Adjustments

You can automatically modify user selections to match business rules or improve user experience:

• Snap to weeks: Adjust to full week boundaries
• Minimum stays: Extend short selections to minimum length
• Checkout dates: Ensure checkout is on specific days
• Business rules: Any custom date adjustment logic

Return Format for Adjustments

return {
  action: 'adjust',
  adjustedStartDate: new Date(...),
  adjustedEndDate: new Date(...)
};

Common Use Cases

• Week rentals: Force Saturday-Saturday bookings
• Minimum stays: Extend 1-night stays to 2+ nights
• Holiday adjustments: Avoid checkout on holidays

Async Validation

The callback can be async, allowing you to make API calls to validate selections before accepting them:

• Check availability: Verify dates are bookable
• Fetch pricing: Calculate total price
• Validate rules: Check blackout dates, restrictions
• Get inventory: Ensure sufficient stock/rooms

Loading States

The picker shows a loading overlay automatically during async operations, preventing users from clicking while validation is in progress.

Best Practices

• Keep API calls fast (<500ms) for good UX
• Show clear messages explaining why selections were blocked
• Cache results to avoid redundant API calls
• Use beforeMonthChangedCallback to pre-load availability data

What It Does

Called AFTER a selection is finalized and accepted (after beforeDateSelectCallback validation passes).

Two Approaches

• JavaScript API: Use onSelect callback option
• Web Component: Listen for date-select event

Event Detail (Web Component)

• e.detail.date - Date object (single mode)
• e.detail.dateRange - {start, end} (range mode)
• e.detail.formattedValue - Formatted input string

Use Cases

• Update UI: Show selection summary, pricing
• Form integration: Populate hidden form fields
• Analytics: Track user selections
• Navigation: Auto-advance to next step

Callback vs Validation