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 a selection object:

• type - 'single' or 'range'
• startDate - Selected/start date (Date object)
• endDate - End date for ranges (Date object or null)
• picker - The picker instance

Return Values

• { action: 'accept' } - Allow selection
• { action: 'block', message?: string } - Block with optional message
• { action: 'adjust', startDate, endDate? } - Modify selection

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',
  startDate: new Date(...), // Adjusted start
  endDate: new Date(...)    // Adjusted end (for ranges)
};

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

The onSelect callback is called AFTER a selection is finalized and accepted (after beforeDateSelectCallback validation passes).

Use Cases

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

Callback vs Validation