Web Date Range Picker

The date picker provides a built-in message system for displaying feedback, errors, warnings, and interactive content with custom action buttons.

Key Concepts:

showMessage() - Display messages in the calendar
hideMessage() - Hide the current message
data-action="custom" - Buttons that fire custom-action event
data-action="close-message" - Buttons that dismiss the message
showInvalidRange: true - Keep invalid selection visible with error styling

MSG01 Basic Messages

Display styled and custom messages

Live Demo

Code Examples

JavaScript

Details

Message Types

Type	Use Case
`'error'`	Validation failures, blocked selections
`'warning'`	Cautions, suggestions
`'info'`	Tips, information
`'success'`	Confirmations
none	Custom HTML with full styling control

API

showMessage(content: string, type?: string, autoHide?: number)
hideMessage()

Note: The built-in close button (×) only appears for typed messages, not custom HTML. Add your own close button with data-action="close-message".

MSG02 Messages in Validation

Show messages from beforeDateSelectCallback

Live Demo

Code Examples

JavaScript

Details

Important: Message Visibility

When beforeDateSelectCallback returns:

{ action: 'accept' } → Message is auto-hidden
{ action: 'restore' } → Message stays visible
{ action: 'adjust' } → Message stays if no adjustment message

Callback Return Actions

Action	Effect
`'accept'`	Accept selection, hide message
`'restore'`	Revert to previous, keep message
`'adjust'`	Modify selection
`'clear'`	Clear selection entirely

Tip: Use showInvalidRange: true with 'restore' to keep the invalid selection visible with red/error styling.

MSG03 Custom Action Buttons

Interactive buttons in messages

Live Demo

Code Examples

Show Message with Buttons

Handle custom-action Event

Details

Button Actions

Attribute	Behavior
`data-action="custom"`	Fires `custom-action` event with all `data-*` attributes
`data-action="close-message"`	Hides the message (built-in)

Data Attribute Conversion

HTML data-* attributes become camelCase keys:

data-start-date → startDate
data-end-date → endDate
data-my-value → myValue

Use Case: Show alternative date suggestions when a selection is invalid, letting users click to apply the suggested dates.

MSG04 Post-Selection Messages

Show messages after selection completes

Live Demo

Code Examples

JavaScript

Details

When to Use

Use date-select event for messages that:

Don't block the selection
Provide tips or suggestions
Show informational feedback

Comparison

Where	When	Use For
`beforeDateSelectCallback`	Before selection	Block invalid, offer alternatives
`date-select` event	After selection	Tips, suggestions (non-blocking)

Remember: Messages shown from beforeDateSelectCallback with { action: 'accept' } are auto-hidden. Use the event handler for persistent informational messages.

MSG05 showInvalidRange Option

Keep invalid selection visible with error styling

Live Demo

Code Examples

JavaScript

Details

What showInvalidRange Does

State	Without	With `showInvalidRange: true`
Selection	Reverts to previous	Reverts to previous
Visual	Previous range shown	Invalid range in red
Message	Stays visible	Stays visible

User Experience

With showInvalidRange: true, users can see:

What they tried to select (in error styling)
Why it was invalid (via message)
What to do next (select different dates or use suggestion buttons)

Best Practice: Combine showInvalidRange: true with a clear error message and optionally suggestion buttons to guide users.

Quick Reference

Message Methods

// Show styled message
picker.showMessage('Text', 'error');
picker.showMessage('Text', 'warning');
picker.showMessage('Text', 'info');
picker.showMessage('Text', 'success');

// Show with auto-hide (3 seconds)
picker.showMessage('Saved!', 'success', 3000);

// Show custom HTML
picker.showMessage('<div>...</div>');

// Hide message
picker.hideMessage();

Button Actions

<!-- Fires custom-action event -->
<button data-action="custom"
        data-start-date="2026-01-14"
        data-end-date="2026-01-17">
  Apply dates
</button>

<!-- Closes message (built-in) -->
<button data-action="close-message">
  Dismiss
</button>

// Handle event
picker.addEventListener('custom-action', (e) => {
  const { startDate, endDate } = e.detail;
  // Apply dates...
});