npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.0 → 1.1.0 - Mend

@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (388) hide show

package/README.md +75 -40
package/dist/doc-metadata.json +1872 -0
package/dist/docs/components/accentBar.md +582 -0
package/dist/docs/components/activity.md +330 -0
package/dist/docs/components/animatedNumber.md +88 -0
package/dist/docs/components/animatedTextReveal.md +381 -0
package/dist/docs/components/animations.md +459 -0
package/dist/docs/components/appHeader.md +737 -0
package/dist/docs/components/appLayout.md +2016 -0
package/dist/docs/components/appNavigationBar.md +274 -0
package/dist/docs/components/areaCharts.md +828 -0
package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
package/dist/docs/components/assetTree.md +3223 -0
package/dist/docs/components/autosuggests.md +1177 -0
package/dist/docs/components/avatar.md +206 -0
package/dist/docs/components/banner.md +668 -0
package/dist/docs/components/barCharts.md +2785 -0
package/dist/docs/components/barList.md +517 -0
package/dist/docs/components/basicMap.md +167 -0
package/dist/docs/components/bottomSheet.md +721 -0
package/dist/docs/components/button.md +775 -0
package/dist/docs/components/buttonToolbar.md +134 -0
package/dist/docs/components/calendarStripe.md +525 -0
package/dist/docs/components/card.md +86 -0
package/dist/docs/components/carousel.md +128 -0
package/dist/docs/components/chartColors.md +716 -0
package/dist/docs/components/chartsGettingStarted.md +28 -0
package/dist/docs/components/chat.md +932 -0
package/dist/docs/components/checkbox.md +996 -0
package/dist/docs/components/clearableInput.md +806 -0
package/dist/docs/components/collapse.md +189 -0
package/dist/docs/components/composedCharts.md +424 -0
package/dist/docs/components/contentLoader.md +674 -0
package/dist/docs/components/dataTabs.md +1251 -0
package/dist/docs/components/datepickers.md +2543 -0
package/dist/docs/components/dialogs.md +2244 -0
package/dist/docs/components/divider.md +219 -0
package/dist/docs/components/dropdowns.md +17550 -0
package/dist/docs/components/editableContent.md +1127 -0
package/dist/docs/components/expander.md +970 -0
package/dist/docs/components/fade.md +836 -0
package/dist/docs/components/fadeExpander.md +180 -0
package/dist/docs/components/fadeUp.md +396 -0
package/dist/docs/components/feedback.md +758 -0
package/dist/docs/components/filePickers.md +370 -0
package/dist/docs/components/formLabel.md +251 -0
package/dist/docs/components/fullscreenMap.md +10 -0
package/dist/docs/components/groupedItemList.md +1001 -0
package/dist/docs/components/iconList.md +306 -0
package/dist/docs/components/imagePreloader.md +167 -0
package/dist/docs/components/labeledElement.md +115 -0
package/dist/docs/components/licensePlate.md +412 -0
package/dist/docs/components/lineCharts.md +2014 -0
package/dist/docs/components/listMenu.md +392 -0
package/dist/docs/components/loadMore.md +219 -0
package/dist/docs/components/mainNavigation.md +129 -0
package/dist/docs/components/mapCircle.md +93 -0
package/dist/docs/components/mapCluster.md +337 -0
package/dist/docs/components/mapContext.md +284 -0
package/dist/docs/components/mapDraggableMarker.md +150 -0
package/dist/docs/components/mapGettingStarted.md +39 -0
package/dist/docs/components/mapInfoBubble.md +135 -0
package/dist/docs/components/mapLayerGroup.md +94 -0
package/dist/docs/components/mapMarker.md +1814 -0
package/dist/docs/components/mapPolygon.md +959 -0
package/dist/docs/components/mapRoute.md +3816 -0
package/dist/docs/components/mapRouteGenerator.md +6 -0
package/dist/docs/components/mapSettings.md +1040 -0
package/dist/docs/components/mapUtils.md +132 -0
package/dist/docs/components/multiselects.md +1921 -0
package/dist/docs/components/noData.md +210 -0
package/dist/docs/components/notifications.md +314 -0
package/dist/docs/components/numbercontrol.md +706 -0
package/dist/docs/components/onboarding.md +297 -0
package/dist/docs/components/page.md +241 -0
package/dist/docs/components/pager.md +133 -0
package/dist/docs/components/pieCharts.md +1284 -0
package/dist/docs/components/popover.md +222 -0
package/dist/docs/components/position.md +50 -0
package/dist/docs/components/radialBarCharts.md +3663 -0
package/dist/docs/components/radiobutton.md +1271 -0
package/dist/docs/components/releaseNotes.md +135 -0
package/dist/docs/components/resizer.md +162 -0
package/dist/docs/components/responsiveColumnStripe.md +435 -0
package/dist/docs/components/responsiveVideo.md +71 -0
package/dist/docs/components/rioglyph.md +331 -0
package/dist/docs/components/rules.md +965 -0
package/dist/docs/components/saveableInput.md +1721 -0
package/dist/docs/components/selects.md +1993 -0
package/dist/docs/components/sidebar.md +332 -0
package/dist/docs/components/sliders.md +376 -0
package/dist/docs/components/smoothScrollbars.md +1180 -0
package/dist/docs/components/spinners.md +506 -0
package/dist/docs/components/states.md +1176 -0
package/dist/docs/components/statsWidgets.md +636 -0
package/dist/docs/components/statusBar.md +644 -0
package/dist/docs/components/stepButton.md +61 -0
package/dist/docs/components/steppedProgressBars.md +1064 -0
package/dist/docs/components/subNavigation.md +470 -0
package/dist/docs/components/supportMarker.md +115 -0
package/dist/docs/components/svgImage.md +248 -0
package/dist/docs/components/switch.md +554 -0
package/dist/docs/components/tables.md +8 -0
package/dist/docs/components/tagManager.md +476 -0
package/dist/docs/components/tags.md +785 -0
package/dist/docs/components/teaser.md +925 -0
package/dist/docs/components/timeline.md +514 -0
package/dist/docs/components/timepicker.md +262 -0
package/dist/docs/components/toggleButton.md +178 -0
package/dist/docs/components/tooltip.md +454 -0
package/dist/docs/components/virtualList.md +483 -0
package/dist/docs/foundations.md +20901 -0
package/dist/docs/start/changelog.md +439 -0
package/dist/docs/start/goodtoknow.md +14 -0
package/dist/docs/start/guidelines/color-combinations.md +678 -0
package/dist/docs/start/guidelines/custom-css.md +42 -0
package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
package/dist/docs/start/guidelines/formatting.md +587 -0
package/dist/docs/start/guidelines/iframe.md +323 -0
package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
package/dist/docs/start/guidelines/print-css.md +36 -0
package/dist/docs/start/guidelines/spinner.md +710 -0
package/dist/docs/start/guidelines/supported-browsers.md +10 -0
package/dist/docs/start/guidelines/writing.md +635 -0
package/dist/docs/start/howto.md +187 -0
package/dist/docs/start/intro.md +43 -0
package/dist/docs/start/responsiveness.md +98 -0
package/dist/docs/templates/common-table.md +1111 -0
package/dist/docs/templates/detail-views.md +942 -0
package/dist/docs/templates/expandable-details.md +228 -0
package/dist/docs/templates/feature-cards.md +549 -0
package/dist/docs/templates/form-summary.md +199 -0
package/dist/docs/templates/form-toggle.md +367 -0
package/dist/docs/templates/list-blocks.md +1021 -0
package/dist/docs/templates/loading-progress.md +109 -0
package/dist/docs/templates/options-panel.md +152 -0
package/dist/docs/templates/panel-variants.md +164 -0
package/dist/docs/templates/progress-cards.md +607 -0
package/dist/docs/templates/progress-success.md +142 -0
package/dist/docs/templates/settings-form.md +434 -0
package/dist/docs/templates/stats-blocks.md +1381 -0
package/dist/docs/templates/table-panel.md +184 -0
package/dist/docs/templates/table-row-animation.md +317 -0
package/dist/docs/templates/usage-cards.md +227 -0
package/dist/docs/utilities/deviceUtils.md +123 -0
package/dist/docs/utilities/featureToggles.md +90 -0
package/dist/docs/utilities/fuelTypeUtils.md +186 -0
package/dist/docs/utilities/routeUtils.md +138 -0
package/dist/docs/utilities/useAfterMount.md +66 -0
package/dist/docs/utilities/useAutoAnimate.md +193 -0
package/dist/docs/utilities/useAverage.md +95 -0
package/dist/docs/utilities/useClickOutside.md +61 -0
package/dist/docs/utilities/useClipboard.md +93 -0
package/dist/docs/utilities/useCount.md +178 -0
package/dist/docs/utilities/useDarkMode.md +49 -0
package/dist/docs/utilities/useDebugInfo.md +126 -0
package/dist/docs/utilities/useEffectOnce.md +58 -0
package/dist/docs/utilities/useElapsedTime.md +58 -0
package/dist/docs/utilities/useElementSize.md +71 -0
package/dist/docs/utilities/useEsc.md +58 -0
package/dist/docs/utilities/useEvent.md +64 -0
package/dist/docs/utilities/useFocusTrap.md +85 -0
package/dist/docs/utilities/useFullscreen.md +198 -0
package/dist/docs/utilities/useHover.md +55 -0
package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
package/dist/docs/utilities/useInterval.md +85 -0
package/dist/docs/utilities/useIsFocusWithin.md +114 -0
package/dist/docs/utilities/useKey.md +151 -0
package/dist/docs/utilities/useLocalStorage.md +91 -0
package/dist/docs/utilities/useLocationSuggestions.md +114 -0
package/dist/docs/utilities/useMax.md +62 -0
package/dist/docs/utilities/useMin.md +78 -0
package/dist/docs/utilities/useMutationObserver.md +113 -0
package/dist/docs/utilities/useOnScreen.md +138 -0
package/dist/docs/utilities/useOnlineStatus.md +49 -0
package/dist/docs/utilities/usePostMessage.md +117 -0
package/dist/docs/utilities/usePostMessageSender.md +257 -0
package/dist/docs/utilities/usePrevious.md +101 -0
package/dist/docs/utilities/useResizeObserver.md +151 -0
package/dist/docs/utilities/useScrollPosition.md +252 -0
package/dist/docs/utilities/useSearch.md +228 -0
package/dist/docs/utilities/useSorting.md +389 -0
package/dist/docs/utilities/useStateWithValidation.md +83 -0
package/dist/docs/utilities/useSum.md +155 -0
package/dist/docs/utilities/useTableExport.md +404 -0
package/dist/docs/utilities/useTableSelection.md +1120 -0
package/dist/docs/utilities/useTimeout.md +55 -0
package/dist/docs/utilities/useToggle.md +115 -0
package/dist/docs/utilities/useWindowResize.md +70 -0
package/dist/index.mjs +271 -0
package/dist/search-synonyms.json +134 -0
package/dist/version.json +4 -0
package/package.json +23 -19
package/bin/uikit-mcp.mjs +0 -23
package/data/pages/Components/components/accentbar.json +0 -207
package/data/pages/Components/components/activity.json +0 -87
package/data/pages/Components/components/animatednumber.json +0 -99
package/data/pages/Components/components/animations.json +0 -87
package/data/pages/Components/components/appheader.json +0 -291
package/data/pages/Components/components/applayout.json +0 -1198
package/data/pages/Components/components/appnavigationbar.json +0 -327
package/data/pages/Components/components/areacharts.json +0 -563
package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
package/data/pages/Components/components/assettree.json +0 -3080
package/data/pages/Components/components/autosuggests.json +0 -710
package/data/pages/Components/components/avatar.json +0 -157
package/data/pages/Components/components/banner.json +0 -599
package/data/pages/Components/components/barcharts.json +0 -1507
package/data/pages/Components/components/barlist.json +0 -223
package/data/pages/Components/components/basicmap.json +0 -68
package/data/pages/Components/components/bottomsheet.json +0 -601
package/data/pages/Components/components/button.json +0 -583
package/data/pages/Components/components/buttontoolbar.json +0 -63
package/data/pages/Components/components/calendarstripe.json +0 -235
package/data/pages/Components/components/card.json +0 -69
package/data/pages/Components/components/carousel.json +0 -39
package/data/pages/Components/components/chartcolors.json +0 -34
package/data/pages/Components/components/chartsgettingstarted.json +0 -32
package/data/pages/Components/components/chat.json +0 -39
package/data/pages/Components/components/checkbox.json +0 -847
package/data/pages/Components/components/clearableinput.json +0 -789
package/data/pages/Components/components/collapse.json +0 -175
package/data/pages/Components/components/composedcharts.json +0 -159
package/data/pages/Components/components/contentloader.json +0 -233
package/data/pages/Components/components/datatabs.json +0 -680
package/data/pages/Components/components/datepickers.json +0 -287
package/data/pages/Components/components/dialogs.json +0 -1492
package/data/pages/Components/components/divider.json +0 -93
package/data/pages/Components/components/dropdowns.json +0 -936
package/data/pages/Components/components/editablecontent.json +0 -1117
package/data/pages/Components/components/expander.json +0 -377
package/data/pages/Components/components/fade.json +0 -403
package/data/pages/Components/components/fadeexpander.json +0 -75
package/data/pages/Components/components/fadeup.json +0 -127
package/data/pages/Components/components/feedback.json +0 -269
package/data/pages/Components/components/filepickers.json +0 -269
package/data/pages/Components/components/formlabel.json +0 -115
package/data/pages/Components/components/fullscreenmap.json +0 -22
package/data/pages/Components/components/groupeditemlist.json +0 -323
package/data/pages/Components/components/iconlist.json +0 -45
package/data/pages/Components/components/imagepreloader.json +0 -81
package/data/pages/Components/components/labeledelement.json +0 -75
package/data/pages/Components/components/licenseplate.json +0 -69
package/data/pages/Components/components/linecharts.json +0 -987
package/data/pages/Components/components/listmenu.json +0 -313
package/data/pages/Components/components/loadmore.json +0 -175
package/data/pages/Components/components/mainnavigation.json +0 -39
package/data/pages/Components/components/mapcircle.json +0 -34
package/data/pages/Components/components/mapcluster.json +0 -51
package/data/pages/Components/components/mapcontext.json +0 -105
package/data/pages/Components/components/mapdraggablemarker.json +0 -34
package/data/pages/Components/components/mapgettingstarted.json +0 -27
package/data/pages/Components/components/mapgroup.json +0 -1198
package/data/pages/Components/components/mapinfobubble.json +0 -34
package/data/pages/Components/components/maplayergroup.json +0 -34
package/data/pages/Components/components/mapmarker.json +0 -700
package/data/pages/Components/components/mappolygon.json +0 -45
package/data/pages/Components/components/maproute.json +0 -623
package/data/pages/Components/components/maproutegenerator.json +0 -16
package/data/pages/Components/components/mapsettings.json +0 -51
package/data/pages/Components/components/maputils.json +0 -34
package/data/pages/Components/components/multiselects.json +0 -1451
package/data/pages/Components/components/nodata.json +0 -139
package/data/pages/Components/components/notifications.json +0 -65
package/data/pages/Components/components/numbercontrol.json +0 -301
package/data/pages/Components/components/onboarding.json +0 -302
package/data/pages/Components/components/page.json +0 -197
package/data/pages/Components/components/pager.json +0 -93
package/data/pages/Components/components/piecharts.json +0 -731
package/data/pages/Components/components/popover.json +0 -251
package/data/pages/Components/components/position.json +0 -69
package/data/pages/Components/components/radialbarcharts.json +0 -1304
package/data/pages/Components/components/radiobutton.json +0 -1105
package/data/pages/Components/components/releasenotes.json +0 -44
package/data/pages/Components/components/resizer.json +0 -93
package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
package/data/pages/Components/components/responsivevideo.json +0 -75
package/data/pages/Components/components/rioglyph.json +0 -93
package/data/pages/Components/components/rules.json +0 -410
package/data/pages/Components/components/saveableinput.json +0 -703
package/data/pages/Components/components/selects.json +0 -701
package/data/pages/Components/components/sidebar.json +0 -243
package/data/pages/Components/components/sliders.json +0 -235
package/data/pages/Components/components/smoothscrollbars.json +0 -335
package/data/pages/Components/components/spinners.json +0 -343
package/data/pages/Components/components/states.json +0 -1705
package/data/pages/Components/components/statswidgets.json +0 -314
package/data/pages/Components/components/statusbar.json +0 -177
package/data/pages/Components/components/stepbutton.json +0 -57
package/data/pages/Components/components/steppedprogressbars.json +0 -417
package/data/pages/Components/components/subnavigation.json +0 -107
package/data/pages/Components/components/supportmarker.json +0 -45
package/data/pages/Components/components/svgimage.json +0 -81
package/data/pages/Components/components/switch.json +0 -111
package/data/pages/Components/components/tables.json +0 -144
package/data/pages/Components/components/tagmanager.json +0 -86
package/data/pages/Components/components/tags.json +0 -146
package/data/pages/Components/components/teaser.json +0 -188
package/data/pages/Components/components/timeline.json +0 -45
package/data/pages/Components/components/timepicker.json +0 -163
package/data/pages/Components/components/togglebutton.json +0 -247
package/data/pages/Components/components/tooltip.json +0 -270
package/data/pages/Components/components/virtuallist.json +0 -175
package/data/pages/Foundations/foundations.json +0 -2475
package/data/pages/Getting-started/start/changelog.json +0 -22
package/data/pages/Getting-started/start/goodtoknow.json +0 -32
package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
package/data/pages/Getting-started/start/howto.json +0 -72
package/data/pages/Getting-started/start/intro.json +0 -37
package/data/pages/Getting-started/start/responsiveness.json +0 -52
package/data/pages/Templates/templates/common-table.json +0 -39
package/data/pages/Templates/templates/detail-views.json +0 -71
package/data/pages/Templates/templates/expandable-details.json +0 -39
package/data/pages/Templates/templates/feature-cards.json +0 -103
package/data/pages/Templates/templates/form-summary.json +0 -39
package/data/pages/Templates/templates/form-toggle.json +0 -39
package/data/pages/Templates/templates/list-blocks.json +0 -119
package/data/pages/Templates/templates/loading-progress.json +0 -39
package/data/pages/Templates/templates/options-panel.json +0 -39
package/data/pages/Templates/templates/panel-variants.json +0 -39
package/data/pages/Templates/templates/progress-cards.json +0 -71
package/data/pages/Templates/templates/progress-success.json +0 -39
package/data/pages/Templates/templates/settings-form.json +0 -39
package/data/pages/Templates/templates/stats-blocks.json +0 -135
package/data/pages/Templates/templates/table-panel.json +0 -39
package/data/pages/Templates/templates/table-row-animation.json +0 -39
package/data/pages/Templates/templates/usage-cards.json +0 -39
package/data/pages/Utilities/utilities/deviceutils.json +0 -39
package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
package/data/pages/Utilities/utilities/routeutils.json +0 -34
package/data/pages/Utilities/utilities/useaftermount.json +0 -63
package/data/pages/Utilities/utilities/useaverage.json +0 -86
package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
package/data/pages/Utilities/utilities/useclipboard.json +0 -57
package/data/pages/Utilities/utilities/usecount.json +0 -92
package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
package/data/pages/Utilities/utilities/useelementsize.json +0 -63
package/data/pages/Utilities/utilities/useesc.json +0 -57
package/data/pages/Utilities/utilities/useevent.json +0 -75
package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
package/data/pages/Utilities/utilities/usehover.json +0 -57
package/data/pages/Utilities/utilities/useinterval.json +0 -63
package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
package/data/pages/Utilities/utilities/usekey.json +0 -75
package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
package/data/pages/Utilities/utilities/usemax.json +0 -86
package/data/pages/Utilities/utilities/usemin.json +0 -86
package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
package/data/pages/Utilities/utilities/useonscreen.json +0 -63
package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
package/data/pages/Utilities/utilities/useprevious.json +0 -63
package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
package/data/pages/Utilities/utilities/usesearch.json +0 -197
package/data/pages/Utilities/utilities/usesorting.json +0 -139
package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
package/data/pages/Utilities/utilities/usesum.json +0 -86
package/data/pages/Utilities/utilities/usetableexport.json +0 -87
package/data/pages/Utilities/utilities/usetableselection.json +0 -311
package/data/pages/Utilities/utilities/usetimeout.json +0 -63
package/data/pages/Utilities/utilities/usetoggle.json +0 -75
package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
package/data/version.json +0 -4
package/docs/content-schema.md +0 -147
package/docs/navigation-inventory.json +0 -1310
package/docs/search-synonyms.json +0 -43
package/server/index.mjs +0 -268
package/server/lib/load-docs.mjs +0 -48
package/server/lib/normalise-doc.mjs +0 -220
package/server/lib/render-markdown.mjs +0 -82
package/server/lib/search-index.mjs +0 -49
package/server/lib/types.js +0 -99

package/dist/docs/components/datepickers.md ADDED Viewed

@@ -0,0 +1,2543 @@
+# DatePicker
+*Category:* Components
+*Section:* Pickers
+*Source:* https://uikit.developers.rio.cloud/#components/datepickers
+*Captured:* 2025-12-12T12:38:31.524Z
+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
+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
+DefaultFormat: YYYY-MM-DD HH:mm
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00
+No timeFormat: YYYY-MM-DD
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+Only month
+‹2025›
+JanFebMarApr
+MayJunJulAug
+SepOctNovDec
+Only time
+▲12
+▼
+:
+▲00
+▼
+▲AM
+▼
+Not closing when selecting
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+With min-width
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+ClearableInput and mandatory value
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+ClearableInput and optional value
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+DatePicker with wrapped error feedback
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+This is an error message
+With clearable and error feedback
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+01:38
+This is an error message
+Usage of two DatePicker as a date range
+From:
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+To:
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+Unspecified localeFormat: MM/DD/YYYY
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+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.
+#### Summary
+DefaultFormat: YYYY-MM-DD HH:mm
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00
+No timeFormat: YYYY-MM-DD
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+Only month
+‹2025›
+JanFebMarApr
+MayJunJulAug
+SepOctNovDec
+Only time
+▲12
+▼
+:
+▲00
+▼
+▲AM
+▼
+Not closing when selecting
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+With min-width
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+ClearableInput and mandatory value
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+ClearableInput and optional value
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+DatePicker with wrapped error feedback
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+This is an error message
+With clearable and error feedback
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+01:38
+This is an error message
+Usage of two DatePicker as a date range
+From:
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+To:
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+Unspecified localeFormat: MM/DD/YYYY
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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">2025</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                        <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                        <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                        <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                        <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                        <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                        <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                        <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                        <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                        <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                        <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                        <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                        <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                        <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                        <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                        <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                        <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                        <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                        <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                        <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                        <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                        <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                        <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                        <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                        <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                        <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                        <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                        <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                        <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                        <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                        <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                        <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                        <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                        <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                        <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                        <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="2025-12-12 01:38">
+                            <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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                        <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                        <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                        <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                        <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                        <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                        <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                        <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                        <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                        <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                        <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                        <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtActive rdtToday">12</td>
+                                        <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                        <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                        <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                        <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                        <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                        <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                        <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                        <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                        <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                        <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                        <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                        <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                        <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                        <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                        <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                        <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                        <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                        <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                        <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                        <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                        <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                        <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                        <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                        <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</td>
+                                    </tr>
+                                </tbody>
+                                <tfoot>
+                                    <tr>
+                                        <td colspan="7" class="rdtTimeToggle">01:38</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                    <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                    <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                    <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                    <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                    <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                    <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                    <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                    <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                    <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                    <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                    <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                    <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                    <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                    <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                    <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                    <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                    <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                    <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                    <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                    <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                    <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                    <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                    <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                    <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                    <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                    <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                    <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                    <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                    <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                                </tr>
+                                <tr>
+                                    <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                    <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                    <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                    <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                    <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                    <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                                <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                                <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                                <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                                <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                                <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                                <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                            </tr>
+                            <tr>
+                                <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                                <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                                <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                                <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                                <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                                <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                                <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                            </tr>
+                            <tr>
+                                <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                                <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                                <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                                <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                                <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                                <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                                <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                            </tr>
+                            <tr>
+                                <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                                <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                                <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                                <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                                <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                                <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                                <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                            </tr>
+                            <tr>
+                                <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                                <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                                <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                                <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                                <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                                <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                                <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                            </tr>
+                            <tr>
+                                <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                                <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                                <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                                <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                                <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                                <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                                <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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" data-capture-callout="true">
+        <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">writing guidelines</a>.</div>
+    </div>
+</div>
+```
+#### Props
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | An id used for the internal input element. |
+| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |
+| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |
+| onChange | (value: Moment \| string, isValid: boolean) => void | () => {} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |
+| locale | String | 'en-GB' | Locale for date format. |
+| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |
+| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |
+| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |
+| alignRight | boolean | — | Opens the picker right aligned. |
+| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of "0" means no extra width is set and it becomes 100% width of the parent. |
+| dateValidation | (date: Date \| string \| Moment) => boolean | — | Overwrites the internal date validation function in case you need to customize it. |
+| dateFormat | Boolean \| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |
+| timeFormat | Boolean \| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |
+| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |
+| inputProps | React.HTMLProps<HTMLInputElement> | — | Defines additional attributes for the input element of the component. |
+| className | String | — | Additional classes to be set on the DatePicker element. |
+### Example: Example 2
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+12:00 AM
+Reset
+#### Summary
+‹December 2025›
+SuMoTuWeThFrSa
+30123456
+78910111213
+14151617181920
+21222324252627
+28293031123
+45678910
+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="11">December 2025</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="30" data-month="10" data-year="2025" class="rdtDay rdtOld">30</td>
+                            <td data-value="1" data-month="11" data-year="2025" class="rdtDay">1</td>
+                            <td data-value="2" data-month="11" data-year="2025" class="rdtDay">2</td>
+                            <td data-value="3" data-month="11" data-year="2025" class="rdtDay">3</td>
+                            <td data-value="4" data-month="11" data-year="2025" class="rdtDay">4</td>
+                            <td data-value="5" data-month="11" data-year="2025" class="rdtDay">5</td>
+                            <td data-value="6" data-month="11" data-year="2025" class="rdtDay">6</td>
+                        </tr>
+                        <tr>
+                            <td data-value="7" data-month="11" data-year="2025" class="rdtDay">7</td>
+                            <td data-value="8" data-month="11" data-year="2025" class="rdtDay">8</td>
+                            <td data-value="9" data-month="11" data-year="2025" class="rdtDay">9</td>
+                            <td data-value="10" data-month="11" data-year="2025" class="rdtDay">10</td>
+                            <td data-value="11" data-month="11" data-year="2025" class="rdtDay">11</td>
+                            <td data-value="12" data-month="11" data-year="2025" class="rdtDay rdtToday">12</td>
+                            <td data-value="13" data-month="11" data-year="2025" class="rdtDay">13</td>
+                        </tr>
+                        <tr>
+                            <td data-value="14" data-month="11" data-year="2025" class="rdtDay">14</td>
+                            <td data-value="15" data-month="11" data-year="2025" class="rdtDay">15</td>
+                            <td data-value="16" data-month="11" data-year="2025" class="rdtDay">16</td>
+                            <td data-value="17" data-month="11" data-year="2025" class="rdtDay">17</td>
+                            <td data-value="18" data-month="11" data-year="2025" class="rdtDay">18</td>
+                            <td data-value="19" data-month="11" data-year="2025" class="rdtDay">19</td>
+                            <td data-value="20" data-month="11" data-year="2025" class="rdtDay">20</td>
+                        </tr>
+                        <tr>
+                            <td data-value="21" data-month="11" data-year="2025" class="rdtDay">21</td>
+                            <td data-value="22" data-month="11" data-year="2025" class="rdtDay">22</td>
+                            <td data-value="23" data-month="11" data-year="2025" class="rdtDay">23</td>
+                            <td data-value="24" data-month="11" data-year="2025" class="rdtDay">24</td>
+                            <td data-value="25" data-month="11" data-year="2025" class="rdtDay">25</td>
+                            <td data-value="26" data-month="11" data-year="2025" class="rdtDay">26</td>
+                            <td data-value="27" data-month="11" data-year="2025" class="rdtDay">27</td>
+                        </tr>
+                        <tr>
+                            <td data-value="28" data-month="11" data-year="2025" class="rdtDay">28</td>
+                            <td data-value="29" data-month="11" data-year="2025" class="rdtDay">29</td>
+                            <td data-value="30" data-month="11" data-year="2025" class="rdtDay">30</td>
+                            <td data-value="31" data-month="11" data-year="2025" class="rdtDay">31</td>
+                            <td data-value="1" data-month="0" data-year="2026" class="rdtDay rdtNew">1</td>
+                            <td data-value="2" data-month="0" data-year="2026" class="rdtDay rdtNew">2</td>
+                            <td data-value="3" data-month="0" data-year="2026" class="rdtDay rdtNew">3</td>
+                        </tr>
+                        <tr>
+                            <td data-value="4" data-month="0" data-year="2026" class="rdtDay rdtNew">4</td>
+                            <td data-value="5" data-month="0" data-year="2026" class="rdtDay rdtNew">5</td>
+                            <td data-value="6" data-month="0" data-year="2026" class="rdtDay rdtNew">6</td>
+                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtNew">7</td>
+                            <td data-value="8" data-month="0" data-year="2026" class="rdtDay rdtNew">8</td>
+                            <td data-value="9" data-month="0" data-year="2026" class="rdtDay rdtNew">9</td>
+                            <td data-value="10" data-month="0" data-year="2026" class="rdtDay rdtNew">10</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
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String | — | An id used for the internal input element. |
+| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |
+| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |
+| onChange | (value: Moment \| string, isValid: boolean) => void | () => {} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |
+| locale | String | 'en-GB' | Locale for date format. |
+| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |
+| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |
+| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |
+| alignRight | boolean | — | Opens the picker right aligned. |
+| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of "0" means no extra width is set and it becomes 100% width of the parent. |
+| dateValidation | (date: Date \| string \| Moment) => boolean | — | Overwrites the internal date validation function in case you need to customize it. |
+| dateFormat | Boolean \| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |
+| timeFormat | Boolean \| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |
+| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |
+| inputProps | React.HTMLProps<HTMLInputElement> | — | Defines additional attributes for the input element of the component. |
+| className | String | — | Additional classes to be set on the DatePicker element. |
+### Example: Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)
+Selects are a simple alternative for choosing dates0101
+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
+JanuaryJanuary
+February
+March
+April
+May
+June
+July
+August
+September
+October
+November
+December
+20222022
+2023
+2024
+2025
+2026
+2027
+Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)
+#### Summary
+Selects are a simple alternative for choosing dates0101
+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
+JanuaryJanuary
+February
+March
+April
+May
+June
+July
+August
+September
+October
+November
+December
+20222022
+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) => setSelectedDay(value);
+    const handleSelectMonth = (value: Item) => setSelectedMonth(value);
+    const handleSelectYear = (value: Item) => 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="clearButton hide pointer-events-none">
+                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                    </span>
+                </span>
+                <span class="caret">
+                </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="clearButton hide pointer-events-none">
+                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                    </span>
+                </span>
+                <span class="caret">
+                </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="clearButton hide pointer-events-none">
+                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                    </span>
+                </span>
+                <span class="caret">
+                </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>
+```