Date Picker V2 API

Create accessible date pickers with single, range, and multiple selection modes using the JSON Layout V2 API

Back to Component Examples

Example 1: Single Date Selection

Basic date picker for selecting a single date. Click the input to open the calendar.

Single Date Picker • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "single-date-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "date-field",
        content: {
            type: "datepicker",
            mode: "single",
            placeholder: "Select a date",
            format: "MM/DD/YYYY",
            ariaLabel: "Select your preferred date"
        }
    }]
});

Example 2: Date Range Selection

Date picker for selecting a date range with dual calendar view. Perfect for booking systems.

Date Range Picker • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "range-date-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "date-range-field",
        content: {
            type: "datepicker",
            mode: "range",
            placeholderStart: "Check-in",
            placeholderEnd: "Check-out",
            showDualCalendar: true,
            ariaLabel: "Select check-in and check-out dates"
        }
    }]
});

Example 3: Multiple Date Selection

Select multiple individual dates. Great for scheduling appointments or selecting availability.

Multiple Date Selection • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "multiple-date-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "multi-date-field",
        content: {
            type: "datepicker",
            mode: "multiple",
            placeholder: "Select multiple dates",
            closeOnSelect: false,
            ariaLabel: "Select available dates"
        }
    }]
});

Example 4: Date Constraints

Limit selectable dates with min/max constraints. Supports keywords: "today", "tomorrow", "yesterday".

Date Constraints • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "constrained-date-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "future-dates",
        content: {
            type: "datepicker",
            mode: "single",
            placeholder: "Future dates only",
            minDate: "today",  // Supports: "today", "tomorrow", "yesterday", or "YYYY-MM-DD"
            ariaLabel: "Select a future date"
        }
    }]
});

Example 5: Date Range with Presets

Date range picker with quick-select presets like "Today", "Last 7 days", "This month", etc.

Date Range with Presets • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "presets-date-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "date-with-presets",
        content: {
            type: "datepicker",
            mode: "range",
            placeholderStart: "Start date",
            placeholderEnd: "End date",
            showPresets: true,
            presets: ["today", "yesterday", "last7", "last30", "thisMonth", "lastMonth"],
            showDualCalendar: true,
            ariaLabel: "Select date range with quick presets"
        }
    }]
});

Example 6: Disabled Weekends

Disable specific days of the week (e.g., weekends for business scheduling).

Disabled Weekends • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "weekday-only-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "weekday-picker",
        content: {
            type: "datepicker",
            mode: "single",
            placeholder: "Select a weekday",
            disabledDays: [0, 6],  // 0 = Sunday, 6 = Saturday
            minDate: "today",
            ariaLabel: "Select a weekday for your appointment"
        }
    }]
});

Configuration Reference

Complete list of available options for the V2 datepicker content type:

Option Type Default Description
mode string "single" Selection mode: "single", "range", or "multiple"
format string "MM/DD/YYYY" Display format for dates
placeholder string "Select date" Placeholder text for single/multiple mode
placeholderStart string "Start date" Placeholder for range start input
placeholderEnd string "End date" Placeholder for range end input
minDate string null Minimum date ("today", "tomorrow", "yesterday", or "YYYY-MM-DD")
maxDate string null Maximum date ("today", "tomorrow", "yesterday", or "YYYY-MM-DD")
showDualCalendar boolean false Show two months side by side
showPresets boolean false Show quick-select preset buttons
presets array [] Array of preset names: today, yesterday, last7, last30, thisMonth, lastMonth
disabledDays array [] Days of week to disable (0=Sunday, 6=Saturday)
disabledDates array [] Specific dates to disable (YYYY-MM-DD format)
firstDay number 0 First day of week (0=Sunday, 1=Monday)
inline boolean false Display calendar inline (always visible)
closeOnSelect boolean true Close calendar after selection (single mode)
required boolean false Mark field as required
disabled boolean false Disable the date picker
ariaLabel string "Date picker" Accessibility label for screen readers