Time Picker - JSON API Examples

Example 1: Basic Time Picker

A simple 12-hour time picker with AM/PM format and clock dial interface.

const config = {
    version: 2,
    layoutId: "basic-timepicker-demo",
    breakpoints: { xs: 1, md: 3 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "card",
                title: "Meeting Time",
                text: "Select your preferred time:",
                customContent: {
                    type: "timepicker",
                    format: "12",
                    step: 15,
                    placeholder: "Select time..."
                }
            }
        },
        {
            content: {
                type: "card",
                title: "24-Hour Format",
                text: "For international use:",
                customContent: {
                    type: "timepicker",
                    format: "24",
                    step: 30,
                    placeholder: "HH:mm"
                }
            }
        },
        {
            content: {
                type: "card",
                title: "Default Time",
                text: "Pre-set to current time:",
                customContent: {
                    type: "timepicker",
                    format: "12",
                    defaultTime: "now",
                    placeholder: "Current time"
                }
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Time Range Picker

Select start and end times for scheduling appointments, meetings, or events.

const config = {
    version: 2,
    layoutId: "range-timepicker-demo",
    breakpoints: { xs: 1 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "card",
                title: "Schedule Appointment",
                text: "Select available time range:",
                customContent: {
                    type: "timepicker",
                    mode: "range",
                    format: "12",
                    step: 15,
                    placeholderStart: "Start time",
                    placeholderEnd: "End time",
                    minTime: "09:00",
                    maxTime: "17:00"
                }
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Time Constraints

Limit time selection to business hours or specific time windows.

const config = {
    version: 2,
    layoutId: "constrained-timepicker-demo",
    breakpoints: { xs: 1, md: 2 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "card",
                title: "Business Hours Only",
                text: "9 AM - 5 PM:",
                customContent: {
                    type: "timepicker",
                    format: "12",
                    step: 15,
                    minTime: "09:00",
                    maxTime: "17:00",
                    placeholder: "Select business hours"
                }
            }
        },
        {
            content: {
                type: "card",
                title: "Lunch Reservations",
                text: "11 AM - 2 PM:",
                customContent: {
                    type: "timepicker",
                    format: "12",
                    step: 30,
                    minTime: "11:00",
                    maxTime: "14:00",
                    placeholder: "Select lunch time"
                }
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);

Example 4: Event Handling

Handle time selection events with custom callbacks for form integration.

Event log will appear here...

const config = {
    version: 2,
    layoutId: "event-timepicker-demo",
    breakpoints: { xs: 1 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "card",
                title: "Select Delivery Time",
                text: "We'll log your selection:",
                customContent: {
                    type: "timepicker",
                    format: "12",
                    step: 15,
                    placeholder: "Choose delivery time",
                    onChange: function(event, value, instance) {
                        const log = document.getElementById('demo4-log');
                        const timestamp = new Date().toLocaleTimeString();
                        log.innerHTML = `[${timestamp}] Selected: ${value}
` + log.innerHTML;
                    }
                }
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo4-output', config);

Example 5: FilterBus Integration

Publish time selections to FilterBus for cross-component filtering in dashboards.

const config = {
    version: 2,
    layoutId: "filterbus-timepicker-demo",
    breakpoints: { xs: 1, md: 2 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "card",
                title: "Dashboard Time Filter",
                text: "Select a time to publish to FilterBus:",
                customContent: {
                    type: "timepicker",
                    format: "12",
                    step: 15,
                    placeholder: "Filter by time...",
                    filterBusPublish: "dashboardTimeFilter"
                }
            }
        },
        {
            content: {
                type: "html",
                value: '<div id="subscriber">...</div>'
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#container', config);

// Subscribe to FilterBus to receive time updates
RSL.FilterBus.subscribe('my-subscriber', function(state) {
    const time = state.dashboardTimeFilter;
    document.getElementById('subscriber').textContent =
        time ? 'Time: ' + time : '(No time selected)';
}, { keys: ['dashboardTimeFilter'] });