@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/components/dayPicker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Pickers
 *Source:* https://uikit.developers.rio.cloud/#/components/dayPicker
-*Captured:* 2026-04-20T12:54:25.419Z
+*Captured:* 2026-05-06T12:14:01.526Z
 
 DayPicker is the composable input and dropdown wrapper that should replace the legacy DatePicker. It keeps the UIKIT API small while still allowing presets, footer actions, and additional controls to be injected from the outside.
 
@@ -13,6 +13,8 @@ Use this component for form fields, filters, and composed dropdown workflows. Th
 
 ## Single day picker
 
+The default entry point wraps an input and dropdown around the calendar for the common single-date case.
+
 ### Example: Example 1
 
 Single day picker
@@ -190,6 +192,8 @@ export default DayPickerInputExample;
 
 ## Single day with dateFormat
 
+Use dateFormat when you want a migration-friendly custom input format similar to the legacyDatePicker.
+
 ### Example: Example 2
 
 Single day with custom format
@@ -367,6 +371,8 @@ export default DayPickerDateFormatExample;
 
 ## Localization
 
+Switch the locale to see how the default input formatting changes between localized date conventions.
+
 ### Example: Example 3
 
 Localized input formatting en-GB bg-BG
@@ -742,6 +748,8 @@ export default DayPickerLocalizationExample;
 
 ## Custom triggers
 
+The dropdown does not depend on an editable input. You can swap in custom triggers like icon buttons or compact labels for places with limited space.
+
 ### Example: Example 4
 
 Icon button trigger
@@ -970,6 +978,8 @@ export default DayPickerCustomTriggerExample;
 
 ## Range picker
 
+Range mode keeps the same input shell but changes the calendar selection behavior and the rendered value. It can also show two visible months for faster range selection.
+
 ### Example: Example 5
 
 Range picker
@@ -1162,6 +1172,8 @@ export default DayPickerRangeInputExample;
 
 ## Week selection
 
+Set selectionVariant='week' to select the whole week of the clicked day while keeping the same range value shape.
+
 ### Example: Weeks start on Monday. You can click a day or the calendar week number.
 
 Week selection
@@ -1360,6 +1372,8 @@ export default DayPickerWeekSelectionExample;
 
 ## Month selection
 
+Set selectionVariant='month' to select the whole month of the clicked day as one range.
+
 ### Example: Example 7
 
 Month selection
@@ -1567,6 +1581,8 @@ export default DayPickerMonthSelectionExample;
 
 ## Rolling range
 
+Set selectionVariant='rolling' with rollingDays to create a fixed-length range starting from the clicked day.
+
 ### Example: Example 8
 
 Rolling 7-day window
@@ -1759,6 +1775,8 @@ export default DayPickerRollingSelectionExample;
 
 ## Footer actions
 
+Footer actions can also select values directly, for example a Today button for single-date workflows.
+
 ### Example: Example 9
 
 Single date with Today action
@@ -1954,6 +1972,8 @@ export default DayPickerTodayFooterExample;
 
 ## Range picker with presets and footer actions
 
+Sidebar presets and footer controls are passed in from the outside. The picker keeps draft state internally, but the surrounding UI remains fully composable.
+
 ### Example: Example 10
 
 Range with presets and footer actions
@@ -2206,6 +2226,8 @@ export default DayPickerControlledRangeInputExample;
 
 ## Presets with external select
 
+The same preset ranges can be offered both inside the dropdown and through a separate Select outside the picker.
+
 ### Example: Example 11
 
 Range picker with synced presets Last 14 days Today
@@ -2415,7 +2437,7 @@ export default DayPickerPresetSelectExample;
                     </span>
                     <div class="form-control-feedback-wrapper flex-1-1">
                         <div class="ClearableInput input-group">
-                            <input placeholder="Please select a range" id="day-picker-preset-range" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="07/04/2026 - 20/04/2026">
+                            <input placeholder="Please select a range" id="day-picker-preset-range" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="23/04/2026 - 06/05/2026">
                             <span class="clearButton">
                                 <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                 </span>
@@ -2539,6 +2561,8 @@ export default DayPickerPresetSelectExample;
 
 ## Date and time footer
 
+The footer slot can host a TimePicker while renderValue shows the combined date and time in the trigger. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.
+
 ### Example: Example 12
 
 Date and time
@@ -2752,11 +2776,13 @@ export default DayPickerTimeFooterExample;
 
 ## Range with start and end times
 
+For range selection, the footer can render two independent TimePicker controls for start and end times while the trigger displays the final combined value. The examples use the existing 24-hour TimePicker; AM/PM is currently not part of the default UIKIT time input.
+
 ### Example: Example 13
 
 Range with start and end times
 
-You picked: 03.04.2026 09:00 - 06.04.2026 17:30
+You picked: 03.05.2026 09:00 - 06.05.2026 17:30
 
 #### React (tsx)
 
@@ -2889,7 +2915,7 @@ export default DayPickerRangeTimeFooterExample;
                 </span>
                 <div class="form-control-feedback-wrapper flex-1-1">
                     <div class="ClearableInput input-group">
-                        <input placeholder="Please select a range" id="day-picker-range-time-footer" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="03.04.2026 09:00 - 06.04.2026 17:30">
+                        <input placeholder="Please select a range" id="day-picker-range-time-footer" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="03.05.2026 09:00 - 06.05.2026 17:30">
                         <span class="clearButton">
                             <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                             </span>
@@ -2900,7 +2926,7 @@ export default DayPickerRangeTimeFooterExample;
         </div>
     </div>
     <div class="padding-top-5">
-        <b>You picked:</b> 03.04.2026 09:00 - 06.04.2026 17:30
+        <b>You picked:</b> 03.05.2026 09:00 - 06.05.2026 17:30
     </div>
 </div>
 ```
@@ -3015,6 +3041,8 @@ export default DayPickerRangeTimeFooterExample;
 
 ## Available times in a sidebar
 
+Instead of a free-form time input, the dropdown can also render a curated list of available time slots in a sidebar.
+
 ### Example: Example 14
 
 Date with available times
@@ -3239,6 +3267,8 @@ export default DayPickerAvailableTimesSidebarExample;
 
 ## Multiple dates
 
+The same dropdown shell also supports multiple independent dates and renders the current selection as a compact list in the input.
+
 ### Example: Example 15
 
 Multiple dates
@@ -3420,6 +3450,8 @@ export default DayPickerMultipleInputExample;
 
 ## Calendar weeks
 
+If you need ISO calendar weeks in the dropdown, enable showWeekNumber. The input still keeps the regular date display.
+
 ### Example: Example 16
 
 Calendar weeks in dropdown
@@ -3598,6 +3630,8 @@ export default DayPickerCalendarWeekDropdownExample;
 
 ## Restricted month range
 
+Use startMonth and endMonth to limit the dropdown to a fixed month interval. This example only allows choosing from two visible months.
+
 ### Example: Example 17
 
 Limited to two months
@@ -3782,6 +3816,8 @@ export default DayPickerLimitedMonthRangeExample;
 
 ## Disabled days
 
+Use disabledDays to block individual dates from being selected while keeping the normal input behavior.
+
 ### Example: Disabled: 10/04/2026, 14/04/2026, 22/04/2026
 
 Disabled days
@@ -3968,6 +4004,8 @@ export default DayPickerDisabledDaysDropdownExample;
 
 ## Hidden days
 
+Use hiddenDays to remove matching dates from the dropdown calendar grid entirely.
+
 ### Example: Hidden: 10/05/2026, 11/05/2026, 20/05/2026
 
 Hidden days in a month
@@ -4155,6 +4193,8 @@ export default DayPickerHiddenDaysDropdownExample;
 
 ## Filter icon for date ranges
 
+Use iconName on the default trigger to turn a range picker into a filter control. This example switches from rioglyph-filter to rioglyph-filter-active once a complete range is selected.
+
 ### Example: Example 20
 
 Date range filter
@@ -4337,6 +4377,8 @@ export default DayPickerRangeFilterIconExample;
 
 ## ISO date format
 
+A common integration pattern is to keep the value as a date-only ISO string like 2026-05-10 and only map it to Date for the picker UI.
+
 ### Example: The demo keeps the value as a date-only ISO string and only maps it to Date for the picker.
 
 ISO date format
@@ -4552,6 +4594,8 @@ export default DayPickerIsoFormatExample;
 
 ## Timezones and UTC payloads
 
+Additional form elements like timezone selectors can be rendered into the dropdown from the outside. This example combines a date, time, and timezone and shows the resulting full UTC datetime string.
+
 ### Example: Example 22
 
 Date, time and timezone
@@ -4869,6 +4913,8 @@ export default DayPickerTimeZoneExample;
 
 ## Validation and error states
 
+DayPicker includes the common feedback markup directly via errorMessage and warningMessage. For custom validation flows, especially manual input parsing, use onInputChange to drive the messages from outside.
+
 ### Example: Example 23
 
 Static error styling with built-in feedback props This is an error message
@@ -5147,6 +5193,8 @@ export default DayPickerValidationExample;
 
 ## React Hook Form
 
+The component works well with Controller by passing through name and onBlur while using the built-in feedback props for form errors.
+
 ### Example: Example 24
 
 Delivery date
@@ -5386,6 +5434,8 @@ export default DayPickerReactHookFormExample;
 
 ## Custom renderValue and parseInput
 
+For specialized cases, you can override both how the value is shown in the input and how manual input gets parsed, without exposing the full third-party picker API.
+
 ### Example: Example 25
 
 Custom parsing and rendering