# DatePicker

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

A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.

## DatePicker

Deprecated warningThe DatePicker is no longer being further developed and is based on Moment.js, which is itself a no-longer-maintained library. Please use the new DayPicker instead. It offers a much more flexible API for dropdown composition, validation, presets, sidebars, footers, and date/time workflows.DayPicker

It can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).

> Note: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';

### Example: Example 1

Default Format: YYYY-MM-DD HH:mm

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00

No time Format: YYYY-MM-DD

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

Only month

‹ 2026 ›

Jan Feb Mar Apr
May Jun Jul Aug
Sep Oct Nov Dec

Only time

▲ 12
▼
:
▲ 00
▼
▲ AM
▼

Not closing when selecting

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

With min-width

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

ClearableInput and mandatory value

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

ClearableInput and optional value

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

DatePicker with wrapped error feedback

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

This is an error message

With clearable and error feedback

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

04:57

This is an error message

Usage of two DatePicker as a date range
From:

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

To:

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

Unspecified locale Format: MM/DD/YYYY

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

Note
Watch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines .

#### React (tsx)

```tsx
import type { Moment } from 'moment';
import { Link } from 'react-router-dom';

import DatePicker from '@rio-cloud/rio-uikit/DatePicker';
import Divider from '@rio-cloud/rio-uikit/Divider';
import { Note } from '../../../components/Note';

export default () => (
    <div>
        <div className='row margin-bottom-10'>
            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>
                <label htmlFor='1' className='display-flex flex-wrap justify-content-between'>
                    <span>Default</span>
                    <span className='text-italic'>Format: YYYY-MM-DD HH:mm</span>
                </label>
                <DatePicker
                    id='1'
                    dateFormat='YYYY-MM-DD'
                    timeFormat='hh:mm'
                    onChange={(result: Moment | string) => console.log(result)}
                />
            </div>
        </div>

        <div className='row margin-bottom-10'>
            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>
                <label htmlFor='2' className='display-flex flex-wrap justify-content-between'>
                    <span>No time</span>
                    <span className='text-italic'>Format: YYYY-MM-DD</span>
                </label>
                <DatePicker
                    id='2'
                    inputProps={{ placeholder: 'Select Date' }}
                    dateFormat='YYYY-MM-DD'
                    timeFormat={false}
                    onChange={(result: Moment | string) => console.log(result)}
                />
            </div>
            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>
                <label htmlFor='3'>Only month</label>
                <DatePicker
                    id='3'
                    inputProps={{ placeholder: 'Select Month' }}
                    dateFormat='YYYY-MM'
                    timeFormat={false}
                    onChange={(result: Moment | string) => console.log(result)}
                />
            </div>
            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>
                <label htmlFor='4'>Only time</label>
                <DatePicker
                    inputProps={{ placeholder: 'Select Time', id: '4' }}
                    dateFormat={false}
                    alignRight
                    onChange={(result: Moment | string) => console.log(result)}
                />
            </div>
        </div>

        <div className='row margin-bottom-10'>
            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>
                <label htmlFor='5'>Not closing when selecting</label>
                <DatePicker id='5' closeOnSelect={false} onChange={(result: Moment | string) => console.log(result)} />
            </div>
            <div className='col-12 col-sm-8 col-lg-6 col-xl-4'>
                <label htmlFor='6'>With min-width</label>
                <DatePicker id='6' minWidth={350} onChange={(result: Moment | string) => console.log(result)} />
            </div>
        </div>

        <div className='row margin-bottom-10'>
            <div className='col-12'>
                <label htmlFor='7'>ClearableInput and mandatory value</label>
            </div>
            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>
                <DatePicker id='7' clearableInput onChange={(result: Moment | string) => console.log(result)} />
            </div>
            <div className='col-12'>
                <label htmlFor='8'>ClearableInput and optional value</label>
            </div>
            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>
                <DatePicker
                    id='8'
                    clearableInput
                    mandatory={false}
                    onChange={(result: Moment | string) => console.log(result)}
                />
            </div>
        </div>

        <div className='margin-bottom-10 display-flex flex-wrap gap-15'>
            <div>
                <label htmlFor='rdp-error-1'>DatePicker with wrapped error feedback</label>
                <div className='form-group has-feedback has-error width-200'>
                    <DatePicker id='rdp-error-1' inputProps={{ placeholder: 'Select Date' }} className='margin-0' />
                    <span className='form-control-feedback rioglyph rioglyph-error-sign' />
                    <span className='help-block'>
                        <span>This is an error message</span>
                    </span>
                </div>
            </div>
            <div>
                <label htmlFor='rdp-error-2'>With clearable and error feedback</label>
                <div className='form-group has-feedback has-error width-200'>
                    <DatePicker
                        id='rdp-error-2'
                        value={new Date()}
                        dateFormat='YYYY-MM-DD'
                        timeFormat='hh:mm'
                        inputProps={{ placeholder: 'Select Date' }}
                        className='margin-0'
                        clearableInput
                    />
                    <span className='form-control-feedback rioglyph rioglyph-error-sign' />
                    <span className='help-block'>
                        <span>This is an error message</span>
                    </span>
                </div>
            </div>
        </div>

        <div className='h6 margin-top-25 margin-bottom-0'>Usage of two DatePicker as a date range</div>
        <div className='display-flex gap-10 max-width-400 margin-bottom-10'>
            <div className='flex-1-1-0'>
                <label htmlFor='from'>From:</label>
                <DatePicker id='from' inputProps={{ placeholder: 'Select Date' }} clearableInput />
            </div>
            <div className='flex-1-1-0'>
                <label htmlFor='to'>To:</label>
                <DatePicker id='to' inputProps={{ placeholder: 'Select Date' }} clearableInput alignRight />
            </div>
        </div>

        <Divider />
        <div className='max-width-400 margin-top-10'>
            <label htmlFor='unspecified' className='display-flex flex-wrap justify-content-between'>
                <span>Unspecified locale</span>
                <span className='text-italic'>Format: MM/DD/YYYY</span>
            </label>
            <DatePicker id='unspecified' inputProps={{ placeholder: 'Select Date' }} />
        </div>
        <Note>
            Watch out: When no locale is defined, the component falls back to the default american format, which should
            be avoided. See our <Link to='/start/guidelines/writing#date-formats'>writing guidelines</Link>.
        </Note>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="row margin-bottom-10">
        <div class="col-12 col-sm-4 col-lg-3 col-xl-2">
            <label for="1" class="display-flex flex-wrap justify-content-between">
                <span>Default</span>
                <span class="text-italic">Format: YYYY-MM-DD HH:mm</span>
            </label>
            <div class="rdt DatePicker form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="1" value="">
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="rdtTimeToggle">12:00</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row margin-bottom-10">
        <div class="col-12 col-sm-4 col-lg-3 col-xl-2">
            <label for="2" class="display-flex flex-wrap justify-content-between">
                <span>No time</span>
                <span class="text-italic">Format: YYYY-MM-DD</span>
            </label>
            <div class="rdt DatePicker form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="2" placeholder="Select Date" value="">
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-4 col-lg-3 col-xl-2">
            <label for="3">Only month</label>
            <div class="rdt DatePicker form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="3" placeholder="Select Month" value="">
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtMonths">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="2">2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                            </thead>
                        </table>
                        <table>
                            <tbody>
                                <tr>
                                    <td class="rdtMonth" data-value="0">Jan</td>
                                    <td class="rdtMonth" data-value="1">Feb</td>
                                    <td class="rdtMonth" data-value="2">Mar</td>
                                    <td class="rdtMonth" data-value="3">Apr</td>
                                </tr>
                                <tr>
                                    <td class="rdtMonth" data-value="4">May</td>
                                    <td class="rdtMonth" data-value="5">Jun</td>
                                    <td class="rdtMonth" data-value="6">Jul</td>
                                    <td class="rdtMonth" data-value="7">Aug</td>
                                </tr>
                                <tr>
                                    <td class="rdtMonth" data-value="8">Sep</td>
                                    <td class="rdtMonth" data-value="9">Oct</td>
                                    <td class="rdtMonth" data-value="10">Nov</td>
                                    <td class="rdtMonth" data-value="11">Dec</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-4 col-lg-3 col-xl-2">
            <label for="4">Only time</label>
            <div class="rdt DatePicker form-group align-right">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="4" placeholder="Select Time" value="">
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtTime">
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="rdtCounters">
                                            <div class="rdtCounter">
                                                <span class="rdtBtn">▲</span>
                                                <div class="rdtCount">12</div>
                                                <span class="rdtBtn">▼</span>
                                            </div>
                                            <div class="rdtCounterSeparator">:</div>
                                            <div class="rdtCounter">
                                                <span class="rdtBtn">▲</span>
                                                <div class="rdtCount">00</div>
                                                <span class="rdtBtn">▼</span>
                                            </div>
                                            <div class="rdtCounter">
                                                <span class="rdtBtn">▲</span>
                                                <div class="rdtCount">AM</div>
                                                <span class="rdtBtn">▼</span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row margin-bottom-10">
        <div class="col-12 col-sm-4 col-lg-3 col-xl-2">
            <label for="5">Not closing when selecting</label>
            <div class="rdt DatePicker form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="5" value="">
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-8 col-lg-6 col-xl-4">
            <label for="6">With min-width</label>
            <div class="rdt DatePicker form-group">
                <div class="input-group" style="width: 350px; max-width: 100%;">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="6" value="">
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row margin-bottom-10">
        <div class="col-12">
            <label for="7">ClearableInput and mandatory value</label>
        </div>
        <div class="col-12 col-sm-4 col-lg-3 col-xl-2">
            <div class="rdt DatePicker form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="7" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <label for="8">ClearableInput and optional value</label>
        </div>
        <div class="col-12 col-sm-4 col-lg-3 col-xl-2">
            <div class="rdt DatePicker form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="8" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-bottom-10 display-flex flex-wrap gap-15">
        <div>
            <label for="rdp-error-1">DatePicker with wrapped error feedback</label>
            <div class="form-group has-feedback has-error width-200">
                <div class="rdt DatePicker form-group margin-0">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                            </span>
                        </span>
                        <div class="ClearableInput input-group">
                            <input type="text" class="form-control" id="rdp-error-1" placeholder="Select Date" value="">
                        </div>
                    </div>
                    <div class="rdtPicker">
                        <div class="rdtDays">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="rdtPrev">
                                            <span>‹</span>
                                        </th>
                                        <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                        <th class="rdtNext">
                                            <span>›</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="dow">Su</th>
                                        <th class="dow">Mo</th>
                                        <th class="dow">Tu</th>
                                        <th class="dow">We</th>
                                        <th class="dow">Th</th>
                                        <th class="dow">Fr</th>
                                        <th class="dow">Sa</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                        <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                        <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                        <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                        <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                        <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                        <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                    </tr>
                                    <tr>
                                        <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                        <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                        <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                        <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                        <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                        <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                        <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                    </tr>
                                    <tr>
                                        <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                        <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                        <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                        <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                        <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                        <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                        <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                    </tr>
                                    <tr>
                                        <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                        <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                        <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                        <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                        <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                        <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                        <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                    </tr>
                                    <tr>
                                        <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                        <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                        <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                        <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                        <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                        <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                        <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                    </tr>
                                    <tr>
                                        <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                        <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                        <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                        <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                        <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                        <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                        <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
                <span class="help-block">
                    <span>This is an error message</span>
                </span>
            </div>
        </div>
        <div>
            <label for="rdp-error-2">With clearable and error feedback</label>
            <div class="form-group has-feedback has-error width-200">
                <div class="rdt DatePicker form-group margin-0">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                            </span>
                        </span>
                        <div class="ClearableInput input-group">
                            <input type="text" class="form-control" id="rdp-error-2" placeholder="Select Date" value="2026-04-27 04:57">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                    <div class="rdtPicker">
                        <div class="rdtDays">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="rdtPrev">
                                            <span>‹</span>
                                        </th>
                                        <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                        <th class="rdtNext">
                                            <span>›</span>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="dow">Su</th>
                                        <th class="dow">Mo</th>
                                        <th class="dow">Tu</th>
                                        <th class="dow">We</th>
                                        <th class="dow">Th</th>
                                        <th class="dow">Fr</th>
                                        <th class="dow">Sa</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                        <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                        <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                        <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                        <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                        <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                        <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                    </tr>
                                    <tr>
                                        <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                        <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                        <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                        <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                        <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                        <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                        <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                    </tr>
                                    <tr>
                                        <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                        <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                        <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                        <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                        <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                        <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                        <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                    </tr>
                                    <tr>
                                        <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                        <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                        <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                        <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                        <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                        <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                        <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                    </tr>
                                    <tr>
                                        <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                        <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtActive rdtToday">27</td>
                                        <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                        <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                        <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                        <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                        <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                    </tr>
                                    <tr>
                                        <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                        <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                        <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                        <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                        <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                        <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                        <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="7" class="rdtTimeToggle">04:57</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <span class="form-control-feedback rioglyph rioglyph-error-sign">
                </span>
                <span class="help-block">
                    <span>This is an error message</span>
                </span>
            </div>
        </div>
    </div>
    <div class="h6 margin-top-25 margin-bottom-0">Usage of two DatePicker as a date range</div>
    <div class="display-flex gap-10 max-width-400 margin-bottom-10">
        <div class="flex-1-1-0">
            <label for="from">From:</label>
            <div class="rdt DatePicker form-group">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="from" placeholder="Select Date" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-1-1-0">
            <label for="to">To:</label>
            <div class="rdt DatePicker form-group align-right">
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                        </span>
                    </span>
                    <div class="ClearableInput input-group">
                        <input type="text" class="form-control" id="to" placeholder="Select Date" value="">
                        <span class="clearButton">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                    </div>
                </div>
                <div class="rdtPicker">
                    <div class="rdtDays">
                        <table>
                            <thead>
                                <tr>
                                    <th class="rdtPrev">
                                        <span>‹</span>
                                    </th>
                                    <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                    <th class="rdtNext">
                                        <span>›</span>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="dow">Su</th>
                                    <th class="dow">Mo</th>
                                    <th class="dow">Tu</th>
                                    <th class="dow">We</th>
                                    <th class="dow">Th</th>
                                    <th class="dow">Fr</th>
                                    <th class="dow">Sa</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                    <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                    <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                    <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                    <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                    <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                    <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                </tr>
                                <tr>
                                    <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                    <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                    <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                    <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                    <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                    <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                    <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                </tr>
                                <tr>
                                    <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                    <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                    <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                    <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                    <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                    <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                    <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                </tr>
                                <tr>
                                    <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                    <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                    <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                    <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                    <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                    <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                    <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                </tr>
                                <tr>
                                    <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                    <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                    <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                    <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                    <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                    <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                    <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                </tr>
                                <tr>
                                    <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                    <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                    <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                    <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                    <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                    <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                    <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </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 class="max-width-400 margin-top-10">
        <label for="unspecified" class="display-flex flex-wrap justify-content-between">
            <span>Unspecified locale</span>
            <span class="text-italic">Format: MM/DD/YYYY</span>
        </label>
        <div class="rdt DatePicker form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                    </span>
                </span>
                <div class="ClearableInput input-group">
                    <input type="text" class="form-control" id="unspecified" placeholder="Select Date" value="">
                </div>
            </div>
            <div class="rdtPicker">
                <div class="rdtDays">
                    <table>
                        <thead>
                            <tr>
                                <th class="rdtPrev">
                                    <span>‹</span>
                                </th>
                                <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                <th class="rdtNext">
                                    <span>›</span>
                                </th>
                            </tr>
                            <tr>
                                <th class="dow">Su</th>
                                <th class="dow">Mo</th>
                                <th class="dow">Tu</th>
                                <th class="dow">We</th>
                                <th class="dow">Th</th>
                                <th class="dow">Fr</th>
                                <th class="dow">Sa</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                            </tr>
                            <tr>
                                <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                            </tr>
                            <tr>
                                <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                            </tr>
                            <tr>
                                <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                            </tr>
                            <tr>
                                <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                            </tr>
                            <tr>
                                <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
        <div>
            <span class="label label-info label-condensed label-filled">Note</span>
        </div>
        <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">Watch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our <a href="#/start/guidelines/writing#date-formats" data-discover="true">writing guidelines</a>.</div>
    </div>
</div>
```

#### Props (json)

```json
import 'moment/dist/locale/de';
```

### Example: Example 2

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

Reset

#### React (tsx)

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

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

export default () => {
    const [value, setValue] = useState<Date | null>();

    const handleReset = () => setValue(null);
    const handleDateChange = (selectedDate: Date) => setValue(selectedDate);

    const inputProps: React.HTMLProps<HTMLInputElement> = { placeholder: 'Select Date' };

    if (!value) {
        inputProps.value = '';
    }

    return (
        <div className='form-group display-flex gap-15'>
            <DatePicker className='min-width-200' inputProps={inputProps} value={value} onChange={handleDateChange} />
            <Button onClick={handleReset}>Reset</Button>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="form-group display-flex gap-15">
    <div class="rdt DatePicker form-group min-width-200">
        <div class="input-group">
            <span class="input-group-addon">
                <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                </span>
            </span>
            <div class="ClearableInput input-group">
                <input type="text" class="form-control" placeholder="Select Date" value="">
            </div>
        </div>
        <div class="rdtPicker">
            <div class="rdtDays">
                <table>
                    <thead>
                        <tr>
                            <th class="rdtPrev">
                                <span>‹</span>
                            </th>
                            <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                            <th class="rdtNext">
                                <span>›</span>
                            </th>
                        </tr>
                        <tr>
                            <th class="dow">Su</th>
                            <th class="dow">Mo</th>
                            <th class="dow">Tu</th>
                            <th class="dow">We</th>
                            <th class="dow">Th</th>
                            <th class="dow">Fr</th>
                            <th class="dow">Sa</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                            <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                            <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                            <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                            <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                            <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                            <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                        </tr>
                        <tr>
                            <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                            <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                            <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                            <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                            <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                            <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                            <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                        </tr>
                        <tr>
                            <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                            <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                            <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                            <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                            <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                            <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                            <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                        </tr>
                        <tr>
                            <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                            <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                            <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                            <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                            <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                            <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                            <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                        </tr>
                        <tr>
                            <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                            <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                            <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                            <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                            <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                            <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                            <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                        </tr>
                        <tr>
                            <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                            <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                            <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                            <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                            <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                            <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                            <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Reset</button>
</div>
```

#### Props (json)

```json
import 'moment/dist/locale/de';
```

### Example: Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)

Selects are a simple alternative for choosing dates 01 01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

January January
February
March
April
May
June
July
August
September
October
November
December

2022 2022
2023
2024
2025
2026
2027

Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)

#### React (tsx)

```tsx
import { useState } from 'react';
import { head, padStart } from 'es-toolkit/compat';

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

const START_YEAR = 2022;

type Item = {
    id: string;
    label: string;
};

const days: Item[] = [...Array(32).keys()]
    .filter(Boolean)
    .map(value => ({ id: `${value}`, label: padStart(`${value}`, 2, '0') }));

const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
].map(value => ({ id: `${value}`, label: `${value}` }));

const years: Item[] = Array.from({ length: 6 }, (_, index) => ({
    id: `${index + START_YEAR}`,
    label: `${index + START_YEAR}`,
}));

const DatePickerSelectExample = () => {
    const [selectedDay, setSelectedDay] = useState<Item>(head(days) as Item);
    const [selectedMonth, setSelectedMonth] = useState<Item>(head(months) as Item);
    const [selectedYear, setSelectedYear] = useState<Item>(head(years) as Item);

    const handleSelectDay = (value: Item | undefined) => value && setSelectedDay(value);
    const handleSelectMonth = (value: Item | undefined) => value && setSelectedMonth(value);
    const handleSelectYear = (value: Item | undefined) => value && setSelectedYear(value);

    // Note: Validation need to be done with your favorite date library like date-fns or others
    const date = new Date(Number(selectedYear.id), Number(months.indexOf(selectedMonth)), Number(selectedDay.id));

    return (
        <div>
            <label>Selects are a simple alternative for choosing dates</label>
            <div className='display-flex gap-5'>
                <Select options={days} value={[selectedDay.id]} onChange={handleSelectDay} />
                <Select
                    options={months}
                    value={[selectedMonth.id]}
                    onChange={handleSelectMonth}
                    className='min-width-150'
                />
                <Select options={years} value={[selectedYear.id]} onChange={handleSelectYear} />
            </div>
            <p className='margin-top-20 text-color-dark'>{`${date}`}</p>
        </div>
    );
};

export default DatePickerSelectExample;
```

#### HTML (html)

```html
<div>
    <label>Selects are a simple alternative for choosing dates</label>
    <div class="display-flex gap-5">
        <div class="select dropdown dropup">
            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                <span class="selected-option-text">01</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="1" data-item-index="0">
                        <span class="selected-option-dropdown-item">01</span>
                        <input type="hidden" value="1">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2" data-item-index="1">
                        <span class="selected-option-dropdown-item">02</span>
                        <input type="hidden" value="2">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="3" data-item-index="2">
                        <span class="selected-option-dropdown-item">03</span>
                        <input type="hidden" value="3">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="4" data-item-index="3">
                        <span class="selected-option-dropdown-item">04</span>
                        <input type="hidden" value="4">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="5" data-item-index="4">
                        <span class="selected-option-dropdown-item">05</span>
                        <input type="hidden" value="5">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="6" data-item-index="5">
                        <span class="selected-option-dropdown-item">06</span>
                        <input type="hidden" value="6">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="7" data-item-index="6">
                        <span class="selected-option-dropdown-item">07</span>
                        <input type="hidden" value="7">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="8" data-item-index="7">
                        <span class="selected-option-dropdown-item">08</span>
                        <input type="hidden" value="8">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="9" data-item-index="8">
                        <span class="selected-option-dropdown-item">09</span>
                        <input type="hidden" value="9">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="10" data-item-index="9">
                        <span class="selected-option-dropdown-item">10</span>
                        <input type="hidden" value="10">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="11" data-item-index="10">
                        <span class="selected-option-dropdown-item">11</span>
                        <input type="hidden" value="11">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="12" data-item-index="11">
                        <span class="selected-option-dropdown-item">12</span>
                        <input type="hidden" value="12">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="13" data-item-index="12">
                        <span class="selected-option-dropdown-item">13</span>
                        <input type="hidden" value="13">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="14" data-item-index="13">
                        <span class="selected-option-dropdown-item">14</span>
                        <input type="hidden" value="14">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="15" data-item-index="14">
                        <span class="selected-option-dropdown-item">15</span>
                        <input type="hidden" value="15">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="16" data-item-index="15">
                        <span class="selected-option-dropdown-item">16</span>
                        <input type="hidden" value="16">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="17" data-item-index="16">
                        <span class="selected-option-dropdown-item">17</span>
                        <input type="hidden" value="17">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="18" data-item-index="17">
                        <span class="selected-option-dropdown-item">18</span>
                        <input type="hidden" value="18">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="19" data-item-index="18">
                        <span class="selected-option-dropdown-item">19</span>
                        <input type="hidden" value="19">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="20" data-item-index="19">
                        <span class="selected-option-dropdown-item">20</span>
                        <input type="hidden" value="20">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="21" data-item-index="20">
                        <span class="selected-option-dropdown-item">21</span>
                        <input type="hidden" value="21">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="22" data-item-index="21">
                        <span class="selected-option-dropdown-item">22</span>
                        <input type="hidden" value="22">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="23" data-item-index="22">
                        <span class="selected-option-dropdown-item">23</span>
                        <input type="hidden" value="23">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="24" data-item-index="23">
                        <span class="selected-option-dropdown-item">24</span>
                        <input type="hidden" value="24">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="25" data-item-index="24">
                        <span class="selected-option-dropdown-item">25</span>
                        <input type="hidden" value="25">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="26" data-item-index="25">
                        <span class="selected-option-dropdown-item">26</span>
                        <input type="hidden" value="26">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="27" data-item-index="26">
                        <span class="selected-option-dropdown-item">27</span>
                        <input type="hidden" value="27">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="28" data-item-index="27">
                        <span class="selected-option-dropdown-item">28</span>
                        <input type="hidden" value="28">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="29" data-item-index="28">
                        <span class="selected-option-dropdown-item">29</span>
                        <input type="hidden" value="29">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="30" data-item-index="29">
                        <span class="selected-option-dropdown-item">30</span>
                        <input type="hidden" value="30">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="31" data-item-index="30">
                        <span class="selected-option-dropdown-item">31</span>
                        <input type="hidden" value="31">
                    </a>
                </li>
            </ul>
        </div>
        <div class="select dropdown min-width-150 dropup">
            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                <span class="selected-option-text">January</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="January" data-item-index="0">
                        <span class="selected-option-dropdown-item">January</span>
                        <input type="hidden" value="January">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="February" data-item-index="1">
                        <span class="selected-option-dropdown-item">February</span>
                        <input type="hidden" value="February">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="March" data-item-index="2">
                        <span class="selected-option-dropdown-item">March</span>
                        <input type="hidden" value="March">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="April" data-item-index="3">
                        <span class="selected-option-dropdown-item">April</span>
                        <input type="hidden" value="April">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="May" data-item-index="4">
                        <span class="selected-option-dropdown-item">May</span>
                        <input type="hidden" value="May">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="June" data-item-index="5">
                        <span class="selected-option-dropdown-item">June</span>
                        <input type="hidden" value="June">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="July" data-item-index="6">
                        <span class="selected-option-dropdown-item">July</span>
                        <input type="hidden" value="July">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="August" data-item-index="7">
                        <span class="selected-option-dropdown-item">August</span>
                        <input type="hidden" value="August">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="September" data-item-index="8">
                        <span class="selected-option-dropdown-item">September</span>
                        <input type="hidden" value="September">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="October" data-item-index="9">
                        <span class="selected-option-dropdown-item">October</span>
                        <input type="hidden" value="October">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="November" data-item-index="10">
                        <span class="selected-option-dropdown-item">November</span>
                        <input type="hidden" value="November">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="December" data-item-index="11">
                        <span class="selected-option-dropdown-item">December</span>
                        <input type="hidden" value="December">
                    </a>
                </li>
            </ul>
        </div>
        <div class="select dropdown dropup">
            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                <span class="selected-option-text">2022</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="2022" data-item-index="0">
                        <span class="selected-option-dropdown-item">2022</span>
                        <input type="hidden" value="2022">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2023" data-item-index="1">
                        <span class="selected-option-dropdown-item">2023</span>
                        <input type="hidden" value="2023">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2024" data-item-index="2">
                        <span class="selected-option-dropdown-item">2024</span>
                        <input type="hidden" value="2024">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2025" data-item-index="3">
                        <span class="selected-option-dropdown-item">2025</span>
                        <input type="hidden" value="2025">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2026" data-item-index="4">
                        <span class="selected-option-dropdown-item">2026</span>
                        <input type="hidden" value="2026">
                    </a>
                </li>
                <li class="" role="listitem">
                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="2027" data-item-index="5">
                        <span class="selected-option-dropdown-item">2027</span>
                        <input type="hidden" value="2027">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <p class="margin-top-20 text-color-dark">Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)</p>
</div>
```