# DayPicker

*Category:* Components
*Section:* Pickers
*Source:* https://uikit.developers.rio.cloud/#/components/dayPicker
*Captured:* 2026-04-27T14:57:59.725Z

DayPicker is the composable input and dropdown wrapper that should replace the legacy DatePicker. It keeps the UIKIT API small while still allowing presets, footer actions, and additional controls to be injected from the outside.

## DayPicker

Use this component for form fields, filters, and composed dropdown workflows. The standalone calendar API is documented separately on the DayPickerCalendar page.

## Single day picker

The default entry point wraps an input and dropdown around the calendar for the common single-date case.

### Example: Example 1

Single day picker

You picked: No date selected

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const DayPickerInputExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-default'>Single day picker</label>
            <DayPicker
                id='day-picker-default'
                placeholder='Please select'
                isClearable
                value={selectedDay}
                onChange={setSelectedDay}
            />
            <div className='padding-top-5'>
                <b>You picked:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerInputExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-default">Single day picker</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Please select" id="day-picker-default" class="form-control bg-white withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No date selected
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Single day with dateFormat

Use dateFormat when you want a migration-friendly custom input format similar to the legacyDatePicker.

### Example: Example 2

Single day with custom format

You picked: 2026-03-26

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const DayPickerDateFormatExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>(new Date(2026, 2, 27));

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-date-format'>Single day with custom format</label>
            <DayPicker
                id='day-picker-date-format'
                value={selectedDay}
                onChange={setSelectedDay}
                dateFormat='yyyy-MM-dd'
                isClearable
                placeholder='YYYY-MM-DD'
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {selectedDay ? selectedDay.toISOString().split('T')[0] : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerDateFormatExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-date-format">Single day with custom format</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="YYYY-MM-DD" id="day-picker-date-format" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 2026-03-26
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Localization

Switch the locale to see how the default input formatting changes between localized date conventions.

### Example: Example 3

Localized input formatting en-GB bg-BG
cs-CZ
da-DK
de-DE
el-GR
en-GB
es-ES
et-EE
fi-FI
fr-FR
hr-HR
hu-HU
it-IT
lt-LT
lv-LV
nb-NO
nl-NL
pl-PL
pt-BR
pt-PT
ro-RO
sk-SK
sl-SI
sv-SE

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker, { supportedDayPickerLocales } from '@rio-cloud/rio-uikit/DayPicker';
import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';

const localeOptions: SelectOption[] = supportedDayPickerLocales.map(locale => ({
    id: locale,
    label: locale,
}));

const DayPickerLocalizationExample = () => {
    const [locale, setLocale] = useState('en-GB');
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date(2026, 2, 27));

    const handleLocaleChange = (option: SelectOption | undefined) => {
        if (option?.id) {
            setLocale(option.id);
        }
    };

    return (
        <div className='max-width-300'>
            <DayPicker
                id='day-picker-localization'
                locale={locale}
                value={selectedDate}
                onChange={setSelectedDate}
                isClearable
                placeholder='Please select'
            />
            <label htmlFor='day-picker-localization'>Localized input formatting</label>
            <div className='margin-bottom-15'>
                <Select
                    id='day-picker-localization-select'
                    options={localeOptions}
                    value={[locale]}
                    onChange={handleLocaleChange}
                    className='min-width-200'
                />
            </div>
        </div>
    );
};

export default DayPickerLocalizationExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Please select" id="day-picker-localization" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <label for="day-picker-localization">Localized input formatting</label>
    <div class="margin-bottom-15">
        <div class="select dropdown min-width-200 dropup">
            <button type="button" id="day-picker-localization-select" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                <span class="selected-option-text">en-GB</span>
                <span class="select-toggle-actions">
                    <span class="clearButton hide pointer-events-none">
                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                        </span>
                    </span>
                    <span class="caret">
                    </span>
                </span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="bg-BG" data-item-index="0">
                        <span class="selected-option-dropdown-item">bg-BG</span>
                        <input type="hidden" value="bg-BG">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="cs-CZ" data-item-index="1">
                        <span class="selected-option-dropdown-item">cs-CZ</span>
                        <input type="hidden" value="cs-CZ">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="da-DK" data-item-index="2">
                        <span class="selected-option-dropdown-item">da-DK</span>
                        <input type="hidden" value="da-DK">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="de-DE" data-item-index="3">
                        <span class="selected-option-dropdown-item">de-DE</span>
                        <input type="hidden" value="de-DE">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="el-GR" data-item-index="4">
                        <span class="selected-option-dropdown-item">el-GR</span>
                        <input type="hidden" value="el-GR">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="en-GB" data-item-index="5">
                        <span class="selected-option-dropdown-item">en-GB</span>
                        <input type="hidden" value="en-GB">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="es-ES" data-item-index="6">
                        <span class="selected-option-dropdown-item">es-ES</span>
                        <input type="hidden" value="es-ES">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="et-EE" data-item-index="7">
                        <span class="selected-option-dropdown-item">et-EE</span>
                        <input type="hidden" value="et-EE">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="fi-FI" data-item-index="8">
                        <span class="selected-option-dropdown-item">fi-FI</span>
                        <input type="hidden" value="fi-FI">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="fr-FR" data-item-index="9">
                        <span class="selected-option-dropdown-item">fr-FR</span>
                        <input type="hidden" value="fr-FR">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="hr-HR" data-item-index="10">
                        <span class="selected-option-dropdown-item">hr-HR</span>
                        <input type="hidden" value="hr-HR">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="hu-HU" data-item-index="11">
                        <span class="selected-option-dropdown-item">hu-HU</span>
                        <input type="hidden" value="hu-HU">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="it-IT" data-item-index="12">
                        <span class="selected-option-dropdown-item">it-IT</span>
                        <input type="hidden" value="it-IT">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="lt-LT" data-item-index="13">
                        <span class="selected-option-dropdown-item">lt-LT</span>
                        <input type="hidden" value="lt-LT">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="lv-LV" data-item-index="14">
                        <span class="selected-option-dropdown-item">lv-LV</span>
                        <input type="hidden" value="lv-LV">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="nb-NO" data-item-index="15">
                        <span class="selected-option-dropdown-item">nb-NO</span>
                        <input type="hidden" value="nb-NO">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="nl-NL" data-item-index="16">
                        <span class="selected-option-dropdown-item">nl-NL</span>
                        <input type="hidden" value="nl-NL">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="pl-PL" data-item-index="17">
                        <span class="selected-option-dropdown-item">pl-PL</span>
                        <input type="hidden" value="pl-PL">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="pt-BR" data-item-index="18">
                        <span class="selected-option-dropdown-item">pt-BR</span>
                        <input type="hidden" value="pt-BR">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="pt-PT" data-item-index="19">
                        <span class="selected-option-dropdown-item">pt-PT</span>
                        <input type="hidden" value="pt-PT">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="ro-RO" data-item-index="20">
                        <span class="selected-option-dropdown-item">ro-RO</span>
                        <input type="hidden" value="ro-RO">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="sk-SK" data-item-index="21">
                        <span class="selected-option-dropdown-item">sk-SK</span>
                        <input type="hidden" value="sk-SK">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="sl-SI" data-item-index="22">
                        <span class="selected-option-dropdown-item">sl-SI</span>
                        <input type="hidden" value="sl-SI">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="sv-SE" data-item-index="23">
                        <span class="selected-option-dropdown-item">sv-SE</span>
                        <input type="hidden" value="sv-SE">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Custom triggers

The dropdown does not depend on an editable input. You can swap in custom triggers like icon buttons or compact labels for places with limited space.

### Example: Example 4

Icon button trigger

You picked: No date selected

Muted label trigger 30/03/2026

You picked: 30/03/2026

#### React (tsx)

```tsx
import { useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import DayPicker from '@rio-cloud/rio-uikit/DayPicker';
import Divider from '@rio-cloud/rio-uikit/Divider';

const formatSelectedDay = (selectedDay: Date | undefined) =>
    selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected';

const TODAY = new Date('2026-03-30T00:00:00');

const DayPickerCustomTriggerExample = () => {
    const [selectedDayFromButton, setSelectedDayFromButton] = useState<Date | undefined>();
    const [selectedDayFromLabel, setSelectedDayFromLabel] = useState<Date | undefined>(TODAY);

    return (
        <div className='display-flex flex-column gap-20'>
            <div>
                <label htmlFor='day-picker-custom-trigger-button'>Icon button trigger</label>
                <div className='margin-top-5'>
                    <DayPicker
                        id='day-picker-custom-trigger-button'
                        value={selectedDayFromButton}
                        onChange={setSelectedDayFromButton}
                        trigger={({ toggle, isOpen }) => (
                            <Button iconName='rioglyph-calendar' iconOnly active={isOpen} onClick={toggle} />
                        )}
                    />
                </div>
                <div className='padding-top-5'>
                    <b>You picked:</b> {formatSelectedDay(selectedDayFromButton)}
                </div>
            </div>

            <Divider />

            <div>
                <label htmlFor='day-picker-custom-trigger-label'>Muted label trigger</label>
                <div className='margin-top-5'>
                    <DayPicker
                        id='day-picker-custom-trigger-label'
                        value={selectedDayFromLabel}
                        onChange={setSelectedDayFromLabel}
                        trigger={({ toggle }) => (
                            <div className='label label-muted label-filled cursor-pointer' onClick={toggle}>
                                <span className='rioglyph rioglyph-calendar margin-right-5' aria-hidden='true' />
                                {selectedDayFromLabel && new Intl.DateTimeFormat('en-GB').format(selectedDayFromLabel)}
                            </div>
                        )}
                    />
                </div>
                <div className='padding-top-5'>
                    <b>You picked:</b> {formatSelectedDay(selectedDayFromLabel)}
                </div>
            </div>
        </div>
    );
};

export default DayPickerCustomTriggerExample;
```

#### HTML (html)

```html
<div class="display-flex flex-column gap-20">
    <div>
        <label for="day-picker-custom-trigger-button">Icon button trigger</label>
        <div class="margin-top-5">
            <div class="form-group">
                <div class="display-inline-block">
                    <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-calendar">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="padding-top-5">
            <b>You picked:</b> No date selected
        </div>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div>
        <label for="day-picker-custom-trigger-label">Muted label trigger</label>
        <div class="margin-top-5">
            <div class="form-group">
                <div class="display-inline-block">
                    <div class="label label-muted label-filled cursor-pointer">
                        <span class="rioglyph rioglyph-calendar margin-right-5" aria-hidden="true">
                        </span>30/03/2026
                    </div>
                </div>
            </div>
        </div>
        <div class="padding-top-5">
            <b>You picked:</b> 30/03/2026
        </div>
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Range picker

Range mode keeps the same input shell but changes the calendar selection behavior and the rendered value. It can also show two visible months for faster range selection.

### Example: Example 5

Range picker

You picked: No range selected

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';

const formatRange = (range: DateRange | undefined, locale = 'en-GB') => {
    if (!range?.from && !range?.to) {
        return 'No range selected';
    }

    const formatter = new Intl.DateTimeFormat(locale);
    const from = range.from ? formatter.format(range.from) : '...';
    const to = range.to ? formatter.format(range.to) : '...';

    return `${from} - ${to}`;
};

const DayPickerRangeInputExample = () => {
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-range-basic'>Range picker</label>
            <DayPicker
                id='day-picker-range-basic'
                mode='range'
                value={selectedRange}
                onChange={setSelectedRange}
                numberOfMonths={2}
                closeOnSelect={false}
                isClearable
                usePortal
                placeholder='Select date a range'
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {formatRange(selectedRange)}
            </div>
        </div>
    );
};

export default DayPickerRangeInputExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-range-basic">Range picker</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select date a range" id="day-picker-range-basic" class="form-control bg-white cursor-pointer" autocomplete="off" type="text" readonly="" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No range selected
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Week selection

Set selectionVariant='week' to select the whole week of the clicked day while keeping the same range value shape.

### Example: Weeks start on Monday. You can click a day or the calendar week number.

Week selection

You picked: No week selected
Weeks start on Monday. You can click a day or the calendar week number.

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';

const formatRange = (range: DateRange | undefined, locale = 'en-GB') => {
    if (!range?.from && !range?.to) {
        return 'No week selected';
    }

    const formatter = new Intl.DateTimeFormat(locale);
    const from = range.from ? formatter.format(range.from) : '...';
    const to = range.to ? formatter.format(range.to) : '...';

    return `${from} - ${to}`;
};

const DayPickerWeekSelectionExample = () => {
    const [selectedWeek, setSelectedWeek] = useState<DateRange | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-week-selection'>Week selection</label>
            <DayPicker
                id='day-picker-week-selection'
                mode='range'
                value={selectedWeek}
                onChange={setSelectedWeek}
                selectionVariant='week'
                weekStartsOn={1}
                showWeekNumber
                isClearable
                closeOnSelect={false}
                placeholder='Select week'
            />
            <div className='padding-y-5'>
                <b>You picked:</b> {formatRange(selectedWeek)}
            </div>
            <div className='text-color-dark'>
                Weeks start on Monday. You can click a day or the calendar week number.
            </div>
        </div>
    );
};

export default DayPickerWeekSelectionExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-week-selection">Week selection</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select week" id="day-picker-week-selection" class="form-control bg-white cursor-pointer" autocomplete="off" type="text" readonly="" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-y-5">
        <b>You picked:</b> No week selected
    </div>
    <div class="text-color-dark">Weeks start on Monday. You can click a day or the calendar week number.</div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Month selection

Set selectionVariant='month' to select the whole month of the clicked day as one range.

### Example: Example 7

Month selection

You picked: No month selected

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';

const DEFAULT_LOCALE = 'en-GB';

const formatMonthValue = (range: DateRange | undefined, localeCode = DEFAULT_LOCALE) => {
    if (!range?.from) {
        return '';
    }

    return new Intl.DateTimeFormat(localeCode, {
        month: 'long',
        year: 'numeric',
    }).format(range.from);
};

const formatRange = (range: DateRange | undefined, localeCode = DEFAULT_LOCALE) => {
    if (!range?.from && !range?.to) {
        return 'No month selected';
    }

    const formatter = new Intl.DateTimeFormat(localeCode);
    const from = range.from ? formatter.format(range.from) : '...';
    const to = range.to ? formatter.format(range.to) : '...';

    return `${from} - ${to}`;
};

const DayPickerMonthSelectionExample = () => {
    const [selectedMonth, setSelectedMonth] = useState<DateRange | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-month-selection'>Month selection</label>
            <DayPicker
                id='day-picker-month-selection'
                mode='range'
                locale={DEFAULT_LOCALE}
                value={selectedMonth}
                onChange={setSelectedMonth}
                selectionVariant='month'
                showOutsideDays
                isClearable
                closeOnSelect={false}
                placeholder='Select month'
                renderValue={(value, locale) => formatMonthValue(value, locale)}
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {formatRange(selectedMonth)}
            </div>
        </div>
    );
};

export default DayPickerMonthSelectionExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-month-selection">Month selection</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select month" id="day-picker-month-selection" class="form-control bg-white cursor-pointer" autocomplete="off" type="text" readonly="" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No month selected
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Rolling range

Set selectionVariant='rolling' with rollingDays to create a fixed-length range starting from the clicked day.

### Example: Example 8

Rolling 7-day window

You picked: No rolling range selected

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';

const formatRange = (range: DateRange | undefined, locale = 'en-GB') => {
    if (!range?.from && !range?.to) {
        return 'No rolling range selected';
    }

    const formatter = new Intl.DateTimeFormat(locale);
    const from = range.from ? formatter.format(range.from) : '...';
    const to = range.to ? formatter.format(range.to) : '...';

    return `${from} - ${to}`;
};

const DayPickerRollingSelectionExample = () => {
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-rolling-selection'>Rolling 7-day window</label>
            <DayPicker
                id='day-picker-rolling-selection'
                mode='range'
                value={selectedRange}
                onChange={setSelectedRange}
                selectionVariant='rolling'
                rollingDays={7}
                isClearable
                closeOnSelect={false}
                placeholder='Select start date'
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {formatRange(selectedRange)}
            </div>
        </div>
    );
};

export default DayPickerRollingSelectionExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-rolling-selection">Rolling 7-day window</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select start date" id="day-picker-rolling-selection" class="form-control bg-white cursor-pointer" autocomplete="off" type="text" readonly="" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No rolling range selected
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Footer actions

Footer actions can also select values directly, for example a Today button for single-date workflows.

### Example: Example 9

Single date with Today action

You picked: No date selected

#### React (tsx)

```tsx
import { useState } from 'react';
import { format } from 'date-fns';

import Button from '@rio-cloud/rio-uikit/Button';
import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const formatDate = (value: Date | undefined) => (value ? format(value, 'dd.MM.yyyy') : '');

const DayPickerTodayFooterExample = () => {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-today-footer'>Single date with Today action</label>
            <DayPicker
                id='day-picker-today-footer'
                placeholder='Please select a date'
                value={selectedDate}
                onChange={setSelectedDate}
                closeOnSelect={false}
                isClearable
                footer={({ setDraftValue }) => (
                    <div className='display-flex justify-content-end'>
                        <Button
                            onClick={() => {
                                const today = new Date();
                                const nextDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                                setSelectedDate(nextDate);
                                setDraftValue(nextDate);
                            }}
                        >
                            Today
                        </Button>
                    </div>
                )}
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {selectedDate ? formatDate(selectedDate) : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerTodayFooterExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-today-footer">Single date with Today action</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Please select a date" id="day-picker-today-footer" class="form-control bg-white withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No date selected
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Range picker with presets and footer actions

Sidebar presets and footer controls are passed in from the outside. The picker keeps draft state internally, but the surrounding UI remains fully composable.

### Example: Example 10

Range with presets and footer actions

You picked: No range selected

#### React (tsx)

```tsx
import { useState } from 'react';
import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';
import Button from '@rio-cloud/rio-uikit/Button';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import classNames from '@rio-cloud/rio-uikit/classNames';
import { isMobileScreen } from '@rio-cloud/rio-uikit/DeviceUtils';

const formatRange = (range: DateRange | undefined) => {
    if (!range?.from && !range?.to) {
        return 'No range selected';
    }

    const formatter = new Intl.DateTimeFormat('de-DE');
    const from = range.from ? formatter.format(range.from) : '...';
    const to = range.to ? formatter.format(range.to) : '...';

    return `${from} - ${to}`;
};

const DayPickerControlledRangeInputExample = () => {
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-range-input'>Range with presets and footer actions</label>
            <DayPicker
                id='day-picker-range-input'
                mode='range'
                locale='de'
                placeholder='Please select a range'
                numberOfMonths={2}
                closeOnSelect={false}
                selectionBehavior='deferred'
                value={selectedRange}
                onChange={setSelectedRange}
                isClearable
                usePortal
                closeOnOutsideClick={false}
                leftSidebarClassName={classNames(
                    'min-width-150',
                    !isMobileScreen() && 'border border-color-lighter border-right-only'
                )}
                leftSidebar={({ setDraftValue }) => {
                    const today = new Date();
                    const todayRange = { from: today, to: today };
                    const last7DaysRange = {
                        from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6),
                        to: today,
                    };
                    const last90DaysRange = {
                        from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 89),
                        to: today,
                    };
                    const thisMonthRange = {
                        from: new Date(today.getFullYear(), today.getMonth(), 1),
                        to: new Date(today.getFullYear(), today.getMonth() + 1, 0),
                    };

                    const presetItems = [
                        { label: 'Today', value: todayRange },
                        { label: 'Last 7 days', value: last7DaysRange },
                        { label: 'This month', value: thisMonthRange },
                        { label: 'Last 90 days', value: last90DaysRange },
                    ];

                    return (
                        <>
                            <FormLabel>Presets</FormLabel>
                            <ul className='nav nav-pills nav-stacked nav-pills-stacked-decent'>
                                {presetItems.map(item => (
                                    <li key={item.label} onClick={() => setDraftValue(item.value)}>
                                        <span>{item.label}</span>
                                    </li>
                                ))}
                            </ul>
                        </>
                    );
                }}
                footerClassName='padding-15 border border-top-only border-color-lighter'
                footer={({ apply, clear, close }) => (
                    <div className='display-flex justify-content-between gap-10'>
                        <Button onClick={clear}>Clear</Button>
                        <div className='display-flex gap-10'>
                            <Button bsStyle='muted' onClick={close}>
                                Cancel
                            </Button>
                            <Button bsStyle='primary' onClick={apply}>
                                Apply
                            </Button>
                        </div>
                    </div>
                )}
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {formatRange(selectedRange)}
            </div>
        </div>
    );
};

export default DayPickerControlledRangeInputExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-range-input">Range with presets and footer actions</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Please select a range" id="day-picker-range-input" class="form-control bg-white cursor-pointer" autocomplete="off" type="text" readonly="" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No range selected
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Presets with external select

The same preset ranges can be offered both inside the dropdown and through a separate Select outside the picker.

### Example: Example 11

Range picker with synced presets Last 14 days Today
This week
Last 7 days
Last 14 days
Last 90 days

#### React (tsx)

```tsx
import { useMemo, useState } from 'react';
import { isSameDay, startOfToday, startOfWeek, subDays } from 'date-fns';

import Button from '@rio-cloud/rio-uikit/Button';
import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';

type Preset = {
    id: string;
    label: string;
    range: DateRange;
};

const isSameRange = (left: DateRange | undefined, right: DateRange | undefined) =>
    !!left?.from &&
    !!left?.to &&
    !!right?.from &&
    !!right?.to &&
    isSameDay(left.from, right.from) &&
    isSameDay(left.to, right.to);

const createPresets = (): Preset[] => {
    const today = startOfToday();

    return [
        {
            id: 'today',
            label: 'Today',
            range: { from: today, to: today },
        },
        {
            id: 'this-week',
            label: 'This week',
            range: { from: startOfWeek(today, { weekStartsOn: 1 }), to: today },
        },
        {
            id: 'last-7-days',
            label: 'Last 7 days',
            range: { from: subDays(today, 6), to: today },
        },
        {
            id: 'last-14-days',
            label: 'Last 14 days',
            range: { from: subDays(today, 13), to: today },
        },
        {
            id: 'last-90-days',
            label: 'Last 90 days',
            range: { from: subDays(today, 89), to: today },
        },
    ];
};

const DayPickerPresetSelectExample = () => {
    const presets = useMemo(createPresets, []);
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>(presets[3]?.range);

    const selectedPresetId = presets.find(preset => isSameRange(preset.range, selectedRange))?.id;

    const presetOptions: SelectOption[] = presets.map(preset => ({
        id: preset.id,
        label: preset.label,
        selected: preset.id === selectedPresetId,
    }));

    const handlePresetSelect = (option: SelectOption | undefined) => {
        const nextPreset = presets.find(preset => preset.id === option?.id);
        setSelectedRange(nextPreset?.range);
    };

    return (
        <div className='max-width-600'>
            <FormLabel htmlFor='day-picker-preset-range'>Range picker with synced presets</FormLabel>
            <div className='display-flex flex-wrap column-gap-10'>
                <div className='form-group'>
                    <Select
                        id='day-picker-preset-select'
                        options={presetOptions}
                        value={selectedPresetId ? [selectedPresetId] : []}
                        onChange={handlePresetSelect}
                        placeholder='Choose preset'
                        btnClassName='width-150'
                    />
                </div>
                <DayPicker
                    id='day-picker-preset-range'
                    placeholder='Please select a range'
                    mode='range'
                    value={selectedRange}
                    onChange={setSelectedRange}
                    numberOfMonths={2}
                    isClearable
                    usePortal
                    closeOnSelect={false}
                    selectionBehavior='deferred'
                    className='min-width-250'
                    leftSidebarClassName='min-width-150'
                    leftSidebar={({ draftValue, setDraftValue }) => (
                        <>
                            <FormLabel>Presets</FormLabel>
                            <ul className='nav nav-pills nav-stacked nav-pills-stacked-decent'>
                                {presets.map(preset => (
                                    <li
                                        key={preset.id}
                                        className={isSameRange(preset.range, draftValue) ? 'active' : undefined}
                                        onClick={() => setDraftValue(preset.range)}
                                    >
                                        <span>{preset.label}</span>
                                    </li>
                                ))}
                            </ul>
                        </>
                    )}
                    footer={({ apply, close }) => (
                        <ButtonToolbar alignment='right'>
                            <Button bsStyle='muted' onClick={close}>
                                Cancel
                            </Button>
                            <Button bsStyle='primary' onClick={apply}>
                                Apply
                            </Button>
                        </ButtonToolbar>
                    )}
                />
            </div>
        </div>
    );
};

export default DayPickerPresetSelectExample;
```

#### HTML (html)

```html
<div class="max-width-600">
    <label for="day-picker-preset-range" class="display-inline-block">
        <span>Range picker with synced presets</span>
    </label>
    <div class="display-flex flex-wrap column-gap-10">
        <div class="form-group">
            <div class="select dropdown dropup">
                <button type="button" id="day-picker-preset-select" class="dropdown-toggle form-control text-left width-150" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                    <span class="selected-option-text">Last 14 days</span>
                    <span class="select-toggle-actions">
                        <span class="clearButton hide pointer-events-none">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                        <span class="caret">
                        </span>
                    </span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="today" data-item-index="0">
                            <span class="selected-option-dropdown-item">Today</span>
                            <input type="hidden" value="today">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="this-week" data-item-index="1">
                            <span class="selected-option-dropdown-item">This week</span>
                            <input type="hidden" value="this-week">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="last-7-days" data-item-index="2">
                            <span class="selected-option-dropdown-item">Last 7 days</span>
                            <input type="hidden" value="last-7-days">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="last-14-days" data-item-index="3">
                            <span class="selected-option-dropdown-item">Last 14 days</span>
                            <input type="hidden" value="last-14-days">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="last-90-days" data-item-index="4">
                            <span class="selected-option-dropdown-item">Last 90 days</span>
                            <input type="hidden" value="last-90-days">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="form-group min-width-250">
            <div>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="form-control-feedback-wrapper flex-1-1">
                        <div class="ClearableInput input-group">
                            <input placeholder="Please select a range" id="day-picker-preset-range" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="14/04/2026 - 27/04/2026">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Date and time footer

The footer slot can host a TimePicker while renderValue shows the combined date and time in the trigger. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.

### Example: Example 12

Date and time

You picked: 30.03.2026 14:30

#### React (tsx)

```tsx
import { useState } from 'react';
import { format, setHours, setMinutes } from 'date-fns';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';
import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const getTimeValue = (date: Date | undefined) => (date ? format(date, 'HH:mm') : '');

const applyTimeToDate = (date: Date | undefined, timeValue: string) => {
    if (!date || !timeValue) {
        return date;
    }

    const [hours, minutes] = timeValue.split(':').map(Number);
    return setMinutes(setHours(date, hours), minutes);
};

const formatDateTime = (value: Date | undefined) => (value ? format(value, 'dd.MM.yyyy HH:mm') : '');

const DayPickerTimeFooterExample = () => {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date(2026, 2, 30));
    const [selectedTimeValue, setSelectedTimeValue] = useState('14:30');

    const selectedDateTime = applyTimeToDate(selectedDate, selectedTimeValue);

    return (
        <div className='max-width-300'>
            <FormLabel htmlFor='day-picker-time-footer'>Date and time</FormLabel>
            <DayPicker
                id='day-picker-time-footer'
                placeholder='Please select'
                value={selectedDateTime}
                onChange={setSelectedDate}
                closeOnSelect={false}
                isClearable
                usePortal
                renderValue={value => formatDateTime(value)}
                footer={({ draftValue, setDraftValue }) => (
                    <div>
                        <FormLabel>Time</FormLabel>
                        <TimePicker
                            value={selectedTimeValue || getTimeValue(draftValue)}
                            onChange={timeValue => {
                                setSelectedTimeValue(timeValue);
                                setDraftValue(applyTimeToDate(draftValue, timeValue));
                            }}
                            disabled={!draftValue}
                        />
                    </div>
                )}
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {selectedDateTime ? formatDateTime(selectedDateTime) : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerTimeFooterExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-time-footer" class="display-inline-block">
        <span>Date and time</span>
    </label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Please select" id="day-picker-time-footer" class="form-control bg-white withClearButton" autocomplete="off" type="text" tabindex="0" value="30.03.2026 14:30">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 30.03.2026 14:30
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Range with start and end times

For range selection, the footer can render two independent TimePicker controls for start and end times while the trigger displays the final combined value. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.

### Example: Example 13

Range with start and end times

You picked: 03.04.2026 09:00 - 06.04.2026 17:30

#### React (tsx)

```tsx
import { useState } from 'react';
import { format, setHours, setMinutes } from 'date-fns';

import Button from '@rio-cloud/rio-uikit/Button';
import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';
import TimePicker from '@rio-cloud/rio-uikit/TimePicker';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';

const getTimeValue = (date: Date | undefined) => (date ? format(date, 'HH:mm') : '');

const applyTimeToDate = (date: Date | undefined, timeValue: string) => {
    if (!date || !timeValue) {
        return date;
    }

    const [hours, minutes] = timeValue.split(':').map(Number);
    return setMinutes(setHours(date, hours), minutes);
};

const formatRangeDateTime = (value: DateRange | undefined) => {
    if (!value?.from && !value?.to) {
        return '';
    }

    const from = value?.from ? format(value.from, 'dd.MM.yyyy HH:mm') : '...';
    const to = value?.to ? format(value.to, 'dd.MM.yyyy HH:mm') : '...';
    return `${from} - ${to}`;
};

const DayPickerRangeTimeFooterExample = () => {
    const today = new Date();
    const [visibleMonth, setVisibleMonth] = useState(new Date(today.getFullYear(), today.getMonth(), 1));
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>({
        from: new Date(today.getFullYear(), today.getMonth(), 3, 9, 0),
        to: new Date(today.getFullYear(), today.getMonth(), 6, 17, 30),
    });

    return (
        <div className='max-width-350'>
            <label htmlFor='day-picker-range-time-footer'>Range with start and end times</label>
            <DayPicker
                id='day-picker-range-time-footer'
                placeholder='Please select a range'
                mode='range'
                value={selectedRange}
                onChange={setSelectedRange}
                closeOnSelect={false}
                closeOnOutsideClick={false}
                usePortal
                selectionBehavior='deferred'
                isClearable
                month={visibleMonth}
                onMonthChange={setVisibleMonth}
                renderValue={value => formatRangeDateTime(value)}
                rightSidebarClassName='padding-x-15 padding-bottom-15 padding-top-15 padding-top-0-xs padding-bottom-25-xs'
                rightSidebar={({ draftValue, setDraftValue }) => (
                    <div className='display-flex flex-column gap-15 width-150 width-100pct-xs'>
                        <div>
                            <FormLabel>Start time</FormLabel>
                            <TimePicker
                                value={getTimeValue(draftValue?.from)}
                                onChange={timeValue =>
                                    setDraftValue({
                                        from: applyTimeToDate(draftValue?.from, timeValue),
                                        to: draftValue?.to,
                                    })
                                }
                                disabled={!draftValue?.from}
                            />
                        </div>
                        <div>
                            <FormLabel>End time</FormLabel>
                            <TimePicker
                                value={getTimeValue(draftValue?.to)}
                                onChange={timeValue =>
                                    setDraftValue({
                                        from: draftValue?.from,
                                        to: applyTimeToDate(draftValue?.to, timeValue),
                                    })
                                }
                                disabled={!draftValue?.to}
                            />
                        </div>
                    </div>
                )}
                footer={({ close, apply }) => (
                    <div>
                        <div className='display-flex justify-content-between align-items-center gap-10'>
                            <Button onClick={() => setVisibleMonth(new Date(today.getFullYear(), today.getMonth(), 1))}>
                                Show today
                            </Button>
                            <ButtonToolbar>
                                <Button bsStyle='muted' onClick={close}>
                                    Cancel
                                </Button>
                                <Button bsStyle='primary' onClick={apply}>
                                    Apply
                                </Button>
                            </ButtonToolbar>
                        </div>
                    </div>
                )}
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {formatRangeDateTime(selectedRange) || 'No range selected'}
            </div>
        </div>
    );
};

export default DayPickerRangeTimeFooterExample;
```

#### HTML (html)

```html
<div class="max-width-350">
    <label for="day-picker-range-time-footer">Range with start and end times</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Please select a range" id="day-picker-range-time-footer" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="03.04.2026 09:00 - 06.04.2026 17:30">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 03.04.2026 09:00 - 06.04.2026 17:30
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Available times in a sidebar

Instead of a free-form time input, the dropdown can also render a curated list of available time slots in a sidebar.

### Example: Example 14

Date with available times

You picked: 27.03.2026 09:00

#### React (tsx)

```tsx
import { useState } from 'react';
import { format, setHours, setMinutes } from 'date-fns';

import Button from '@rio-cloud/rio-uikit/Button';
import DayPicker from '@rio-cloud/rio-uikit/DayPicker';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import SmoothScrollbars from '@rio-cloud/rio-uikit/components/smoothScrollbars/SmoothScrollbars';

const availableTimes = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30'];

const applyTimeToDate = (date: Date | undefined, timeValue: string) => {
    if (!date || !timeValue) {
        return date;
    }

    const [hours, minutes] = timeValue.split(':').map(Number);
    return setMinutes(setHours(date, hours), minutes);
};

const formatDateTime = (value: Date | undefined) => (value ? format(value, 'dd.MM.yyyy HH:mm') : '');

const DayPickerAvailableTimesSidebarExample = () => {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date(2026, 2, 27));
    const [selectedTimeValue, setSelectedTimeValue] = useState('09:00');

    const selectedDateTime = applyTimeToDate(selectedDate, selectedTimeValue);

    return (
        <div className='max-width-300'>
            <FormLabel htmlFor='day-picker-available-times-sidebar'>Date with available times</FormLabel>
            <DayPicker
                id='day-picker-available-times-sidebar'
                value={selectedDateTime}
                onChange={setSelectedDate}
                closeOnSelect={false}
                usePortal
                isClearable
                renderValue={value => formatDateTime(value)}
                rightSidebarClassName='padding-0 width-150 width-100pct-xs'
                rightSidebar={({ draftValue, setDraftValue }) => (
                    <div className='padding-y-15 padding-left-10 padding-right-5 text-center'>
                        <FormLabel className='text-center'>Available times</FormLabel>
                        <SmoothScrollbars className='height-250'>
                            <div className='display-grid grid-auto-rows grid-auto-fit-100 gap-5'>
                                {availableTimes.map(timeValue => (
                                    <div key={timeValue} className='text-center'>
                                        <Button
                                            bsStyle={timeValue === selectedTimeValue ? 'primary' : 'muted'}
                                            onClick={() => {
                                                setSelectedTimeValue(timeValue);
                                                setDraftValue(applyTimeToDate(draftValue, timeValue));
                                            }}
                                            disabled={!draftValue}
                                        >
                                            {timeValue}
                                        </Button>
                                    </div>
                                ))}
                            </div>
                        </SmoothScrollbars>
                    </div>
                )}
            />
            <div className='padding-top-5'>
                <b>You picked:</b> {selectedDateTime ? formatDateTime(selectedDateTime) : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerAvailableTimesSidebarExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-available-times-sidebar" class="display-inline-block">
        <span>Date with available times</span>
    </label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input id="day-picker-available-times-sidebar" class="form-control bg-white withClearButton" autocomplete="off" type="text" tabindex="0" value="27.03.2026 09:00">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 27.03.2026 09:00
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Multiple dates

The same dropdown shell also supports multiple independent dates and renders the current selection as a compact list in the input.

### Example: Example 15

Multiple dates

You picked: 27/03/2026

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const DayPickerMultipleInputExample = () => {
    const [selectedDates, setSelectedDates] = useState<Date[] | undefined>([new Date(2026, 2, 27)]);

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-multiple-input'>Multiple dates</label>
            <DayPicker
                id='day-picker-multiple-input'
                mode='multiple'
                value={selectedDates}
                onChange={setSelectedDates}
                isClearable
                closeOnSelect={false}
                placeholder='Select multiple dates'
            />
            <div className='padding-top-5'>
                <b>You picked:</b>{' '}
                {selectedDates?.length
                    ? selectedDates.map(date => new Intl.DateTimeFormat('en-GB').format(date)).join(', ')
                    : 'No dates selected'}
            </div>
        </div>
    );
};

export default DayPickerMultipleInputExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-multiple-input">Multiple dates</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select multiple dates" id="day-picker-multiple-input" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="27/03/2026">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 27/03/2026
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Calendar weeks

If you need ISO calendar weeks in the dropdown, enable showWeekNumber. The input still keeps the regular date display.

### Example: Example 16

Calendar weeks in dropdown

You picked: 30/03/2026

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const DayPickerCalendarWeekDropdownExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>(new Date(2026, 2, 30));

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-calendar-weeks'>Calendar weeks in dropdown</label>
            <DayPicker
                id='day-picker-calendar-weeks'
                value={selectedDay}
                onChange={setSelectedDay}
                isClearable
                placeholder='Select date'
                showWeekNumber
            />
            <div className='padding-top-5'>
                <b>You picked:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerCalendarWeekDropdownExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-calendar-weeks">Calendar weeks in dropdown</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select date" id="day-picker-calendar-weeks" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 30/03/2026
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Restricted month range

Use startMonth and endMonth to limit the dropdown to a fixed month interval. This example only allows choosing from two visible months.

### Example: Example 17

Limited to two months

You picked: 14/04/2026

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const START_MONTH = new Date(2026, 3);
const END_MONTH = new Date(2026, 4);

const DayPickerLimitedMonthRangeExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>(new Date(2026, 3, 14));

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-limited-month-range'>Limited to two months</label>
            <DayPicker
                id='day-picker-limited-month-range'
                value={selectedDay}
                onChange={setSelectedDay}
                placeholder='Select date'
                isClearable
                numberOfMonths={2}
                defaultMonth={START_MONTH}
                startMonth={START_MONTH}
                endMonth={END_MONTH}
            />
            <div className='padding-top-5'>
                <b>You picked:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerLimitedMonthRangeExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-limited-month-range">Limited to two months</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select date" id="day-picker-limited-month-range" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 14/04/2026
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Disabled days

Use disabledDays to block individual dates from being selected while keeping the normal input behavior.

### Example: Disabled: 10/04/2026, 14/04/2026, 22/04/2026

Disabled days

You picked: 12/04/2026
Disabled: 10/04/2026, 14/04/2026, 22/04/2026

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const disabledDays = [new Date(2026, 3, 10), new Date(2026, 3, 14), new Date(2026, 3, 22)];

const DayPickerDisabledDaysDropdownExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>(new Date(2026, 3, 12));

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-disabled-days'>Disabled days</label>
            <DayPicker
                id='day-picker-disabled-days'
                value={selectedDay}
                onChange={setSelectedDay}
                placeholder='Select date'
                isClearable
                defaultMonth={new Date(2026, 3)}
                disabledDays={disabledDays}
            />
            <div className='padding-top-5'>
                <b>You picked:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
            <div className='padding-top-5 text-color-dark'>
                Disabled: {disabledDays.map(date => new Intl.DateTimeFormat('en-GB').format(date)).join(', ')}
            </div>
        </div>
    );
};

export default DayPickerDisabledDaysDropdownExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-disabled-days">Disabled days</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select date" id="day-picker-disabled-days" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> 12/04/2026
    </div>
    <div class="padding-top-5 text-color-dark">Disabled: 10/04/2026, 14/04/2026, 22/04/2026</div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Hidden days

Use hiddenDays to remove matching dates from the dropdown calendar grid entirely.

### Example: Hidden: 10/05/2026, 11/05/2026, 20/05/2026

Hidden days in a month

You picked: No date selected
Hidden: 10/05/2026, 11/05/2026, 20/05/2026

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const hiddenDays = [new Date(2026, 4, 10), new Date(2026, 4, 11), new Date(2026, 4, 20)];

const DayPickerHiddenDaysDropdownExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>();

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-hidden-days'>Hidden days in a month</label>
            <DayPicker
                id='day-picker-hidden-days'
                value={selectedDay}
                onChange={setSelectedDay}
                placeholder='Select date'
                isClearable
                defaultMonth={hiddenDays[0]}
                showOutsideDays={false}
                hiddenDays={hiddenDays}
            />
            <div className='padding-top-5'>
                <b>You picked:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
            <div className='padding-top-5 text-color-dark'>
                Hidden: {hiddenDays.map(date => new Intl.DateTimeFormat('en-GB').format(date)).join(', ')}
            </div>
        </div>
    );
};

export default DayPickerHiddenDaysDropdownExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-hidden-days">Hidden days in a month</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="Select date" id="day-picker-hidden-days" class="form-control bg-white withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>You picked:</b> No date selected
    </div>
    <div class="padding-top-5 text-color-dark">Hidden: 10/05/2026, 11/05/2026, 20/05/2026</div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Filter icon for date ranges

Use iconName on the default trigger to turn a range picker into a filter control. This example switches from rioglyph-filter to rioglyph-filter-active once a complete range is selected.

### Example: Example 20

Date range filter

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const DayPickerRangeFilterIconExample = () => {
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>();

    const hasActiveFilter = !!(selectedRange?.from && selectedRange?.to);

    return (
        <div className='display-flex justify-content-end'>
            <div className='min-width-300'>
                <FormLabel htmlFor='day-picker-range-filter-icon'>Date range filter</FormLabel>
                <DayPicker
                    id='day-picker-range-filter-icon'
                    mode='range'
                    value={selectedRange}
                    onChange={setSelectedRange}
                    iconName={hasActiveFilter ? 'rioglyph-filter-active' : 'rioglyph-filter'}
                    placeholder='Filter by date range'
                    isClearable
                    usePortal
                    closeOnSelect={false}
                    numberOfMonths={2}
                />
            </div>
        </div>
    );
};

export default DayPickerRangeFilterIconExample;
```

#### HTML (html)

```html
<div class="display-flex justify-content-end">
    <div class="min-width-300">
        <label for="day-picker-range-filter-icon" class="display-inline-block">
            <span>Date range filter</span>
        </label>
        <div class="form-group">
            <div>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-filter" aria-hidden="true">
                        </span>
                    </span>
                    <div class="form-control-feedback-wrapper flex-1-1">
                        <div class="ClearableInput input-group">
                            <input placeholder="Filter by date range" id="day-picker-range-filter-icon" class="form-control bg-white cursor-pointer" autocomplete="off" type="text" readonly="" tabindex="0" value="">
                            <span class="clearButton hide">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## ISO date format

A common integration pattern is to keep the value as a date-only ISO string like 2026-05-10 and only map it to Date for the picker UI.

### Example: The demo keeps the value as a date-only ISO string and only maps it to Date for the picker.

ISO date format

ISO value: 2026-05-10
Parsed UI value: 10/05/2026
The demo keeps the value as a date-only ISO string and only maps it to Date for the picker.

#### React (tsx)

```tsx
import { useState } from 'react';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const parseDateOnlyIso = (isoDate: string | undefined) => {
    if (!isoDate) {
        return;
    }

    const [year, month, day] = isoDate.split('-').map(Number);

    if (!year || !month || !day) {
        return;
    }

    return new Date(year, month - 1, day);
};

const formatDateOnlyIso = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
};

const DayPickerIsoFormatExample = () => {
    const [isoDate, setIsoDate] = useState<string | undefined>('2026-05-10');
    const selectedDay = parseDateOnlyIso(isoDate);

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-iso-format'>ISO date format</label>
            <DayPicker
                id='day-picker-iso-format'
                value={selectedDay}
                onChange={value => {
                    setIsoDate(value ? formatDateOnlyIso(value) : undefined);
                }}
                isClearable
                dateFormat='yyyy-MM-dd'
                placeholder='yyyy-MM-dd'
            />
            <div className='padding-top-5'>
                <b>ISO value:</b> <code>{isoDate || 'undefined'}</code>
            </div>
            <div className='padding-top-5'>
                <b>Parsed UI value:</b>{' '}
                {selectedDay ? new Intl.DateTimeFormat('en-GB').format(selectedDay) : 'No date selected'}
            </div>
            <div className='padding-top-5 text-color-dark'>
                The demo keeps the value as a date-only ISO string and only maps it to <code>Date</code> for the picker.
            </div>
        </div>
    );
};

export default DayPickerIsoFormatExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-iso-format">ISO date format</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="yyyy-MM-dd" id="day-picker-iso-format" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>ISO value:</b> <code>2026-05-10</code>
    </div>
    <div class="padding-top-5">
        <b>Parsed UI value:</b> 10/05/2026
    </div>
    <div class="padding-top-5 text-color-dark">The demo keeps the value as a date-only ISO string and only maps it to <code>Date</code> for the picker.</div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Timezones and UTC payloads

Additional form elements like timezone selectors can be rendered into the dropdown from the outside. This example combines a date, time, and timezone and shows the resulting full UTC datetime string.

### Example: Example 22

Date, time and timezone

Local wall time: 2026-05-10 09:30 Europe/Berlin
UTC ISO payload: 2026-05-10T07:30:00.000Z

#### React (tsx)

```tsx
import { useRef, useState } from 'react';
import { format, isValid, parse, setHours, setMinutes } from 'date-fns';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
import TimePicker from '@rio-cloud/rio-uikit/TimePicker';

const timeZoneOptions: SelectOption[] = [
    { id: 'UTC', label: 'UTC' },
    { id: 'Europe/Berlin', label: 'Europe/Berlin' },
    { id: 'America/New_York', label: 'America/New_York' },
];

const dateTimeFormat = 'yyyy-MM-dd HH:mm';

const getTimeZoneOffset = (date: Date, timeZone: string) => {
    const parts = new Intl.DateTimeFormat('en-CA', {
        timeZone,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false,
    }).formatToParts(date);

    const partValue = (type: Intl.DateTimeFormatPartTypes) => parts.find(part => part.type === type)?.value || '00';

    const asUtcTimestamp = Date.UTC(
        Number(partValue('year')),
        Number(partValue('month')) - 1,
        Number(partValue('day')),
        Number(partValue('hour')),
        Number(partValue('minute')),
        Number(partValue('second'))
    );

    return asUtcTimestamp - date.getTime();
};

const zonedDateTimeToUtc = (date: Date | undefined, timeValue: string, timeZone: string) => {
    if (!date || !timeValue) {
        return;
    }

    const [hours, minutes] = timeValue.split(':').map(Number);
    const utcGuess = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes);
    const guessDate = new Date(utcGuess);
    const offset = getTimeZoneOffset(guessDate, timeZone);
    const utcDate = new Date(utcGuess - offset);
    const correctedOffset = getTimeZoneOffset(utcDate, timeZone);

    return correctedOffset === offset ? utcDate : new Date(utcGuess - correctedOffset);
};

const getTimeValue = (date: Date | undefined) => (date ? format(date, 'HH:mm') : '');

const applyTimeToDate = (date: Date | undefined, timeValue: string) => {
    if (!date || !timeValue) {
        return date;
    }

    const [hours, minutes] = timeValue.split(':').map(Number);
    return setMinutes(setHours(date, hours), minutes);
};

const parseDateTimeValue = (rawValue: string) => {
    const parsed = parse(rawValue, dateTimeFormat, new Date());

    if (!isValid(parsed)) {
        return;
    }

    return format(parsed, dateTimeFormat) === rawValue ? parsed : undefined;
};

const DayPickerTimeZoneExample = () => {
    const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(new Date(2026, 4, 10, 9, 30));
    const [timeZone, setTimeZone] = useState('Europe/Berlin');
    const latestParsedInputRef = useRef<Date | undefined>();

    const timeValue = getTimeValue(selectedDateTime);
    const utcDateTime = zonedDateTimeToUtc(selectedDateTime, timeValue, timeZone);
    const displayValue = selectedDateTime ? format(selectedDateTime, 'yyyy-MM-dd HH:mm') : '';

    return (
        <div className='max-width-300'>
            <FormLabel htmlFor='day-picker-time-zone'>Date, time and timezone</FormLabel>
            <DayPicker
                id='day-picker-time-zone'
                value={selectedDateTime}
                onChange={nextDate => {
                    if (!nextDate) {
                        latestParsedInputRef.current = undefined;
                        setSelectedDateTime(undefined);
                        return;
                    }

                    const latestParsedInput = latestParsedInputRef.current;
                    if (latestParsedInput && latestParsedInput.getTime() === nextDate.getTime()) {
                        latestParsedInputRef.current = undefined;
                        setSelectedDateTime(nextDate);
                        return;
                    }

                    setSelectedDateTime(applyTimeToDate(nextDate, timeValue));
                }}
                closeOnSelect={false}
                isClearable
                usePortal
                placeholder='yyyy-MM-dd HH:mm'
                parseInput={rawValue => {
                    const parsed = parseDateTimeValue(rawValue);
                    latestParsedInputRef.current = parsed;
                    return parsed;
                }}
                renderValue={value => (value ? format(value, 'yyyy-MM-dd HH:mm') : '')}
                footer={({ draftValue, setDraftValue }) => (
                    <div className='display-grid gap-15'>
                        <div>
                            <FormLabel>Time</FormLabel>
                            <TimePicker
                                value={timeValue || getTimeValue(draftValue)}
                                onChange={nextTimeValue => {
                                    const nextDraftValue = applyTimeToDate(draftValue, nextTimeValue);
                                    setSelectedDateTime(applyTimeToDate(selectedDateTime, nextTimeValue));
                                    setDraftValue(nextDraftValue);
                                }}
                                disabled={!draftValue}
                            />
                        </div>
                        <div>
                            <FormLabel>Timezone</FormLabel>
                            <Select
                                id='day-picker-time-zone-select'
                                options={timeZoneOptions}
                                value={[timeZone]}
                                onChange={option => {
                                    if (option?.id) {
                                        setTimeZone(option.id);
                                    }
                                }}
                            />
                        </div>
                    </div>
                )}
            />
            <div className='padding-top-5'>
                <b>Local wall time:</b> {selectedDateTime ? `${displayValue} ${timeZone}` : 'No date selected'}
            </div>
            <div className='padding-top-5'>
                <b>UTC ISO payload:</b> <code>{utcDateTime?.toISOString() || 'undefined'}</code>
            </div>
        </div>
    );
};

export default DayPickerTimeZoneExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-time-zone" class="display-inline-block">
        <span>Date, time and timezone</span>
    </label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="yyyy-MM-dd HH:mm" id="day-picker-time-zone" class="form-control bg-white withClearButton" autocomplete="off" type="text" tabindex="0" value="2026-05-10 09:30">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>Local wall time:</b> 2026-05-10 09:30 Europe/Berlin
    </div>
    <div class="padding-top-5">
        <b>UTC ISO payload:</b> <code>2026-05-10T07:30:00.000Z</code>
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Validation and error states

DayPicker includes the common feedback markup directly via errorMessage and warningMessage. For custom validation flows, especially manual input parsing, use onInputChange to drive the messages from outside.

### Example: Example 23

Static error styling with built-in feedback props This is an error message

Controlled error feedback with built-in message This is an error message

Live format validation with yyyy-MM-dd

#### React (tsx)

```tsx
import { useState } from 'react';
import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const validationDateFormat = 'yyyy-MM-dd';

const DayPickerValidationExample = () => {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
    const [validatedDate, setValidatedDate] = useState<Date | undefined>(new Date(2026, 2, 27));
    const [validationMessage, setValidationMessage] = useState<string | undefined>();

    return (
        <div className='min-width-300'>
            <div>
                <label htmlFor='error-1'>Static error styling with built-in feedback props</label>
                <DayPicker
                    id='error-1'
                    inputProps={{ placeholder: 'Select date' }}
                    className='margin-0 width-200'
                    errorMessage='This is an error message'
                />
            </div>

            <div className='margin-top-50'>
                <label htmlFor='error-2'>Controlled error feedback with built-in message</label>
                <DayPicker
                    id='error-2'
                    value={selectedDate}
                    onChange={setSelectedDate}
                    dateFormat={validationDateFormat}
                    inputProps={{ placeholder: 'Select date' }}
                    className='margin-0 width-200'
                    isClearable
                    closeOnSelect={false}
                    alignRight
                    errorMessage='This is an error message'
                />
            </div>

            <div className='margin-y-50'>
                <label htmlFor='error-3'>Live format validation with yyyy-MM-dd</label>
                <DayPicker
                    id='error-3'
                    value={validatedDate}
                    onChange={setValidatedDate}
                    onInputChange={(rawValue, parsedDate, isValid) => {
                        if (rawValue.trim() === '') {
                            setValidationMessage(undefined);
                            return;
                        }

                        if (!isValid) {
                            setValidationMessage('Please use yyyy-MM-dd, for example 2026-03-27.');
                            return;
                        }

                        setValidatedDate(parsedDate);
                        setValidationMessage(undefined);
                    }}
                    dateFormat={validationDateFormat}
                    inputProps={{
                        placeholder: validationDateFormat,
                    }}
                    className='margin-0 width-200'
                    isClearable
                    errorMessage={validationMessage}
                />
            </div>
        </div>
    );
};

export default DayPickerValidationExample;
```

#### HTML (html)

```html
<div class="min-width-300">
    <div>
        <label for="error-1">Static error styling with built-in feedback props</label>
        <div class="form-group has-feedback has-error margin-0 width-200">
            <div>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="form-control-feedback-wrapper flex-1-1">
                        <div class="ClearableInput input-group">
                            <input placeholder="Select date" id="error-1" class="form-control bg-white withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                            <span class="clearButton hide">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                        <span class="form-control-feedback rioglyph rioglyph-error-sign">
                        </span>
                    </div>
                </div>
                <span class="help-block white-space-normal">
                    <span>This is an error message</span>
                </span>
            </div>
        </div>
    </div>
    <div class="margin-top-50">
        <label for="error-2">Controlled error feedback with built-in message</label>
        <div class="form-group has-feedback has-error margin-0 width-200">
            <div>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="form-control-feedback-wrapper flex-1-1">
                        <div class="ClearableInput input-group">
                            <input placeholder="Select date" id="error-2" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                        <span class="form-control-feedback rioglyph rioglyph-error-sign">
                        </span>
                    </div>
                </div>
                <span class="help-block white-space-normal">
                    <span>This is an error message</span>
                </span>
            </div>
        </div>
    </div>
    <div class="margin-y-50">
        <label for="error-3">Live format validation with yyyy-MM-dd</label>
        <div class="form-group margin-0 width-200">
            <div>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="form-control-feedback-wrapper flex-1-1">
                        <div class="ClearableInput input-group">
                            <input placeholder="yyyy-MM-dd" id="error-3" class="form-control bg-white withClearButton withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## React Hook Form

The component works well with Controller by passing through name and onBlur while using the built-in feedback props for form errors.

### Example: Example 24

Delivery date

Submit

Submitted value: Nothing submitted yet

#### React (tsx)

```tsx
import { useState } from 'react';
import { isBefore, startOfDay } from 'date-fns';
import { Controller, useForm } from 'react-hook-form';

import Button from '@rio-cloud/rio-uikit/Button';
import DayPicker from '@rio-cloud/rio-uikit/DayPicker';
import Divider from '@rio-cloud/rio-uikit/Divider';
import { FormattedDate } from 'react-intl';

type FormValues = {
    deliveryDate: Date | undefined;
};

const DayPickerReactHookFormExample = () => {
    const [submittedValue, setSubmittedValue] = useState<Date | undefined>();
    const {
        control,
        handleSubmit,
        setValue,
        formState: { isSubmitting, isSubmitted },
    } = useForm<FormValues>({
        defaultValues: {
            deliveryDate: undefined,
        },
        mode: 'onBlur',
    });

    return (
        <form
            className='max-width-300'
            noValidate
            onSubmit={handleSubmit(values => {
                setSubmittedValue(values.deliveryDate);
            })}
        >
            <label htmlFor='day-picker-react-hook-form'>Delivery date</label>
            <Controller
                name='deliveryDate'
                control={control}
                rules={{
                    required: 'Please select a delivery date.',
                    validate: value =>
                        !value || !isBefore(value, startOfDay(new Date())) || 'Please select today or a future date.',
                }}
                render={({ field, fieldState }) => (
                    <DayPicker
                        id='day-picker-react-hook-form'
                        placeholder='Please select'
                        name={field.name}
                        value={field.value}
                        onChange={value => {
                            setValue('deliveryDate', value, {
                                shouldDirty: true,
                                shouldValidate: true,
                            });
                        }}
                        onBlur={field.onBlur}
                        isClearable
                        errorMessage={fieldState.isTouched || isSubmitted ? fieldState.error?.message : undefined}
                    />
                )}
            />

            <div className='display-flex gap-10'>
                <Button type='submit' bsStyle='primary' disabled={isSubmitting}>
                    Submit
                </Button>
            </div>

            <Divider />
            <div className='padding-x-10 padding-y-5'>
                <b>Submitted value:</b>{' '}
                {submittedValue ? <FormattedDate value={submittedValue} /> : 'Nothing submitted yet'}
            </div>
        </form>
    );
};

export default DayPickerReactHookFormExample;
```

#### HTML (html)

```html
<form class="max-width-300" novalidate="">
    <label for="day-picker-react-hook-form">Delivery date</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input name="deliveryDate" placeholder="Please select" id="day-picker-react-hook-form" class="form-control bg-white withInputMask" autocomplete="off" type="text" tabindex="0" value="">
                        <span class="clearButton hide">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="display-flex gap-10">
        <button type="submit" class="btn btn-primary btn-component" tabindex="0">Submit</button>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="padding-x-10 padding-y-5">
        <b>Submitted value:</b> Nothing submitted yet
    </div>
</form>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |

## Custom renderValue and parseInput

For specialized cases, you can override both how the value is shown in the input and how manual input gets parsed, without exposing the full third-party picker API.

### Example: Example 25

Custom parsing and rendering

Input accepts: yyyyMMdd
Rendered value: Fri, 27 Mar 2026

#### React (tsx)

```tsx
import { useState } from 'react';
import { format, isValid, parse } from 'date-fns';

import DayPicker from '@rio-cloud/rio-uikit/DayPicker';

const DayPickerCustomValueExample = () => {
    const [selectedDay, setSelectedDay] = useState<Date | undefined>(new Date(2026, 2, 27));

    return (
        <div className='max-width-300'>
            <label htmlFor='day-picker-custom-value'>Custom parsing and rendering</label>
            <DayPicker
                id='day-picker-custom-value'
                value={selectedDay}
                onChange={setSelectedDay}
                isClearable
                placeholder='e.g. 20260327'
                parseInput={rawValue => {
                    const parsed = parse(rawValue, 'yyyyMMdd', new Date());
                    return isValid(parsed) ? parsed : undefined;
                }}
                renderValue={value => (value ? format(value, 'EEE, dd MMM yyyy') : '')}
            />
            <div className='padding-top-5'>
                <b>Input accepts:</b> <code>yyyyMMdd</code>
            </div>
            <div className='padding-top-5'>
                <b>Rendered value:</b> {selectedDay ? format(selectedDay, 'EEE, dd MMM yyyy') : 'No date selected'}
            </div>
        </div>
    );
};

export default DayPickerCustomValueExample;
```

#### HTML (html)

```html
<div class="max-width-300">
    <label for="day-picker-custom-value">Custom parsing and rendering</label>
    <div class="form-group">
        <div>
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="form-control-feedback-wrapper flex-1-1">
                    <div class="ClearableInput input-group">
                        <input placeholder="e.g. 20260327" id="day-picker-custom-value" class="form-control bg-white withClearButton" autocomplete="off" type="text" tabindex="0" value="Fri, 27 Mar 2026">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="padding-top-5">
        <b>Input accepts:</b> <code>yyyyMMdd</code>
    </div>
    <div class="padding-top-5">
        <b>Rendered value:</b> Fri, 27 Mar 2026
    </div>
</div>
```

#### Props: CommonDayPicker props

### CommonDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded to the default input trigger. |
| name | string | — | Optional form field name forwarded to the default input trigger. |
| placeholder | string | — | Placeholder text shown in the default input trigger. |
| iconName | RioglyphIconType | 'rioglyph-calendar' | Rioglyph icon shown in the default input trigger addon. |
| dateFormat | string | — | Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting. If omitted, locale-based display is used for the input. |
| onBlur | FocusEventHandler<HTMLInputElement> | — | Called when the internal input loses focus. |
| inputProps | Omit<InputHTMLAttributes<HTMLInputElement>, 'children' \| 'value' \| 'defaultValue' \| 'onChange' \| 'size'> | — | Additional props forwarded to the default input element. Useful for attributes like readOnly, disabled, required, autoFocus, or custom ARIA labels. |
| errorMessage | string \| ReactNode | — | Shows the built-in error styling and help block below the input. |
| warningMessage | string \| ReactNode | — | Shows the built-in warning styling and help block below the input. |
| messageWhiteSpace | 'normal' \| 'nowrap' \| 'pre-line' | 'normal' | Controls white-space handling inside the built-in help block. |
| inputClassName | string | — | Additional classes for the text input element. |
| dropdownClassName | string | — | Additional classes for the dropdown container. |
| leftSidebarClassName | string | — | Additional classes for the left sidebar container. |
| rightSidebarClassName | string | — | Additional classes for the right sidebar container. |
| footerClassName | string | — | Additional classes for the footer container. |
| usePortal | boolean | false | Renders the dropdown into a dedicated react portal. |
| alignRight | boolean | false | Aligns the dropdown to the right edge of the input. |
| isClearable | boolean | false | Shows a clear button inside the input. |
| closeOnSelect | boolean | true for `selectionBehavior='immediate'`, otherwise false | Closes the dropdown after selecting a complete value. Range mode closes only after both dates are selected. |
| closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside of the trigger and dropdown. |
| selectionBehavior | 'immediate' \| 'deferred' | 'immediate' | Defines whether the value is committed immediately or only when applied explicitly. |

#### Props: SingleDayPicker props

### SingleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'single' | 'single' | Enables single-date selection. |
| value | Date | — | Controlled single selected date. |
| defaultValue | Date | — | Initial single selected date for uncontrolled usage. |
| onChange | (value: Date \| undefined, modifiers: Modifiers) => void | — | Called when the selected date changes. |
| onInputChange | (rawValue: string, parsedDate: Date \| undefined, isValid: boolean) => void | — | Called whenever the user changes the raw input value. Useful for custom validation and form-library integration. |
| parseInput | (rawValue: string, locale: string) => Date \| undefined | — | Custom parser for manual single-date input. Overrides the built-in locale/dateFormat parsing. |
| renderValue | (value: Date \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: RangeDayPicker props

### RangeDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'range' | — | Enables date-range selection. |
| value | DateRange | — | Controlled selected date range. |
| defaultValue | DateRange | — | Initial selected date range for uncontrolled usage. |
| onChange | (value: DateRange \| undefined, modifiers: Modifiers) => void | — | Called when the selected range changes. |
| renderValue | (value: DateRange \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| selectionVariant | 'default' \| 'week' \| 'month' \| 'rolling' | 'default' | Selects how a range is created when clicking a day. default uses the built-in range behavior. week selects the whole week of the clicked day. month selects the whole month of the clicked day. rolling selects a fixed-length range starting at the clicked day. |
| rollingDays | number | 7 | Fixed number of days used when selectionVariant='rolling'. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: MultipleDayPicker props

### MultipleDayPicker props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| mode | 'multiple' | — | Enables multiple independent date selection. |
| value | Date[] | — | Controlled list of selected dates. |
| defaultValue | Date[] | — | Initial selected dates for uncontrolled usage. |
| onChange | (value: Date[] \| undefined, modifiers: Modifiers) => void | — | Called when the selected dates change. |
| renderValue | (value: Date[] \| undefined, locale: string) => string | — | Custom renderer for the value shown in the input. |
| trigger | ReactNode \| ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode) | — | Replaces the default input trigger with custom trigger content. |
| leftSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the left side of the dropdown. |
| rightSidebar | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered on the right side of the dropdown. |
| footer | ReactNode \| ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode) | — | Optional content rendered below the calendar inside the dropdown. |

#### Props: DayPickerSlotRenderProps

### DayPickerSlotRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | TValue \| undefined | — | Currently committed value of the picker. |
| draftValue | TValue \| undefined | — | Current draft value while the dropdown is open. In deferred mode, this can differ from value until apply() is called. |
| setDraftValue | (value: TValue \| undefined) => void | — | Updates the current draft value from custom slot content. |
| apply | () => void | — | Commits the current draft value and closes the dropdown. |
| clear | () => void | — | Clears the current selection. |
| close | () => void | — | Closes the dropdown without necessarily committing the current draft value. |
| mode | DayPickerMode | — | Active selection mode of the picker. |
| locale | string | — | Active locale used for formatting and calendar labels. |

#### Props: DayPickerTriggerRenderProps

### DayPickerTriggerRenderProps

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | Optional id forwarded from the DayPicker props. |
| name | string | — | Optional form field name forwarded from the DayPicker props. |
| displayValue | string | — | String currently shown by the default trigger input. |
| isOpen | boolean | — | Whether the dropdown is currently open. |
| open | () => void | — | Opens the dropdown. |
| toggle | () => void | — | Toggles the dropdown open state. |