RSL Date Picker Playground

Download this file and experiment with the Date Picker component. All examples are fully functional.

Single Date Selection

Basic Single Date

Default single date picker with DD/MM/YYYY format.

Week Starting Monday

Use data-first-day="1" to start weeks on Monday.

Basic Date Range

Select a start and end date for date range selection.

With Quick Presets

Add quick selection presets with data-show-presets="true".

Dual Calendar View

Display two months side by side with data-months="2".

Select Multiple Dates

Click dates to toggle selection. Perfect for scheduling multiple appointments.

Future Dates Only

Use data-min-date="today" to disable past dates.

Weekdays Only

Disable specific days with data-disabled-days="0,6" (Sunday=0, Saturday=6).

Date Range Limit

Limit to specific date range with data-min-date and data-max-date.

Past Dates Only

Use data-max-date="today" to only allow past dates.

Check-in / Check-out

A typical hotel booking date picker - future dates only, dual calendar, no presets.

Appointment Scheduling

Business appointment picker - future dates, weekdays only.