@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/saveableInput.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#components/saveableInput
-*Captured:* 2026-01-07T12:11:20.290Z
+*Captured:* 2026-02-03T14:04:21.775Z
 
 ## SaveableInput
 
@@ -261,28 +261,30 @@ export default () => (
 </div>
 ```
 
-#### Props
+#### Props: SaveableInput
+
+### SaveableInput
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
+| placeholder | string | — | The input placeholder. |
+| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will *not* be changed for new input values. |
+| previousValue | string | — | The previous or old value shown above the input value. This value *changes* when a new input value is accepted. |
+| value | string | — | The actual input value. |
+| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |
+| errorMessage | string \| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false. |
 | hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
+| onValueChanged | (value: string, previousValue: string) => void | — | Callback function triggered when the value changes. |
 | onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
+| onEsc | () => void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
+| onEnterEdit | () => void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
+| buttonStyle | 'primary' \| 'default' | 'primary' | Defines the button style: default or primary. |
+| inputProps | HTMLAttributes<HTMLInputElement> | — | Additional HTML attributes to be set on the input element. |
+| unit | string \| React.ReactNode | — | Adds a given unit to the input. |
+| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |
+| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
+| inputClassName | string | — | Additional classes to be set on the input itself. |
+| className | string | — | Additional classes to be set on the wrapper element. |
 
 ### Example: Example 2
 
@@ -311,7 +313,7 @@ export default () => {
     };
 
     // Used to do some custom validation here...
-    const handleInputChange = (keyValue: string, inputValue: string) => {
+    const handleInputChange = (_keyValue: string, inputValue: string) => {
         setValue(inputValue);
     };
 
@@ -378,28 +380,30 @@ export default () => {
 </div>
 ```
 
-#### Props
+#### Props: SaveableInput
+
+### SaveableInput
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
+| placeholder | string | — | The input placeholder. |
+| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will *not* be changed for new input values. |
+| previousValue | string | — | The previous or old value shown above the input value. This value *changes* when a new input value is accepted. |
+| value | string | — | The actual input value. |
+| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |
+| errorMessage | string \| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false. |
 | hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
+| onValueChanged | (value: string, previousValue: string) => void | — | Callback function triggered when the value changes. |
 | onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
+| onEsc | () => void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
+| onEnterEdit | () => void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
+| buttonStyle | 'primary' \| 'default' | 'primary' | Defines the button style: default or primary. |
+| inputProps | HTMLAttributes<HTMLInputElement> | — | Additional HTML attributes to be set on the input element. |
+| unit | string \| React.ReactNode | — | Adds a given unit to the input. |
+| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |
+| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
+| inputClassName | string | — | Additional classes to be set on the input itself. |
+| className | string | — | Additional classes to be set on the wrapper element. |
 
 ### Example: Controlled SaveableInput
 
@@ -519,28 +523,30 @@ export default () => {
 </div>
 ```
 
-#### Props
+#### Props: SaveableInput
+
+### SaveableInput
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
+| placeholder | string | — | The input placeholder. |
+| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will *not* be changed for new input values. |
+| previousValue | string | — | The previous or old value shown above the input value. This value *changes* when a new input value is accepted. |
+| value | string | — | The actual input value. |
+| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |
+| errorMessage | string \| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false. |
 | hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
+| onValueChanged | (value: string, previousValue: string) => void | — | Callback function triggered when the value changes. |
 | onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
+| onEsc | () => void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
+| onEnterEdit | () => void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
+| buttonStyle | 'primary' \| 'default' | 'primary' | Defines the button style: default or primary. |
+| inputProps | HTMLAttributes<HTMLInputElement> | — | Additional HTML attributes to be set on the input element. |
+| unit | string \| React.ReactNode | — | Adds a given unit to the input. |
+| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |
+| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
+| inputClassName | string | — | Additional classes to be set on the input itself. |
+| className | string | — | Additional classes to be set on the wrapper element. |
 
 ### Example: Controlled SaveableInput with key validation
 
@@ -666,28 +672,30 @@ export default () => {
 </div>
 ```
 
-#### Props
+#### Props: SaveableInput
+
+### SaveableInput
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | String | — | The actual input value. |
-| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |
-| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
+| placeholder | string | — | The input placeholder. |
+| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will *not* be changed for new input values. |
+| previousValue | string | — | The previous or old value shown above the input value. This value *changes* when a new input value is accepted. |
+| value | string | — | The actual input value. |
+| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |
+| errorMessage | string \| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false. |
 | hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
-| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |
-| buttonStyle | string | primary | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: `rioglyph-search`. |
-| unit | String \| ReactNode | — | Adds a given unit to the input. |
-| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
-| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |
+| onValueChanged | (value: string, previousValue: string) => void | — | Callback function triggered when the value changes. |
 | onInputChange | (keyValue: string, inputValue: string) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
+| onEsc | () => void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
+| onEnterEdit | () => void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |
+| buttonStyle | 'primary' \| 'default' | 'primary' | Defines the button style: default or primary. |
+| inputProps | HTMLAttributes<HTMLInputElement> | — | Additional HTML attributes to be set on the input element. |
+| unit | string \| React.ReactNode | — | Adds a given unit to the input. |
+| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |
+| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
+| inputClassName | string | — | Additional classes to be set on the input itself. |
+| className | string | — | Additional classes to be set on the wrapper element. |
 
 ## SaveableDateInput
 
@@ -695,43 +703,43 @@ export default () => {
 
 SaveableDateInput (uncontrolled)
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
 Controlled - Stay open on invalid (default)
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
-01:11
+03:04
 
 Saved value:
 
 Controlled - With error
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
 12:00
 
@@ -741,15 +749,15 @@ Saved value:
 
 Controlled - Reset and close on invalid
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
 Saved value:
 
@@ -763,59 +771,59 @@ SepOctNovDec
 
 SaveableDateInput (disabled)
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
-1:11 PM
+3:04 PM
 
 #### Summary
 
 SaveableDateInput (uncontrolled)
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
 Controlled - Stay open on invalid (default)
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
-01:11
+03:04
 
 Saved value:
 
 Controlled - With error
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
 12:00
 
@@ -825,15 +833,15 @@ Saved value:
 
 Controlled - Reset and close on invalid
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
 Saved value:
 
@@ -847,17 +855,17 @@ SepOctNovDec
 
 SaveableDateInput (disabled)
 
-‹January 2026›
+‹February 2026›
 SuMoTuWeThFrSa
 
-28293031123
-45678910
-11121314151617
-18192021222324
 25262728293031
 1234567
+891011121314
+15161718192021
+22232425262728
+1234567
 
-1:11 PM
+3:04 PM
 
 #### React (tsx)
 
@@ -1091,7 +1099,7 @@ export default () => {
                                         <th class="rdtPrev">
                                             <span>‹</span>
                                         </th>
-                                        <th class="rdtSwitch" colspan="5" data-value="0">January 2026</th>
+                                        <th class="rdtSwitch" colspan="5" data-value="1">February 2026</th>
                                         <th class="rdtNext">
                                             <span>›</span>
                                         </th>
@@ -1108,58 +1116,58 @@ export default () => {
                                 </thead>
                                 <tbody>
                                     <tr>
-                                        <td data-value="28" data-month="11" data-year="2025" class="rdtDay rdtOld">28</td>
-                                        <td data-value="29" data-month="11" data-year="2025" class="rdtDay rdtOld">29</td>
-                                        <td data-value="30" data-month="11" data-year="2025" class="rdtDay rdtOld">30</td>
-                                        <td data-value="31" data-month="11" data-year="2025" class="rdtDay rdtOld">31</td>
-                                        <td data-value="1" data-month="0" data-year="2026" class="rdtDay">1</td>
-                                        <td data-value="2" data-month="0" data-year="2026" class="rdtDay">2</td>
-                                        <td data-value="3" data-month="0" data-year="2026" class="rdtDay">3</td>
+                                        <td data-value="25" data-month="0" data-year="2026" class="rdtDay rdtOld">25</td>
+                                        <td data-value="26" data-month="0" data-year="2026" class="rdtDay rdtOld">26</td>
+                                        <td data-value="27" data-month="0" data-year="2026" class="rdtDay rdtOld">27</td>
+                                        <td data-value="28" data-month="0" data-year="2026" class="rdtDay rdtOld">28</td>
+                                        <td data-value="29" data-month="0" data-year="2026" class="rdtDay rdtOld">29</td>
+                                        <td data-value="30" data-month="0" data-year="2026" class="rdtDay rdtOld">30</td>
+                                        <td data-value="31" data-month="0" data-year="2026" class="rdtDay rdtOld">31</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
-                                        <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
-                                        <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtToday">7</td>
-                                        <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
-                                        <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
-                                        <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
+                                        <td data-value="1" data-month="1" data-year="2026" class="rdtDay">1</td>
+                                        <td data-value="2" data-month="1" data-year="2026" class="rdtDay">2</td>
+                                        <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtToday">3</td>
+                                        <td data-value="4" data-month="1" data-year="2026" class="rdtDay">4</td>
+                                        <td data-value="5" data-month="1" data-year="2026" class="rdtDay">5</td>
+                                        <td data-value="6" data-month="1" data-year="2026" class="rdtDay">6</td>
+                                        <td data-value="7" data-month="1" data-year="2026" class="rdtDay">7</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
-                                        <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
-                                        <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                        <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
-                                        <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
-                                        <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
-                                        <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
+                                        <td data-value="8" data-month="1" data-year="2026" class="rdtDay">8</td>
+                                        <td data-value="9" data-month="1" data-year="2026" class="rdtDay">9</td>
+                                        <td data-value="10" data-month="1" data-year="2026" class="rdtDay">10</td>
+                                        <td data-value="11" data-month="1" data-year="2026" class="rdtDay">11</td>
+                                        <td data-value="12" data-month="1" data-year="2026" class="rdtDay">12</td>
+                                        <td data-value="13" data-month="1" data-year="2026" class="rdtDay">13</td>
+                                        <td data-value="14" data-month="1" data-year="2026" class="rdtDay">14</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="18" data-month="0" data-year="2026" class="rdtDay">18</td>
-                                        <td data-value="19" data-month="0" data-year="2026" class="rdtDay">19</td>
-                                        <td data-value="20" data-month="0" data-year="2026" class="rdtDay">20</td>
-                                        <td data-value="21" data-month="0" data-year="2026" class="rdtDay">21</td>
-                                        <td data-value="22" data-month="0" data-year="2026" class="rdtDay">22</td>
-                                        <td data-value="23" data-month="0" data-year="2026" class="rdtDay">23</td>
-                                        <td data-value="24" data-month="0" data-year="2026" class="rdtDay">24</td>
+                                        <td data-value="15" data-month="1" data-year="2026" class="rdtDay">15</td>
+                                        <td data-value="16" data-month="1" data-year="2026" class="rdtDay">16</td>
+                                        <td data-value="17" data-month="1" data-year="2026" class="rdtDay">17</td>
+                                        <td data-value="18" data-month="1" data-year="2026" class="rdtDay">18</td>
+                                        <td data-value="19" data-month="1" data-year="2026" class="rdtDay">19</td>
+                                        <td data-value="20" data-month="1" data-year="2026" class="rdtDay">20</td>
+                                        <td data-value="21" data-month="1" data-year="2026" class="rdtDay">21</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="25" data-month="0" data-year="2026" class="rdtDay">25</td>
-                                        <td data-value="26" data-month="0" data-year="2026" class="rdtDay">26</td>
-                                        <td data-value="27" data-month="0" data-year="2026" class="rdtDay">27</td>
-                                        <td data-value="28" data-month="0" data-year="2026" class="rdtDay">28</td>
-                                        <td data-value="29" data-month="0" data-year="2026" class="rdtDay">29</td>
-                                        <td data-value="30" data-month="0" data-year="2026" class="rdtDay">30</td>
-                                        <td data-value="31" data-month="0" data-year="2026" class="rdtDay">31</td>
+                                        <td data-value="22" data-month="1" data-year="2026" class="rdtDay">22</td>
+                                        <td data-value="23" data-month="1" data-year="2026" class="rdtDay">23</td>
+                                        <td data-value="24" data-month="1" data-year="2026" class="rdtDay">24</td>
+                                        <td data-value="25" data-month="1" data-year="2026" class="rdtDay">25</td>
+                                        <td data-value="26" data-month="1" data-year="2026" class="rdtDay">26</td>
+                                        <td data-value="27" data-month="1" data-year="2026" class="rdtDay">27</td>
+                                        <td data-value="28" data-month="1" data-year="2026" class="rdtDay">28</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="1" data-month="1" data-year="2026" class="rdtDay rdtNew">1</td>
-                                        <td data-value="2" data-month="1" data-year="2026" class="rdtDay rdtNew">2</td>
-                                        <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtNew">3</td>
-                                        <td data-value="4" data-month="1" data-year="2026" class="rdtDay rdtNew">4</td>
-                                        <td data-value="5" data-month="1" data-year="2026" class="rdtDay rdtNew">5</td>
-                                        <td data-value="6" data-month="1" data-year="2026" class="rdtDay rdtNew">6</td>
-                                        <td data-value="7" data-month="1" data-year="2026" class="rdtDay rdtNew">7</td>
+                                        <td data-value="1" data-month="2" data-year="2026" class="rdtDay rdtNew">1</td>
+                                        <td data-value="2" data-month="2" data-year="2026" class="rdtDay rdtNew">2</td>
+                                        <td data-value="3" data-month="2" data-year="2026" class="rdtDay rdtNew">3</td>
+                                        <td data-value="4" data-month="2" data-year="2026" class="rdtDay rdtNew">4</td>
+                                        <td data-value="5" data-month="2" data-year="2026" class="rdtDay rdtNew">5</td>
+                                        <td data-value="6" data-month="2" data-year="2026" class="rdtDay rdtNew">6</td>
+                                        <td data-value="7" data-month="2" data-year="2026" class="rdtDay rdtNew">7</td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -1187,7 +1195,7 @@ export default () => {
                                 </span>
                             </span>
                             <div class="ClearableInput input-group">
-                                <input type="text" class="form-control" placeholder="Enter valid date" disabled="" value="2026-01-07 01:11" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
+                                <input type="text" class="form-control" placeholder="Enter valid date" disabled="" value="2026-02-03 03:04" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
                             </div>
                         </div>
                         <div class="rdtPicker">
@@ -1198,7 +1206,7 @@ export default () => {
                                             <th class="rdtPrev">
                                                 <span>‹</span>
                                             </th>
-                                            <th class="rdtSwitch" colspan="5" data-value="0">January 2026</th>
+                                            <th class="rdtSwitch" colspan="5" data-value="1">February 2026</th>
                                             <th class="rdtNext">
                                                 <span>›</span>
                                             </th>
@@ -1215,63 +1223,63 @@ export default () => {
                                     </thead>
                                     <tbody>
                                         <tr>
-                                            <td data-value="28" data-month="11" data-year="2025" class="rdtDay rdtOld">28</td>
-                                            <td data-value="29" data-month="11" data-year="2025" class="rdtDay rdtOld">29</td>
-                                            <td data-value="30" data-month="11" data-year="2025" class="rdtDay rdtOld">30</td>
-                                            <td data-value="31" data-month="11" data-year="2025" class="rdtDay rdtOld">31</td>
-                                            <td data-value="1" data-month="0" data-year="2026" class="rdtDay">1</td>
-                                            <td data-value="2" data-month="0" data-year="2026" class="rdtDay">2</td>
-                                            <td data-value="3" data-month="0" data-year="2026" class="rdtDay">3</td>
+                                            <td data-value="25" data-month="0" data-year="2026" class="rdtDay rdtOld">25</td>
+                                            <td data-value="26" data-month="0" data-year="2026" class="rdtDay rdtOld">26</td>
+                                            <td data-value="27" data-month="0" data-year="2026" class="rdtDay rdtOld">27</td>
+                                            <td data-value="28" data-month="0" data-year="2026" class="rdtDay rdtOld">28</td>
+                                            <td data-value="29" data-month="0" data-year="2026" class="rdtDay rdtOld">29</td>
+                                            <td data-value="30" data-month="0" data-year="2026" class="rdtDay rdtOld">30</td>
+                                            <td data-value="31" data-month="0" data-year="2026" class="rdtDay rdtOld">31</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
-                                            <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
-                                            <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtActive rdtToday">7</td>
-                                            <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
-                                            <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
-                                            <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
+                                            <td data-value="1" data-month="1" data-year="2026" class="rdtDay">1</td>
+                                            <td data-value="2" data-month="1" data-year="2026" class="rdtDay">2</td>
+                                            <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtActive rdtToday">3</td>
+                                            <td data-value="4" data-month="1" data-year="2026" class="rdtDay">4</td>
+                                            <td data-value="5" data-month="1" data-year="2026" class="rdtDay">5</td>
+                                            <td data-value="6" data-month="1" data-year="2026" class="rdtDay">6</td>
+                                            <td data-value="7" data-month="1" data-year="2026" class="rdtDay">7</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
-                                            <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
-                                            <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
-                                            <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
-                                            <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
-                                            <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
+                                            <td data-value="8" data-month="1" data-year="2026" class="rdtDay">8</td>
+                                            <td data-value="9" data-month="1" data-year="2026" class="rdtDay">9</td>
+                                            <td data-value="10" data-month="1" data-year="2026" class="rdtDay">10</td>
+                                            <td data-value="11" data-month="1" data-year="2026" class="rdtDay">11</td>
+                                            <td data-value="12" data-month="1" data-year="2026" class="rdtDay">12</td>
+                                            <td data-value="13" data-month="1" data-year="2026" class="rdtDay">13</td>
+                                            <td data-value="14" data-month="1" data-year="2026" class="rdtDay">14</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="18" data-month="0" data-year="2026" class="rdtDay">18</td>
-                                            <td data-value="19" data-month="0" data-year="2026" class="rdtDay">19</td>
-                                            <td data-value="20" data-month="0" data-year="2026" class="rdtDay">20</td>
-                                            <td data-value="21" data-month="0" data-year="2026" class="rdtDay">21</td>
-                                            <td data-value="22" data-month="0" data-year="2026" class="rdtDay">22</td>
-                                            <td data-value="23" data-month="0" data-year="2026" class="rdtDay">23</td>
-                                            <td data-value="24" data-month="0" data-year="2026" class="rdtDay">24</td>
+                                            <td data-value="15" data-month="1" data-year="2026" class="rdtDay">15</td>
+                                            <td data-value="16" data-month="1" data-year="2026" class="rdtDay">16</td>
+                                            <td data-value="17" data-month="1" data-year="2026" class="rdtDay">17</td>
+                                            <td data-value="18" data-month="1" data-year="2026" class="rdtDay">18</td>
+                                            <td data-value="19" data-month="1" data-year="2026" class="rdtDay">19</td>
+                                            <td data-value="20" data-month="1" data-year="2026" class="rdtDay">20</td>
+                                            <td data-value="21" data-month="1" data-year="2026" class="rdtDay">21</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="25" data-month="0" data-year="2026" class="rdtDay">25</td>
-                                            <td data-value="26" data-month="0" data-year="2026" class="rdtDay">26</td>
-                                            <td data-value="27" data-month="0" data-year="2026" class="rdtDay">27</td>
-                                            <td data-value="28" data-month="0" data-year="2026" class="rdtDay">28</td>
-                                            <td data-value="29" data-month="0" data-year="2026" class="rdtDay">29</td>
-                                            <td data-value="30" data-month="0" data-year="2026" class="rdtDay">30</td>
-                                            <td data-value="31" data-month="0" data-year="2026" class="rdtDay">31</td>
+                                            <td data-value="22" data-month="1" data-year="2026" class="rdtDay">22</td>
+                                            <td data-value="23" data-month="1" data-year="2026" class="rdtDay">23</td>
+                                            <td data-value="24" data-month="1" data-year="2026" class="rdtDay">24</td>
+                                            <td data-value="25" data-month="1" data-year="2026" class="rdtDay">25</td>
+                                            <td data-value="26" data-month="1" data-year="2026" class="rdtDay">26</td>
+                                            <td data-value="27" data-month="1" data-year="2026" class="rdtDay">27</td>
+                                            <td data-value="28" data-month="1" data-year="2026" class="rdtDay">28</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="1" data-month="1" data-year="2026" class="rdtDay rdtNew">1</td>
-                                            <td data-value="2" data-month="1" data-year="2026" class="rdtDay rdtNew">2</td>
-                                            <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtNew">3</td>
-                                            <td data-value="4" data-month="1" data-year="2026" class="rdtDay rdtNew">4</td>
-                                            <td data-value="5" data-month="1" data-year="2026" class="rdtDay rdtNew">5</td>
-                                            <td data-value="6" data-month="1" data-year="2026" class="rdtDay rdtNew">6</td>
-                                            <td data-value="7" data-month="1" data-year="2026" class="rdtDay rdtNew">7</td>
+                                            <td data-value="1" data-month="2" data-year="2026" class="rdtDay rdtNew">1</td>
+                                            <td data-value="2" data-month="2" data-year="2026" class="rdtDay rdtNew">2</td>
+                                            <td data-value="3" data-month="2" data-year="2026" class="rdtDay rdtNew">3</td>
+                                            <td data-value="4" data-month="2" data-year="2026" class="rdtDay rdtNew">4</td>
+                                            <td data-value="5" data-month="2" data-year="2026" class="rdtDay rdtNew">5</td>
+                                            <td data-value="6" data-month="2" data-year="2026" class="rdtDay rdtNew">6</td>
+                                            <td data-value="7" data-month="2" data-year="2026" class="rdtDay rdtNew">7</td>
                                         </tr>
                                     </tbody>
                                     <tfoot>
                                         <tr>
-                                            <td colspan="7" class="rdtTimeToggle">01:11</td>
+                                            <td colspan="7" class="rdtTimeToggle">03:04</td>
                                         </tr>
                                     </tfoot>
                                 </table>
@@ -1314,7 +1322,7 @@ export default () => {
                                             <th class="rdtPrev">
                                                 <span>‹</span>
                                             </th>
-                                            <th class="rdtSwitch" colspan="5" data-value="0">January 2026</th>
+                                            <th class="rdtSwitch" colspan="5" data-value="1">February 2026</th>
                                             <th class="rdtNext">
                                                 <span>›</span>
                                             </th>
@@ -1331,58 +1339,58 @@ export default () => {
                                     </thead>
                                     <tbody>
                                         <tr>
-                                            <td data-value="28" data-month="11" data-year="2025" class="rdtDay rdtOld">28</td>
-                                            <td data-value="29" data-month="11" data-year="2025" class="rdtDay rdtOld">29</td>
-                                            <td data-value="30" data-month="11" data-year="2025" class="rdtDay rdtOld">30</td>
-                                            <td data-value="31" data-month="11" data-year="2025" class="rdtDay rdtOld">31</td>
-                                            <td data-value="1" data-month="0" data-year="2026" class="rdtDay">1</td>
-                                            <td data-value="2" data-month="0" data-year="2026" class="rdtDay">2</td>
-                                            <td data-value="3" data-month="0" data-year="2026" class="rdtDay">3</td>
+                                            <td data-value="25" data-month="0" data-year="2026" class="rdtDay rdtOld">25</td>
+                                            <td data-value="26" data-month="0" data-year="2026" class="rdtDay rdtOld">26</td>
+                                            <td data-value="27" data-month="0" data-year="2026" class="rdtDay rdtOld">27</td>
+                                            <td data-value="28" data-month="0" data-year="2026" class="rdtDay rdtOld">28</td>
+                                            <td data-value="29" data-month="0" data-year="2026" class="rdtDay rdtOld">29</td>
+                                            <td data-value="30" data-month="0" data-year="2026" class="rdtDay rdtOld">30</td>
+                                            <td data-value="31" data-month="0" data-year="2026" class="rdtDay rdtOld">31</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
-                                            <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
-                                            <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtToday">7</td>
-                                            <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
-                                            <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
-                                            <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
+                                            <td data-value="1" data-month="1" data-year="2026" class="rdtDay">1</td>
+                                            <td data-value="2" data-month="1" data-year="2026" class="rdtDay">2</td>
+                                            <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtToday">3</td>
+                                            <td data-value="4" data-month="1" data-year="2026" class="rdtDay">4</td>
+                                            <td data-value="5" data-month="1" data-year="2026" class="rdtDay">5</td>
+                                            <td data-value="6" data-month="1" data-year="2026" class="rdtDay">6</td>
+                                            <td data-value="7" data-month="1" data-year="2026" class="rdtDay">7</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
-                                            <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
-                                            <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
-                                            <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
-                                            <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
-                                            <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
+                                            <td data-value="8" data-month="1" data-year="2026" class="rdtDay">8</td>
+                                            <td data-value="9" data-month="1" data-year="2026" class="rdtDay">9</td>
+                                            <td data-value="10" data-month="1" data-year="2026" class="rdtDay">10</td>
+                                            <td data-value="11" data-month="1" data-year="2026" class="rdtDay">11</td>
+                                            <td data-value="12" data-month="1" data-year="2026" class="rdtDay">12</td>
+                                            <td data-value="13" data-month="1" data-year="2026" class="rdtDay">13</td>
+                                            <td data-value="14" data-month="1" data-year="2026" class="rdtDay">14</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="18" data-month="0" data-year="2026" class="rdtDay">18</td>
-                                            <td data-value="19" data-month="0" data-year="2026" class="rdtDay">19</td>
-                                            <td data-value="20" data-month="0" data-year="2026" class="rdtDay">20</td>
-                                            <td data-value="21" data-month="0" data-year="2026" class="rdtDay">21</td>
-                                            <td data-value="22" data-month="0" data-year="2026" class="rdtDay">22</td>
-                                            <td data-value="23" data-month="0" data-year="2026" class="rdtDay">23</td>
-                                            <td data-value="24" data-month="0" data-year="2026" class="rdtDay">24</td>
+                                            <td data-value="15" data-month="1" data-year="2026" class="rdtDay">15</td>
+                                            <td data-value="16" data-month="1" data-year="2026" class="rdtDay">16</td>
+                                            <td data-value="17" data-month="1" data-year="2026" class="rdtDay">17</td>
+                                            <td data-value="18" data-month="1" data-year="2026" class="rdtDay">18</td>
+                                            <td data-value="19" data-month="1" data-year="2026" class="rdtDay">19</td>
+                                            <td data-value="20" data-month="1" data-year="2026" class="rdtDay">20</td>
+                                            <td data-value="21" data-month="1" data-year="2026" class="rdtDay">21</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="25" data-month="0" data-year="2026" class="rdtDay">25</td>
-                                            <td data-value="26" data-month="0" data-year="2026" class="rdtDay">26</td>
-                                            <td data-value="27" data-month="0" data-year="2026" class="rdtDay">27</td>
-                                            <td data-value="28" data-month="0" data-year="2026" class="rdtDay">28</td>
-                                            <td data-value="29" data-month="0" data-year="2026" class="rdtDay">29</td>
-                                            <td data-value="30" data-month="0" data-year="2026" class="rdtDay">30</td>
-                                            <td data-value="31" data-month="0" data-year="2026" class="rdtDay">31</td>
+                                            <td data-value="22" data-month="1" data-year="2026" class="rdtDay">22</td>
+                                            <td data-value="23" data-month="1" data-year="2026" class="rdtDay">23</td>
+                                            <td data-value="24" data-month="1" data-year="2026" class="rdtDay">24</td>
+                                            <td data-value="25" data-month="1" data-year="2026" class="rdtDay">25</td>
+                                            <td data-value="26" data-month="1" data-year="2026" class="rdtDay">26</td>
+                                            <td data-value="27" data-month="1" data-year="2026" class="rdtDay">27</td>
+                                            <td data-value="28" data-month="1" data-year="2026" class="rdtDay">28</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="1" data-month="1" data-year="2026" class="rdtDay rdtNew">1</td>
-                                            <td data-value="2" data-month="1" data-year="2026" class="rdtDay rdtNew">2</td>
-                                            <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtNew">3</td>
-                                            <td data-value="4" data-month="1" data-year="2026" class="rdtDay rdtNew">4</td>
-                                            <td data-value="5" data-month="1" data-year="2026" class="rdtDay rdtNew">5</td>
-                                            <td data-value="6" data-month="1" data-year="2026" class="rdtDay rdtNew">6</td>
-                                            <td data-value="7" data-month="1" data-year="2026" class="rdtDay rdtNew">7</td>
+                                            <td data-value="1" data-month="2" data-year="2026" class="rdtDay rdtNew">1</td>
+                                            <td data-value="2" data-month="2" data-year="2026" class="rdtDay rdtNew">2</td>
+                                            <td data-value="3" data-month="2" data-year="2026" class="rdtDay rdtNew">3</td>
+                                            <td data-value="4" data-month="2" data-year="2026" class="rdtDay rdtNew">4</td>
+                                            <td data-value="5" data-month="2" data-year="2026" class="rdtDay rdtNew">5</td>
+                                            <td data-value="6" data-month="2" data-year="2026" class="rdtDay rdtNew">6</td>
+                                            <td data-value="7" data-month="2" data-year="2026" class="rdtDay rdtNew">7</td>
                                         </tr>
                                     </tbody>
                                     <tfoot>
@@ -1433,7 +1441,7 @@ export default () => {
                                             <th class="rdtPrev">
                                                 <span>‹</span>
                                             </th>
-                                            <th class="rdtSwitch" colspan="5" data-value="0">January 2026</th>
+                                            <th class="rdtSwitch" colspan="5" data-value="1">February 2026</th>
                                             <th class="rdtNext">
                                                 <span>›</span>
                                             </th>
@@ -1450,58 +1458,58 @@ export default () => {
                                     </thead>
                                     <tbody>
                                         <tr>
-                                            <td data-value="28" data-month="11" data-year="2025" class="rdtDay rdtOld">28</td>
-                                            <td data-value="29" data-month="11" data-year="2025" class="rdtDay rdtOld">29</td>
-                                            <td data-value="30" data-month="11" data-year="2025" class="rdtDay rdtOld">30</td>
-                                            <td data-value="31" data-month="11" data-year="2025" class="rdtDay rdtOld">31</td>
-                                            <td data-value="1" data-month="0" data-year="2026" class="rdtDay">1</td>
-                                            <td data-value="2" data-month="0" data-year="2026" class="rdtDay">2</td>
-                                            <td data-value="3" data-month="0" data-year="2026" class="rdtDay">3</td>
+                                            <td data-value="25" data-month="0" data-year="2026" class="rdtDay rdtOld">25</td>
+                                            <td data-value="26" data-month="0" data-year="2026" class="rdtDay rdtOld">26</td>
+                                            <td data-value="27" data-month="0" data-year="2026" class="rdtDay rdtOld">27</td>
+                                            <td data-value="28" data-month="0" data-year="2026" class="rdtDay rdtOld">28</td>
+                                            <td data-value="29" data-month="0" data-year="2026" class="rdtDay rdtOld">29</td>
+                                            <td data-value="30" data-month="0" data-year="2026" class="rdtDay rdtOld">30</td>
+                                            <td data-value="31" data-month="0" data-year="2026" class="rdtDay rdtOld">31</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
-                                            <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
-                                            <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                            <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtToday">7</td>
-                                            <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
-                                            <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
-                                            <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
+                                            <td data-value="1" data-month="1" data-year="2026" class="rdtDay">1</td>
+                                            <td data-value="2" data-month="1" data-year="2026" class="rdtDay">2</td>
+                                            <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtToday">3</td>
+                                            <td data-value="4" data-month="1" data-year="2026" class="rdtDay">4</td>
+                                            <td data-value="5" data-month="1" data-year="2026" class="rdtDay">5</td>
+                                            <td data-value="6" data-month="1" data-year="2026" class="rdtDay">6</td>
+                                            <td data-value="7" data-month="1" data-year="2026" class="rdtDay">7</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
-                                            <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
-                                            <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                            <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
-                                            <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
-                                            <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
-                                            <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
+                                            <td data-value="8" data-month="1" data-year="2026" class="rdtDay">8</td>
+                                            <td data-value="9" data-month="1" data-year="2026" class="rdtDay">9</td>
+                                            <td data-value="10" data-month="1" data-year="2026" class="rdtDay">10</td>
+                                            <td data-value="11" data-month="1" data-year="2026" class="rdtDay">11</td>
+                                            <td data-value="12" data-month="1" data-year="2026" class="rdtDay">12</td>
+                                            <td data-value="13" data-month="1" data-year="2026" class="rdtDay">13</td>
+                                            <td data-value="14" data-month="1" data-year="2026" class="rdtDay">14</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="18" data-month="0" data-year="2026" class="rdtDay">18</td>
-                                            <td data-value="19" data-month="0" data-year="2026" class="rdtDay">19</td>
-                                            <td data-value="20" data-month="0" data-year="2026" class="rdtDay">20</td>
-                                            <td data-value="21" data-month="0" data-year="2026" class="rdtDay">21</td>
-                                            <td data-value="22" data-month="0" data-year="2026" class="rdtDay">22</td>
-                                            <td data-value="23" data-month="0" data-year="2026" class="rdtDay">23</td>
-                                            <td data-value="24" data-month="0" data-year="2026" class="rdtDay">24</td>
+                                            <td data-value="15" data-month="1" data-year="2026" class="rdtDay">15</td>
+                                            <td data-value="16" data-month="1" data-year="2026" class="rdtDay">16</td>
+                                            <td data-value="17" data-month="1" data-year="2026" class="rdtDay">17</td>
+                                            <td data-value="18" data-month="1" data-year="2026" class="rdtDay">18</td>
+                                            <td data-value="19" data-month="1" data-year="2026" class="rdtDay">19</td>
+                                            <td data-value="20" data-month="1" data-year="2026" class="rdtDay">20</td>
+                                            <td data-value="21" data-month="1" data-year="2026" class="rdtDay">21</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="25" data-month="0" data-year="2026" class="rdtDay">25</td>
-                                            <td data-value="26" data-month="0" data-year="2026" class="rdtDay">26</td>
-                                            <td data-value="27" data-month="0" data-year="2026" class="rdtDay">27</td>
-                                            <td data-value="28" data-month="0" data-year="2026" class="rdtDay">28</td>
-                                            <td data-value="29" data-month="0" data-year="2026" class="rdtDay">29</td>
-                                            <td data-value="30" data-month="0" data-year="2026" class="rdtDay">30</td>
-                                            <td data-value="31" data-month="0" data-year="2026" class="rdtDay">31</td>
+                                            <td data-value="22" data-month="1" data-year="2026" class="rdtDay">22</td>
+                                            <td data-value="23" data-month="1" data-year="2026" class="rdtDay">23</td>
+                                            <td data-value="24" data-month="1" data-year="2026" class="rdtDay">24</td>
+                                            <td data-value="25" data-month="1" data-year="2026" class="rdtDay">25</td>
+                                            <td data-value="26" data-month="1" data-year="2026" class="rdtDay">26</td>
+                                            <td data-value="27" data-month="1" data-year="2026" class="rdtDay">27</td>
+                                            <td data-value="28" data-month="1" data-year="2026" class="rdtDay">28</td>
                                         </tr>
                                         <tr>
-                                            <td data-value="1" data-month="1" data-year="2026" class="rdtDay rdtNew">1</td>
-                                            <td data-value="2" data-month="1" data-year="2026" class="rdtDay rdtNew">2</td>
-                                            <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtNew">3</td>
-                                            <td data-value="4" data-month="1" data-year="2026" class="rdtDay rdtNew">4</td>
-                                            <td data-value="5" data-month="1" data-year="2026" class="rdtDay rdtNew">5</td>
-                                            <td data-value="6" data-month="1" data-year="2026" class="rdtDay rdtNew">6</td>
-                                            <td data-value="7" data-month="1" data-year="2026" class="rdtDay rdtNew">7</td>
+                                            <td data-value="1" data-month="2" data-year="2026" class="rdtDay rdtNew">1</td>
+                                            <td data-value="2" data-month="2" data-year="2026" class="rdtDay rdtNew">2</td>
+                                            <td data-value="3" data-month="2" data-year="2026" class="rdtDay rdtNew">3</td>
+                                            <td data-value="4" data-month="2" data-year="2026" class="rdtDay rdtNew">4</td>
+                                            <td data-value="5" data-month="2" data-year="2026" class="rdtDay rdtNew">5</td>
+                                            <td data-value="6" data-month="2" data-year="2026" class="rdtDay rdtNew">6</td>
+                                            <td data-value="7" data-month="2" data-year="2026" class="rdtDay rdtNew">7</td>
                                         </tr>
                                     </tbody>
                                 </table>
@@ -1595,7 +1603,7 @@ export default () => {
                             </span>
                         </span>
                         <div class="ClearableInput input-group">
-                            <input type="text" class="form-control" disabled="" value="01/07/2026 1:11 PM" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
+                            <input type="text" class="form-control" disabled="" value="02/03/2026 3:04 PM" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
                         </div>
                     </div>
                     <div class="rdtPicker">
@@ -1606,7 +1614,7 @@ export default () => {
                                         <th class="rdtPrev">
                                             <span>‹</span>
                                         </th>
-                                        <th class="rdtSwitch" colspan="5" data-value="0">January 2026</th>
+                                        <th class="rdtSwitch" colspan="5" data-value="1">February 2026</th>
                                         <th class="rdtNext">
                                             <span>›</span>
                                         </th>
@@ -1623,63 +1631,63 @@ export default () => {
                                 </thead>
                                 <tbody>
                                     <tr>
-                                        <td data-value="28" data-month="11" data-year="2025" class="rdtDay rdtOld">28</td>
-                                        <td data-value="29" data-month="11" data-year="2025" class="rdtDay rdtOld">29</td>
-                                        <td data-value="30" data-month="11" data-year="2025" class="rdtDay rdtOld">30</td>
-                                        <td data-value="31" data-month="11" data-year="2025" class="rdtDay rdtOld">31</td>
-                                        <td data-value="1" data-month="0" data-year="2026" class="rdtDay">1</td>
-                                        <td data-value="2" data-month="0" data-year="2026" class="rdtDay">2</td>
-                                        <td data-value="3" data-month="0" data-year="2026" class="rdtDay">3</td>
+                                        <td data-value="25" data-month="0" data-year="2026" class="rdtDay rdtOld">25</td>
+                                        <td data-value="26" data-month="0" data-year="2026" class="rdtDay rdtOld">26</td>
+                                        <td data-value="27" data-month="0" data-year="2026" class="rdtDay rdtOld">27</td>
+                                        <td data-value="28" data-month="0" data-year="2026" class="rdtDay rdtOld">28</td>
+                                        <td data-value="29" data-month="0" data-year="2026" class="rdtDay rdtOld">29</td>
+                                        <td data-value="30" data-month="0" data-year="2026" class="rdtDay rdtOld">30</td>
+                                        <td data-value="31" data-month="0" data-year="2026" class="rdtDay rdtOld">31</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="4" data-month="0" data-year="2026" class="rdtDay">4</td>
-                                        <td data-value="5" data-month="0" data-year="2026" class="rdtDay">5</td>
-                                        <td data-value="6" data-month="0" data-year="2026" class="rdtDay">6</td>
-                                        <td data-value="7" data-month="0" data-year="2026" class="rdtDay rdtActive rdtToday">7</td>
-                                        <td data-value="8" data-month="0" data-year="2026" class="rdtDay">8</td>
-                                        <td data-value="9" data-month="0" data-year="2026" class="rdtDay">9</td>
-                                        <td data-value="10" data-month="0" data-year="2026" class="rdtDay">10</td>
+                                        <td data-value="1" data-month="1" data-year="2026" class="rdtDay">1</td>
+                                        <td data-value="2" data-month="1" data-year="2026" class="rdtDay">2</td>
+                                        <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtActive rdtToday">3</td>
+                                        <td data-value="4" data-month="1" data-year="2026" class="rdtDay">4</td>
+                                        <td data-value="5" data-month="1" data-year="2026" class="rdtDay">5</td>
+                                        <td data-value="6" data-month="1" data-year="2026" class="rdtDay">6</td>
+                                        <td data-value="7" data-month="1" data-year="2026" class="rdtDay">7</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="11" data-month="0" data-year="2026" class="rdtDay">11</td>
-                                        <td data-value="12" data-month="0" data-year="2026" class="rdtDay">12</td>
-                                        <td data-value="13" data-month="0" data-year="2026" class="rdtDay">13</td>
-                                        <td data-value="14" data-month="0" data-year="2026" class="rdtDay">14</td>
-                                        <td data-value="15" data-month="0" data-year="2026" class="rdtDay">15</td>
-                                        <td data-value="16" data-month="0" data-year="2026" class="rdtDay">16</td>
-                                        <td data-value="17" data-month="0" data-year="2026" class="rdtDay">17</td>
+                                        <td data-value="8" data-month="1" data-year="2026" class="rdtDay">8</td>
+                                        <td data-value="9" data-month="1" data-year="2026" class="rdtDay">9</td>
+                                        <td data-value="10" data-month="1" data-year="2026" class="rdtDay">10</td>
+                                        <td data-value="11" data-month="1" data-year="2026" class="rdtDay">11</td>
+                                        <td data-value="12" data-month="1" data-year="2026" class="rdtDay">12</td>
+                                        <td data-value="13" data-month="1" data-year="2026" class="rdtDay">13</td>
+                                        <td data-value="14" data-month="1" data-year="2026" class="rdtDay">14</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="18" data-month="0" data-year="2026" class="rdtDay">18</td>
-                                        <td data-value="19" data-month="0" data-year="2026" class="rdtDay">19</td>
-                                        <td data-value="20" data-month="0" data-year="2026" class="rdtDay">20</td>
-                                        <td data-value="21" data-month="0" data-year="2026" class="rdtDay">21</td>
-                                        <td data-value="22" data-month="0" data-year="2026" class="rdtDay">22</td>
-                                        <td data-value="23" data-month="0" data-year="2026" class="rdtDay">23</td>
-                                        <td data-value="24" data-month="0" data-year="2026" class="rdtDay">24</td>
+                                        <td data-value="15" data-month="1" data-year="2026" class="rdtDay">15</td>
+                                        <td data-value="16" data-month="1" data-year="2026" class="rdtDay">16</td>
+                                        <td data-value="17" data-month="1" data-year="2026" class="rdtDay">17</td>
+                                        <td data-value="18" data-month="1" data-year="2026" class="rdtDay">18</td>
+                                        <td data-value="19" data-month="1" data-year="2026" class="rdtDay">19</td>
+                                        <td data-value="20" data-month="1" data-year="2026" class="rdtDay">20</td>
+                                        <td data-value="21" data-month="1" data-year="2026" class="rdtDay">21</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="25" data-month="0" data-year="2026" class="rdtDay">25</td>
-                                        <td data-value="26" data-month="0" data-year="2026" class="rdtDay">26</td>
-                                        <td data-value="27" data-month="0" data-year="2026" class="rdtDay">27</td>
-                                        <td data-value="28" data-month="0" data-year="2026" class="rdtDay">28</td>
-                                        <td data-value="29" data-month="0" data-year="2026" class="rdtDay">29</td>
-                                        <td data-value="30" data-month="0" data-year="2026" class="rdtDay">30</td>
-                                        <td data-value="31" data-month="0" data-year="2026" class="rdtDay">31</td>
+                                        <td data-value="22" data-month="1" data-year="2026" class="rdtDay">22</td>
+                                        <td data-value="23" data-month="1" data-year="2026" class="rdtDay">23</td>
+                                        <td data-value="24" data-month="1" data-year="2026" class="rdtDay">24</td>
+                                        <td data-value="25" data-month="1" data-year="2026" class="rdtDay">25</td>
+                                        <td data-value="26" data-month="1" data-year="2026" class="rdtDay">26</td>
+                                        <td data-value="27" data-month="1" data-year="2026" class="rdtDay">27</td>
+                                        <td data-value="28" data-month="1" data-year="2026" class="rdtDay">28</td>
                                     </tr>
                                     <tr>
-                                        <td data-value="1" data-month="1" data-year="2026" class="rdtDay rdtNew">1</td>
-                                        <td data-value="2" data-month="1" data-year="2026" class="rdtDay rdtNew">2</td>
-                                        <td data-value="3" data-month="1" data-year="2026" class="rdtDay rdtNew">3</td>
-                                        <td data-value="4" data-month="1" data-year="2026" class="rdtDay rdtNew">4</td>
-                                        <td data-value="5" data-month="1" data-year="2026" class="rdtDay rdtNew">5</td>
-                                        <td data-value="6" data-month="1" data-year="2026" class="rdtDay rdtNew">6</td>
-                                        <td data-value="7" data-month="1" data-year="2026" class="rdtDay rdtNew">7</td>
+                                        <td data-value="1" data-month="2" data-year="2026" class="rdtDay rdtNew">1</td>
+                                        <td data-value="2" data-month="2" data-year="2026" class="rdtDay rdtNew">2</td>
+                                        <td data-value="3" data-month="2" data-year="2026" class="rdtDay rdtNew">3</td>
+                                        <td data-value="4" data-month="2" data-year="2026" class="rdtDay rdtNew">4</td>
+                                        <td data-value="5" data-month="2" data-year="2026" class="rdtDay rdtNew">5</td>
+                                        <td data-value="6" data-month="2" data-year="2026" class="rdtDay rdtNew">6</td>
+                                        <td data-value="7" data-month="2" data-year="2026" class="rdtDay rdtNew">7</td>
                                     </tr>
                                 </tbody>
                                 <tfoot>
                                     <tr>
-                                        <td colspan="7" class="rdtTimeToggle">1:11 PM</td>
+                                        <td colspan="7" class="rdtTimeToggle">3:04 PM</td>
                                     </tr>
                                 </tfoot>
                             </table>
@@ -1698,24 +1706,26 @@ export default () => {
 </div>
 ```
 
-#### Props
+#### Props: SaveableDateInput
+
+### SaveableDateInput
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| placeholder | String | — | The input placeholder. |
-| value | Date \| Moment \| String | — | The actual input value. |
+| placeholder | string | — | The input placeholder. |
+| value | Date \| Moment \| string | — | The actual input value. |
 | isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |
-| errorMessage | string \| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the "isValid" prop is set to false. |
+| errorMessage | string \| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false. |
 | hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false. |
 | onValueChanged | (value: Moment \| string, previousValue: Moment \| string \| Date) => void | — | Callback function triggered when the value changes and is saved. |
 | onInputChange | (value: Moment \| string, isValid: boolean) => void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |
-| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |
+| onEnterEdit | () => void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |
 | onExitEdit | (wasSaved: boolean) => void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |
-| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
-| invalidExitBehavior | "stay-open" \| "reset-and-close" | "stay-open" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |
-| buttonStyle | "default" \| "primary" | — | Defines the button style: default or primary. |
-| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |
-| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |
-| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |
-| inputClassName | String | — | Additional classes to be set on the input itself. |
-| className | String | — | Additional classes to be set on the wrapper element. |
+| onCancel | () => void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |
+| invalidExitBehavior | 'stay-open' \| 'reset-and-close' | 'stay-open' | Behavior when trying to exit edit mode with invalid input: - 'stay-open': Keep edit mode open until valid input is provided - 'reset-and-close': Close edit mode and reset to initial value |
+| buttonStyle | 'primary' \| 'default' | 'primary' | Defines the button style: default or primary. |
+| inputProps | HTMLAttributes<HTMLInputElement> | — | Additional HTML attributes to be set on the input element. |
+| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker component. |
+| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |
+| inputClassName | string | — | Additional classes to be set on the input itself. |
+| className | string | — | Additional classes to be set on the wrapper element. |