@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/saveableinput.json

@@ -0,0 +1,703 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:18.262Z",
+    "source": "https://uikit.developers.rio.cloud/#components/saveableInput",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/saveableinput",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "b189dc8b94d67c7df639276b8c354e9218d860f4c73d8606cc9a52a17f9c6357"
+  },
+  "title": "SaveableInput",
+  "lead": null,
+  "content": [
+    {
+      "heading": "SaveableInput",
+      "body": "",
+      "examples": [
+        {
+          "caption": "SaveableInput",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"display-grid grid-cols-3-md grid-cols-2-xs gap-20\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput</div><div class=\"form-group\"><div class=\"input-group\"><input type=\"text\" placeholder=\"Some value comes here\" class=\"form-control\" disabled=\"\" value=\"\"><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with value</div><div class=\"form-group\"><div class=\"input-group\"><input type=\"text\" class=\"form-control\" disabled=\"\" value=\"Lorem ipsum\"><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with previous value</div><div class=\"form-group\"><div class=\"input-group\"><input type=\"text\" class=\"form-control padding-bottom-0 padding-top-10 text-size-12\" disabled=\"\" value=\"Lorem ipsum\"><div class=\"position-absolute top-2 left-10 margin-left-3 text-size-10 text-decoration-line-through\" aria-label=\"previous value\">Dolor sit amet</div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with fixed previous value</div><div class=\"form-group\"><div class=\"input-group\"><input type=\"text\" class=\"form-control padding-bottom-0 padding-top-10 text-size-12\" disabled=\"\" value=\"Lorem ipsum\"><div class=\"position-absolute top-2 left-10 margin-left-3 text-size-10 text-decoration-line-through\" aria-label=\"previous value\">You shall not pass</div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with default button style</div><div class=\"form-group\"><div class=\"input-group\"><input type=\"text\" class=\"form-control\" disabled=\"\" id=\"some-id \" value=\"Lorem ipsum\"><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with unit and icon</div><div class=\"form-group max-width-150\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-parcel\" aria-hidden=\"true\" aria-label=\"input icon\"></span></span><input type=\"text\" class=\"form-control padding-right-50\" disabled=\"\" value=\"145\"><div class=\"position-absolute right-0 margin-right-50\" aria-label=\"unit\">Pcs</div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with feedback</div><div class=\"form-group\"><div class=\"form-group has-feedback has-error margin-0\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-factory\" aria-hidden=\"true\" aria-label=\"input icon\"></span></span><input type=\"text\" class=\"form-control padding-right-50\" disabled=\"\" value=\"Lorem ipsum\"><div class=\"position-absolute right-0 margin-right-50\" aria-label=\"unit\">Lab</div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div><span class=\"help-block z-index-max\"><span>This is an error message</span></span></div></div></div><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Disabled SaveableInput</div><div class=\"form-group\"><div class=\"input-group\"><input type=\"text\" class=\"form-control\" disabled=\"\" value=\"Lorem ipsum\"><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" disabled=\"\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SaveableInput from '@rio-cloud/rio-uikit/SaveableInput';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div>\n        <div className='display-grid grid-cols-3-md grid-cols-2-xs gap-20'>\n            <div>\n                <FormLabel>SaveableInput</FormLabel>\n                <SaveableInput placeholder='Some value comes here' />\n            </div>\n\n            <div>\n                <FormLabel>SaveableInput with value</FormLabel>\n                <SaveableInput value='Lorem ipsum' />\n            </div>\n\n            <div>\n                <FormLabel>SaveableInput with previous value</FormLabel>\n                <SaveableInput value='Lorem ipsum' previousValue='Dolor sit amet' />\n            </div>\n\n            <div>\n                <FormLabel>SaveableInput with fixed previous value</FormLabel>\n                <SaveableInput value='Lorem ipsum' fixedPreviousValue='You shall not pass' />\n            </div>\n\n            <div>\n                <FormLabel>SaveableInput with default button style</FormLabel>\n                <SaveableInput value='Lorem ipsum' buttonStyle='default' inputProps={{ id: 'some-id ' }} />\n            </div>\n\n            <div>\n                <FormLabel>SaveableInput with unit and icon</FormLabel>\n                <SaveableInput\n                    value='145'\n                    buttonStyle='default'\n                    icon='rioglyph-parcel'\n                    unit='Pcs'\n                    className='max-width-150'\n                />\n            </div>\n\n            <div>\n                <FormLabel>SaveableInput with feedback</FormLabel>\n                <div className='form-group'>\n                    <SaveableInput\n                        value='Lorem ipsum'\n                        icon='rioglyph-factory'\n                        unit='Lab'\n                        className='margin-0'\n                        isValid={false}\n                        errorMessage='This is an error message'\n                    />\n                </div>\n            </div>\n\n            <div>\n                <FormLabel>Disabled SaveableInput</FormLabel>\n                <SaveableInput value='Lorem ipsum' disabled />\n            </div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"display-grid grid-cols-3-md grid-cols-2-xs gap-20\">\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput</div>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <input type=\"text\" placeholder=\"Some value comes here\" class=\"form-control\" disabled=\"\" value=\"\">\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with value</div>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <input type=\"text\" class=\"form-control\" disabled=\"\" value=\"Lorem ipsum\">\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with previous value</div>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <input type=\"text\" class=\"form-control padding-bottom-0 padding-top-10 text-size-12\" disabled=\"\" value=\"Lorem ipsum\">\n                    <div class=\"position-absolute top-2 left-10 margin-left-3 text-size-10 text-decoration-line-through\" aria-label=\"previous value\">Dolor sit amet</div>\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with fixed previous value</div>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <input type=\"text\" class=\"form-control padding-bottom-0 padding-top-10 text-size-12\" disabled=\"\" value=\"Lorem ipsum\">\n                    <div class=\"position-absolute top-2 left-10 margin-left-3 text-size-10 text-decoration-line-through\" aria-label=\"previous value\">You shall not pass</div>\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with default button style</div>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <input type=\"text\" class=\"form-control\" disabled=\"\" id=\"some-id \" value=\"Lorem ipsum\">\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with unit and icon</div>\n            <div class=\"form-group max-width-150\">\n                <div class=\"input-group\">\n                    <span class=\"input-group-addon\">\n                        <span class=\"rioglyph rioglyph-parcel\" aria-hidden=\"true\" aria-label=\"input icon\">\n                        </span>\n                    </span>\n                    <input type=\"text\" class=\"form-control padding-right-50\" disabled=\"\" value=\"145\">\n                    <div class=\"position-absolute right-0 margin-right-50\" aria-label=\"unit\">Pcs</div>\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableInput with feedback</div>\n            <div class=\"form-group\">\n                <div class=\"form-group has-feedback has-error margin-0\">\n                    <div class=\"input-group\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-factory\" aria-hidden=\"true\" aria-label=\"input icon\">\n                            </span>\n                        </span>\n                        <input type=\"text\" class=\"form-control padding-right-50\" disabled=\"\" value=\"Lorem ipsum\">\n                        <div class=\"position-absolute right-0 margin-right-50\" aria-label=\"unit\">Lab</div>\n                        <div class=\"input-group-btn\">\n                            <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-pencil\">\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                    <span class=\"help-block z-index-max\">\n                        <span>This is an error message</span>\n                    </span>\n                </div>\n            </div>\n        </div>\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Disabled SaveableInput</div>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <input type=\"text\" class=\"form-control\" disabled=\"\" value=\"Lorem ipsum\">\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" disabled=\"\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The input placeholder."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The actual input value."
+                    },
+                    {
+                      "name": "previousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value changes when a new input value is accepted."
+                    },
+                    {
+                      "name": "isValid",
+                      "type": "string",
+                      "default": "",
+                      "description": "Used to control the save button from the outside to disable it in case the entered value is not valid."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "string | ReactNode",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "hideErrorIcon",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false."
+                    },
+                    {
+                      "name": "fixedPreviousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value will not be changed for new input values."
+                    },
+                    {
+                      "name": "buttonStyle",
+                      "type": "string",
+                      "default": "primary",
+                      "description": "Defines the button style: default or primary."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "Attributes",
+                      "default": "",
+                      "description": "Additional HTML attributes to be set on the input element."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "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`."
+                    },
+                    {
+                      "name": "unit",
+                      "type": "String | ReactNode",
+                      "default": "",
+                      "description": "Adds a given unit to the input."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Disables the component so the user cannot enter the edit mode."
+                    },
+                    {
+                      "name": "onValueChanged",
+                      "type": "(value: string, previousValue: string)",
+                      "default": "",
+                      "description": "Callback function triggered when the value changes."
+                    },
+                    {
+                      "name": "onInputChange",
+                      "type": "(keyValue: string, inputValue: string) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation."
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "onEnterEdit",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input itself."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-300\"><label>With error feedback and disabled save button</label><div class=\"form-group\"><div class=\"form-group margin-0\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-factory\" aria-hidden=\"true\" aria-label=\"input icon\"></span></span><input type=\"text\" class=\"form-control\" disabled=\"\" value=\"Remove this value\"><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport SaveableInput from '@rio-cloud/rio-uikit/SaveableInput';\n\nexport default () => {\n    const [previousValue, setPreviousValue] = useState('');\n    const [backupValue, setBackupValue] = useState('');\n    const [value, setValue] = useState('Remove this value');\n\n    // When the user \"saves\" the entered value, we update the current and the previous value\n    const handleValueChanged = (newValue: string, oldValue: string) => {\n        setPreviousValue(oldValue);\n        setValue(newValue);\n    };\n\n    // Used to do some custom validation here...\n    const handleInputChange = (keyValue: string, inputValue: string) => {\n        setValue(inputValue);\n    };\n\n    // As we control the current and previous value outside the component, whe need to keep\n    // the previous value around to restore it when the user aborts the edit with \"esc\", otherwise\n    // the previous value is already overwritten and changed\n    const handleEnterEditMode = () => {\n        setBackupValue(previousValue);\n        setPreviousValue(value);\n    };\n\n    // Restore the current and previous value when the user aborts the edit\n    const handleEsc = () => {\n        setValue(previousValue);\n        setPreviousValue(backupValue);\n    };\n\n    const hasValidInput = !!value;\n\n    return (\n        <div className='max-width-300'>\n            <label>With error feedback and disabled save button</label>\n            <div className='form-group'>\n                <SaveableInput\n                    icon='rioglyph-factory'\n                    value={value}\n                    onValueChanged={handleValueChanged}\n                    onInputChange={handleInputChange}\n                    onEnterEdit={handleEnterEditMode}\n                    onEsc={handleEsc}\n                    isValid={hasValidInput}\n                    className='margin-0'\n                    errorMessage='Please enter something'\n                    hideErrorIcon\n                />\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-300\">\n    <label>With error feedback and disabled save button</label>\n    <div class=\"form-group\">\n        <div class=\"form-group margin-0\">\n            <div class=\"input-group\">\n                <span class=\"input-group-addon\">\n                    <span class=\"rioglyph rioglyph-factory\" aria-hidden=\"true\" aria-label=\"input icon\">\n                    </span>\n                </span>\n                <input type=\"text\" class=\"form-control\" disabled=\"\" value=\"Remove this value\">\n                <div class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-pencil\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The input placeholder."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The actual input value."
+                    },
+                    {
+                      "name": "previousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value changes when a new input value is accepted."
+                    },
+                    {
+                      "name": "isValid",
+                      "type": "string",
+                      "default": "",
+                      "description": "Used to control the save button from the outside to disable it in case the entered value is not valid."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "string | ReactNode",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "hideErrorIcon",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false."
+                    },
+                    {
+                      "name": "fixedPreviousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value will not be changed for new input values."
+                    },
+                    {
+                      "name": "buttonStyle",
+                      "type": "string",
+                      "default": "primary",
+                      "description": "Defines the button style: default or primary."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "Attributes",
+                      "default": "",
+                      "description": "Additional HTML attributes to be set on the input element."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "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`."
+                    },
+                    {
+                      "name": "unit",
+                      "type": "String | ReactNode",
+                      "default": "",
+                      "description": "Adds a given unit to the input."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Disables the component so the user cannot enter the edit mode."
+                    },
+                    {
+                      "name": "onValueChanged",
+                      "type": "(value: string, previousValue: string)",
+                      "default": "",
+                      "description": "Callback function triggered when the value changes."
+                    },
+                    {
+                      "name": "onInputChange",
+                      "type": "(keyValue: string, inputValue: string) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation."
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "onEnterEdit",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input itself."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Controlled SaveableInput",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"display-grid grid-cols-3-md grid-cols-2-xs gap-20\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled SaveableInput</div><div class=\"form-group\"><div class=\"input-group\"><input type=\"text\" placeholder=\"Some value comes here\" class=\"form-control\" disabled=\"\" value=\"\"><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div class=\"grid-colspan-2 margin-top-25 btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Randomize values</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Clear values</button></div></div><div class=\"margin-top-10 text-italic text-size-11\"><pre>{\n    value: '',\n    previousValue: ''\n}</pre></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport SaveableInput from '@rio-cloud/rio-uikit/SaveableInput';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\n\nexport default () => {\n    const [previousValue, setPreviousValue] = useState('');\n    const [value, setValue] = useState('');\n\n    const handleValueChanged = (newValue: string) => {\n        setPreviousValue(value);\n        setValue(newValue);\n    };\n\n    return (\n        <div>\n            <div className='display-grid grid-cols-3-md grid-cols-2-xs gap-20'>\n                <div>\n                    <FormLabel>Controlled SaveableInput</FormLabel>\n                    <SaveableInput\n                        placeholder='Some value comes here'\n                        value={value}\n                        previousValue={previousValue}\n                        onValueChanged={handleValueChanged}\n                    />\n                </div>\n                <div className='grid-colspan-2 margin-top-25 btn-toolbar'>\n                    <Button\n                        onClick={() => {\n                            setPreviousValue(getRandomString());\n                            setValue(getRandomString());\n                        }}\n                    >\n                        Randomize values\n                    </Button>\n\n                    <Button\n                        onClick={() => {\n                            setPreviousValue('');\n                            setValue('');\n                        }}\n                    >\n                        Clear values\n                    </Button>\n                </div>\n            </div>\n            <div className='margin-top-10 text-italic text-size-11'>\n                <pre>{`{\n    value: '${value}',\n    previousValue: '${previousValue}'\n}`}</pre>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"display-grid grid-cols-3-md grid-cols-2-xs gap-20\">\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled SaveableInput</div>\n            <div class=\"form-group\">\n                <div class=\"input-group\">\n                    <input type=\"text\" placeholder=\"Some value comes here\" class=\"form-control\" disabled=\"\" value=\"\">\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"grid-colspan-2 margin-top-25 btn-toolbar\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Randomize values</button>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Clear values</button>\n        </div>\n    </div>\n    <div class=\"margin-top-10 text-italic text-size-11\">\n        <pre>{\n    value: '',\n    previousValue: ''\n}</pre>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The input placeholder."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The actual input value."
+                    },
+                    {
+                      "name": "previousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value changes when a new input value is accepted."
+                    },
+                    {
+                      "name": "isValid",
+                      "type": "string",
+                      "default": "",
+                      "description": "Used to control the save button from the outside to disable it in case the entered value is not valid."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "string | ReactNode",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "hideErrorIcon",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false."
+                    },
+                    {
+                      "name": "fixedPreviousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value will not be changed for new input values."
+                    },
+                    {
+                      "name": "buttonStyle",
+                      "type": "string",
+                      "default": "primary",
+                      "description": "Defines the button style: default or primary."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "Attributes",
+                      "default": "",
+                      "description": "Additional HTML attributes to be set on the input element."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "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`."
+                    },
+                    {
+                      "name": "unit",
+                      "type": "String | ReactNode",
+                      "default": "",
+                      "description": "Adds a given unit to the input."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Disables the component so the user cannot enter the edit mode."
+                    },
+                    {
+                      "name": "onValueChanged",
+                      "type": "(value: string, previousValue: string)",
+                      "default": "",
+                      "description": "Callback function triggered when the value changes."
+                    },
+                    {
+                      "name": "onInputChange",
+                      "type": "(keyValue: string, inputValue: string) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation."
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "onEnterEdit",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input itself."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Controlled SaveableInput with key validation",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"display-grid grid-cols-3-md grid-cols-2-xs gap-20\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled SaveableInput with key validation</div><div class=\"form-group max-width-200\"><div class=\"input-group\"><input type=\"text\" class=\"form-control padding-right-50\" disabled=\"\" value=\"0\"><div class=\"position-absolute right-0 margin-right-50\" aria-label=\"unit\">Pcs</div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div></div><div class=\"margin-top-10 text-italic text-size-11\"><pre>{\n    value: '0',\n    previousValue: ''\n}</pre></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport SaveableInput from '@rio-cloud/rio-uikit/SaveableInput';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => {\n    const [previousValue, setPreviousValue] = useState('');\n    const [backupValue, setBackupValue] = useState('');\n    const [value, setValue] = useState('0');\n\n    // When the user \"saves\" the entered value, we update the current and the previous value\n    const handleValueChanged = (newValue: string, oldValue: string) => {\n        setPreviousValue(oldValue);\n        setValue(newValue);\n    };\n\n    // Used to do some custom validation here...\n    const handleInputChange = (keyValue: string, inputValue: string) => {\n        console.log({ keyValue, inputValue });\n\n        const parsedValue = Number.parseFloat(keyValue);\n        if (keyValue !== '' && Number.isNaN(parsedValue)) {\n            console.log('Not a valid number: ', keyValue);\n        } else {\n            console.log('Valid number entered:', parsedValue);\n            setValue(inputValue);\n        }\n    };\n\n    // As we control the current and previous value outside the component, whe need to keep\n    // the previous value around to restore it when the user aborts the edit with \"esc\", otherwise\n    // the previous value is already overwritten and changed\n    const handleEnterEditMode = () => {\n        setBackupValue(previousValue);\n        setPreviousValue(value);\n    };\n\n    // Restore the current and previous value when the user aborts the edit\n    const handleEsc = () => {\n        setValue(previousValue);\n        setPreviousValue(backupValue);\n    };\n\n    return (\n        <div>\n            <div className='display-grid grid-cols-3-md grid-cols-2-xs gap-20'>\n                <div>\n                    <FormLabel>Controlled SaveableInput with key validation</FormLabel>\n                    <SaveableInput\n                        unit='Pcs'\n                        value={value}\n                        previousValue={previousValue}\n                        onValueChanged={handleValueChanged}\n                        onInputChange={handleInputChange}\n                        onEsc={handleEsc}\n                        onEnterEdit={handleEnterEditMode}\n                        className='max-width-200'\n                    />\n                </div>\n            </div>\n            <div className='margin-top-10 text-italic text-size-11'>\n                <pre>{`{\n    value: '${value}',\n    previousValue: '${previousValue}'\n}`}</pre>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"display-grid grid-cols-3-md grid-cols-2-xs gap-20\">\n        <div>\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled SaveableInput with key validation</div>\n            <div class=\"form-group max-width-200\">\n                <div class=\"input-group\">\n                    <input type=\"text\" class=\"form-control padding-right-50\" disabled=\"\" value=\"0\">\n                    <div class=\"position-absolute right-0 margin-right-50\" aria-label=\"unit\">Pcs</div>\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"margin-top-10 text-italic text-size-11\">\n        <pre>{\n    value: '0',\n    previousValue: ''\n}</pre>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The input placeholder."
+                    },
+                    {
+                      "name": "value",
+                      "type": "String",
+                      "default": "",
+                      "description": "The actual input value."
+                    },
+                    {
+                      "name": "previousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value changes when a new input value is accepted."
+                    },
+                    {
+                      "name": "isValid",
+                      "type": "string",
+                      "default": "",
+                      "description": "Used to control the save button from the outside to disable it in case the entered value is not valid."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "string | ReactNode",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "hideErrorIcon",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false."
+                    },
+                    {
+                      "name": "fixedPreviousValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The previous or old value shown above the input value. This value will not be changed for new input values."
+                    },
+                    {
+                      "name": "buttonStyle",
+                      "type": "string",
+                      "default": "primary",
+                      "description": "Defines the button style: default or primary."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "Attributes",
+                      "default": "",
+                      "description": "Additional HTML attributes to be set on the input element."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "string",
+                      "default": "",
+                      "description": "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`."
+                    },
+                    {
+                      "name": "unit",
+                      "type": "String | ReactNode",
+                      "default": "",
+                      "description": "Adds a given unit to the input."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Disables the component so the user cannot enter the edit mode."
+                    },
+                    {
+                      "name": "onValueChanged",
+                      "type": "(value: string, previousValue: string)",
+                      "default": "",
+                      "description": "Callback function triggered when the value changes."
+                    },
+                    {
+                      "name": "onInputChange",
+                      "type": "(keyValue: string, inputValue: string) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation."
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "onEnterEdit",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input itself."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SaveableDateInput",
+      "body": "",
+      "examples": [
+        {
+          "caption": "SaveableDateInput (uncontrolled)",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-bottom-50 display-flex flex-wrap flex-direction-column gap-25\"><div class=\"width-300\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableDateInput (uncontrolled)</div><div class=\"form-group\"><div class=\"input-group\"><div class=\"rdt DatePicker form-group margin-0 width-100pct\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"Delivery date\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th><th class=\"rdtNext\"><span>›</span></th></tr><tr><th class=\"dow\">Su</th><th class=\"dow\">Mo</th><th class=\"dow\">Tu</th><th class=\"dow\">We</th><th class=\"dow\">Th</th><th class=\"dow\">Fr</th><th class=\"dow\">Sa</th></tr></thead><tbody><tr><td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td><td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td><td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td><td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td><td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td><td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td><td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td></tr><tr><td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td><td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td><td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td><td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td><td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td><td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td><td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td></tr><tr><td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td><td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td><td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td><td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td><td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td><td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td><td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td></tr><tr><td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td><td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td><td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td><td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td><td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td><td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td><td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td></tr><tr><td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td><td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td><td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td><td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td><td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td><td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td><td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td></tr><tr><td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td><td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td><td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td><td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td><td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td><td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td><td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td></tr></tbody></table></div></div></div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div class=\"width-300\"><div class=\"form-group\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled - Stay open on invalid (default)</div><div class=\"form-group margin-0\"><div class=\"input-group\"><div class=\"rdt DatePicker form-group margin-0 width-100pct\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"Enter valid date\" disabled=\"\" value=\"2025-11-21 01:07\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th><th class=\"rdtNext\"><span>›</span></th></tr><tr><th class=\"dow\">Su</th><th class=\"dow\">Mo</th><th class=\"dow\">Tu</th><th class=\"dow\">We</th><th class=\"dow\">Th</th><th class=\"dow\">Fr</th><th class=\"dow\">Sa</th></tr></thead><tbody><tr><td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td><td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td><td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td><td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td><td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td><td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td><td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td></tr><tr><td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td><td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td><td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td><td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td><td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td><td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td><td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td></tr><tr><td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td><td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td><td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td><td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td><td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td><td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td><td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td></tr><tr><td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td><td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td><td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td><td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td><td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td><td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtActive rdtToday\">21</td><td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td></tr><tr><td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td><td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td><td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td><td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td><td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td><td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td><td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td></tr><tr><td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td><td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td><td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td><td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td><td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td><td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td><td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td></tr></tbody><tfoot><tr><td colspan=\"7\" class=\"rdtTimeToggle\">01:07</td></tr></tfoot></table></div></div></div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div class=\"margin-top-10\"><small>Saved value: </small></div></div><div class=\"width-300\"><div class=\"form-group\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled - With error</div><div class=\"form-group has-feedback has-error margin-0\"><div class=\"input-group\"><div class=\"rdt DatePicker form-group margin-0 width-100pct\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"Enter a date\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px; padding-right: 10px;\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th><th class=\"rdtNext\"><span>›</span></th></tr><tr><th class=\"dow\">Su</th><th class=\"dow\">Mo</th><th class=\"dow\">Tu</th><th class=\"dow\">We</th><th class=\"dow\">Th</th><th class=\"dow\">Fr</th><th class=\"dow\">Sa</th></tr></thead><tbody><tr><td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td><td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td><td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td><td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td><td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td><td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td><td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td></tr><tr><td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td><td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td><td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td><td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td><td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td><td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td><td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td></tr><tr><td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td><td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td><td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td><td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td><td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td><td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td><td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td></tr><tr><td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td><td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td><td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td><td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td><td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td><td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td><td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td></tr><tr><td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td><td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td><td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td><td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td><td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td><td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td><td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td></tr><tr><td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td><td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td><td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td><td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td><td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td><td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td><td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td></tr></tbody><tfoot><tr><td colspan=\"7\" class=\"rdtTimeToggle\">12:00</td></tr></tfoot></table></div></div></div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div><span class=\"help-block z-index-max\"><span>Required field</span></span></div></div><div class=\"margin-top-10\"><small>Saved value: </small></div></div><div class=\"width-300\"><div class=\"form-group\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled - Reset and close on invalid</div><div data-testid=\"demo-testid\" class=\"form-group margin-0\"><div class=\"input-group\"><div class=\"rdt DatePicker form-group margin-0 width-100pct\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"Enter date after last week\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th><th class=\"rdtNext\"><span>›</span></th></tr><tr><th class=\"dow\">Su</th><th class=\"dow\">Mo</th><th class=\"dow\">Tu</th><th class=\"dow\">We</th><th class=\"dow\">Th</th><th class=\"dow\">Fr</th><th class=\"dow\">Sa</th></tr></thead><tbody><tr><td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td><td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td><td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td><td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td><td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td><td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td><td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td></tr><tr><td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td><td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td><td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td><td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td><td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td><td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td><td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td></tr><tr><td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td><td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td><td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td><td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td><td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td><td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td><td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td></tr><tr><td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td><td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td><td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td><td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td><td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td><td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td><td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td></tr><tr><td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td><td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td><td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td><td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td><td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td><td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td><td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td></tr><tr><td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td><td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td><td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td><td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td><td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td><td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td><td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td></tr></tbody></table></div></div></div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div class=\"margin-top-10\"><small>Saved value: </small></div></div><div class=\"width-300\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableDateInput (only month)</div><div class=\"form-group\"><div class=\"input-group\"><div class=\"rdt DatePicker form-group margin-0 width-100pct\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"Target month\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\"></div></div><div class=\"rdtPicker\"><div class=\"rdtMonths\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"2\">2025</th><th class=\"rdtNext\"><span>›</span></th></tr></thead></table><table><tbody><tr><td class=\"rdtMonth\" data-value=\"0\">Jan</td><td class=\"rdtMonth\" data-value=\"1\">Feb</td><td class=\"rdtMonth\" data-value=\"2\">Mar</td><td class=\"rdtMonth\" data-value=\"3\">Apr</td></tr><tr><td class=\"rdtMonth\" data-value=\"4\">May</td><td class=\"rdtMonth\" data-value=\"5\">Jun</td><td class=\"rdtMonth\" data-value=\"6\">Jul</td><td class=\"rdtMonth\" data-value=\"7\">Aug</td></tr><tr><td class=\"rdtMonth\" data-value=\"8\">Sep</td><td class=\"rdtMonth\" data-value=\"9\">Oct</td><td class=\"rdtMonth\" data-value=\"10\">Nov</td><td class=\"rdtMonth\" data-value=\"11\">Dec</td></tr></tbody></table></div></div></div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div><div class=\"width-300\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableDateInput (disabled)</div><div class=\"form-group\"><div class=\"input-group\"><div class=\"rdt DatePicker form-group margin-0 width-100pct\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" disabled=\"\" value=\"11/21/2025 1:07 PM\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th><th class=\"rdtNext\"><span>›</span></th></tr><tr><th class=\"dow\">Su</th><th class=\"dow\">Mo</th><th class=\"dow\">Tu</th><th class=\"dow\">We</th><th class=\"dow\">Th</th><th class=\"dow\">Fr</th><th class=\"dow\">Sa</th></tr></thead><tbody><tr><td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td><td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td><td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td><td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td><td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td><td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td><td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td></tr><tr><td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td><td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td><td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td><td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td><td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td><td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td><td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td></tr><tr><td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td><td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td><td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td><td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td><td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td><td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td><td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td></tr><tr><td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td><td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td><td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td><td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td><td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td><td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtActive rdtToday\">21</td><td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td></tr><tr><td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td><td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td><td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td><td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td><td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td><td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td><td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td></tr><tr><td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td><td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td><td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td><td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td><td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td><td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td><td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td></tr></tbody><tfoot><tr><td colspan=\"7\" class=\"rdtTimeToggle\">1:07 PM</td></tr></tfoot></table></div></div></div><div class=\"input-group-btn\"><button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" disabled=\"\" tabindex=\"0\"><span class=\"rioglyph rioglyph-pencil\"></span></button></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SaveableDateInput from '@rio-cloud/rio-uikit/SaveableDateInput';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport { useState } from 'react';\nimport moment, { type Moment } from 'moment';\n\n/**\n * The Datepicker returns either a Moment object if date is valid or the input as string\n * if it's not a valid date\n */\nconst isValidDate = (input: Moment | string) => typeof input !== 'string';\n\nexport default () => {\n    // Controlled example with \"stay-open\" behavior (default)\n    const [savedValue1, setSavedValue1] = useState<Moment | string>('');\n    const [currentTransientInput1, setCurrentTransientInput1] = useState<Moment | string>(moment(new Date()));\n    const [isValid1, setIsValid1] = useState<boolean>(true);\n\n    const handleSaveValue1 = (newValue: string | Date | Moment, previousValue: string | Date | Moment) => {\n        console.log('Saving value:', newValue, 'Previous:', previousValue);\n        setSavedValue1(newValue as Moment);\n        setCurrentTransientInput1(newValue as Moment | string);\n    };\n\n    const handleTransientInputChange1 = (input: Moment | string, isValid: boolean) => {\n        console.log('Input changed:', input, 'Valid:', isValid);\n        setCurrentTransientInput1(input);\n        setIsValid1(isValid);\n    };\n\n    // Controlled example with \"reset-and-close\" behavior\n    const [savedValue2, setSavedValue2] = useState<Moment | string>('');\n    const [currentTransientInput2, setCurrentTransientInput2] = useState<Moment | string>();\n    const [isValid2, setIsValid2] = useState<boolean>(true);\n\n    const handleSaveValue2 = (newValue: string | Date | Moment, previousValue: string | Date | Moment) => {\n        console.log('Saving value 2:', newValue, 'Previous:', previousValue);\n        setSavedValue2(newValue as Moment);\n        setCurrentTransientInput2(newValue as Moment | string);\n    };\n\n    const handleTransientInputChange2 = (input: Moment | string, isValid: boolean) => {\n        console.log('Input changed 2:', input, 'Valid:', isValid);\n        setCurrentTransientInput2(input);\n\n        // Custom validation: date must be valid AND newer than last week\n        let customIsValid = isValid;\n        if (isValid && isValidDate(input)) {\n            const lastWeek = moment().subtract(7, 'days').startOf('day');\n            customIsValid = input.isAfter(lastWeek);\n        }\n\n        setIsValid2(customIsValid);\n    };\n\n    // Controlled example with \"stay-open\" behavior (default)\n    const [savedValue3, setSavedValue3] = useState<Moment | string>('');\n    const [currentTransientInput3, setCurrentTransientInput3] = useState<Moment | string>();\n    const [isValid3, setIsValid3] = useState<boolean>(true);\n\n    const handleSaveValue3 = (newValue: string | Date | Moment, previousValue: string | Date | Moment) => {\n        console.log('Saving value:', newValue, 'Previous:', previousValue);\n        setSavedValue3(newValue as Moment);\n        setCurrentTransientInput3(newValue as Moment | string);\n    };\n\n    const handleTransientInputChange3 = (input: Moment | string, isValid: boolean) => {\n        console.log('Input changed:', input, 'Valid:', isValid);\n        setCurrentTransientInput3(input);\n        setIsValid3(isValid);\n    };\n\n    const handleCancel1 = () => {\n        console.log('Edit cancelled - resetting to saved value');\n        setCurrentTransientInput1(savedValue1);\n        setIsValid1(true);\n    };\n\n    const handleCancel2 = () => {\n        console.log('Edit cancelled - resetting to saved value');\n        setCurrentTransientInput2(savedValue2);\n        setIsValid2(true);\n    };\n\n    const handleCancel3 = () => {\n        console.log('Edit cancelled - resetting to saved value');\n        setCurrentTransientInput3(savedValue2);\n        setIsValid3(true);\n    };\n\n    const handleExitEdit = (wasSaved: boolean) => {\n        console.log('Exited edit mode, was saved:', wasSaved);\n    };\n\n    return (\n        <div className='margin-bottom-50 display-flex flex-wrap flex-direction-column gap-25'>\n            <div className='width-300'>\n                <FormLabel>SaveableDateInput (uncontrolled)</FormLabel>\n                <SaveableDateInput\n                    placeholder='Delivery date'\n                    datePickerProps={{ dateFormat: 'YYYY-MM-DD', timeFormat: false }}\n                    onValueChanged={(value, _) => console.log('Uncontrolled saved:', value)}\n                />\n            </div>\n\n            <div className='width-300'>\n                <div className='form-group'>\n                    <FormLabel>Controlled - Stay open on invalid (default)</FormLabel>\n                    <SaveableDateInput\n                        value={currentTransientInput1}\n                        isValid={isValid1}\n                        onValueChanged={handleSaveValue1}\n                        onInputChange={handleTransientInputChange1}\n                        onCancel={handleCancel1}\n                        onExitEdit={handleExitEdit}\n                        className='margin-0'\n                        placeholder='Enter valid date'\n                        datePickerProps={{ dateFormat: 'YYYY-MM-DD', timeFormat: 'hh:mm' }}\n                        invalidExitBehavior='stay-open'\n                        inputProps={{ style: { padding: '0' } }}\n                        errorMessage='Please enter a valid date'\n                    />\n                </div>\n                <div className='margin-top-10'>\n                    <small>\n                        Saved value: {isValidDate(savedValue1) ? savedValue1.format('YYYY-MM-DD') : String(savedValue1)}\n                    </small>\n                </div>\n            </div>\n\n            <div className='width-300'>\n                <div className='form-group'>\n                    <FormLabel>Controlled - With error</FormLabel>\n                    <SaveableDateInput\n                        value={currentTransientInput3}\n                        isValid={!!currentTransientInput3}\n                        onValueChanged={handleSaveValue3}\n                        onInputChange={handleTransientInputChange3}\n                        onCancel={handleCancel3}\n                        onExitEdit={handleExitEdit}\n                        className='margin-0'\n                        placeholder='Enter a date'\n                        datePickerProps={{ dateFormat: 'YYYY-MM-DD', timeFormat: 'hh:mm' }}\n                        invalidExitBehavior='stay-open'\n                        inputProps={{ style: { padding: '0' } }}\n                        errorMessage='Required field'\n                        hideErrorIcon\n                    />\n                </div>\n                <div className='margin-top-10'>\n                    <small>\n                        Saved value: {isValidDate(savedValue1) ? savedValue1.format('YYYY-MM-DD') : String(savedValue1)}\n                    </small>\n                </div>\n            </div>\n\n            <div className='width-300'>\n                <div className='form-group'>\n                    <FormLabel>Controlled - Reset and close on invalid</FormLabel>\n                    <SaveableDateInput\n                        value={currentTransientInput2}\n                        isValid={isValid2}\n                        onValueChanged={handleSaveValue2}\n                        onInputChange={handleTransientInputChange2}\n                        onCancel={handleCancel2}\n                        onExitEdit={handleExitEdit}\n                        className='margin-0'\n                        placeholder='Enter date after last week'\n                        datePickerProps={{ dateFormat: 'YYYY-MM-DD', timeFormat: false }}\n                        invalidExitBehavior='reset-and-close'\n                        data-testid='demo-testid'\n                        errorMessage={\n                            <span>\n                                Please enter a valid date that is newer than{' '}\n                                {moment().subtract(7, 'days').format('YYYY-MM-DD')}\n                            </span>\n                        }\n                    />\n                </div>\n                <div className='margin-top-10'>\n                    <small>\n                        Saved value: {isValidDate(savedValue2) ? savedValue2.format('YYYY-MM-DD') : String(savedValue2)}\n                    </small>\n                </div>\n            </div>\n\n            <div className='width-300'>\n                <FormLabel>SaveableDateInput (only month)</FormLabel>\n                <SaveableDateInput\n                    placeholder='Target month'\n                    datePickerProps={{ dateFormat: 'YYYY-MM', timeFormat: false }}\n                    onValueChanged={(value, _) => console.log('Month saved:', value)}\n                />\n            </div>\n\n            <div className='width-300'>\n                <FormLabel>SaveableDateInput (disabled)</FormLabel>\n                <SaveableDateInput value={new Date()} disabled />\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-bottom-50 display-flex flex-wrap flex-direction-column gap-25\">\n    <div class=\"width-300\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableDateInput (uncontrolled)</div>\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"rdt DatePicker form-group margin-0 width-100pct\">\n                    <div class=\"input-group\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input type=\"text\" class=\"form-control\" placeholder=\"Delivery date\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\">\n                        </div>\n                    </div>\n                    <div class=\"rdtPicker\">\n                        <div class=\"rdtDays\">\n                            <table>\n                                <thead>\n                                    <tr>\n                                        <th class=\"rdtPrev\">\n                                            <span>‹</span>\n                                        </th>\n                                        <th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th>\n                                        <th class=\"rdtNext\">\n                                            <span>›</span>\n                                        </th>\n                                    </tr>\n                                    <tr>\n                                        <th class=\"dow\">Su</th>\n                                        <th class=\"dow\">Mo</th>\n                                        <th class=\"dow\">Tu</th>\n                                        <th class=\"dow\">We</th>\n                                        <th class=\"dow\">Th</th>\n                                        <th class=\"dow\">Fr</th>\n                                        <th class=\"dow\">Sa</th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr>\n                                        <td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td>\n                                        <td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td>\n                                        <td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td>\n                                        <td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td>\n                                        <td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td>\n                                        <td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td>\n                                        <td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td>\n                                        <td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td>\n                                        <td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td>\n                                        <td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td>\n                                        <td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td>\n                                        <td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td>\n                                        <td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td>\n                                        <td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td>\n                                        <td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td>\n                                        <td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td>\n                                        <td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td>\n                                        <td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td>\n                                        <td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td>\n                                        <td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td>\n                                        <td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td>\n                                        <td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td>\n                                        <td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td>\n                                        <td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td>\n                                        <td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td>\n                                        <td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td>\n                                        <td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td>\n                                        <td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td>\n                                        <td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td>\n                                        <td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td>\n                                        <td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td>\n                                        <td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td>\n                                        <td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td>\n                                        <td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td>\n                                        <td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td>\n                                        <td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td>\n                                        <td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-pencil\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"width-300\">\n        <div class=\"form-group\">\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled - Stay open on invalid (default)</div>\n            <div class=\"form-group margin-0\">\n                <div class=\"input-group\">\n                    <div class=\"rdt DatePicker form-group margin-0 width-100pct\">\n                        <div class=\"input-group\">\n                            <span class=\"input-group-addon\">\n                                <span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\">\n                                </span>\n                            </span>\n                            <div class=\"ClearableInput input-group\">\n                                <input type=\"text\" class=\"form-control\" placeholder=\"Enter valid date\" disabled=\"\" value=\"2025-11-21 01:07\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\">\n                            </div>\n                        </div>\n                        <div class=\"rdtPicker\">\n                            <div class=\"rdtDays\">\n                                <table>\n                                    <thead>\n                                        <tr>\n                                            <th class=\"rdtPrev\">\n                                                <span>‹</span>\n                                            </th>\n                                            <th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th>\n                                            <th class=\"rdtNext\">\n                                                <span>›</span>\n                                            </th>\n                                        </tr>\n                                        <tr>\n                                            <th class=\"dow\">Su</th>\n                                            <th class=\"dow\">Mo</th>\n                                            <th class=\"dow\">Tu</th>\n                                            <th class=\"dow\">We</th>\n                                            <th class=\"dow\">Th</th>\n                                            <th class=\"dow\">Fr</th>\n                                            <th class=\"dow\">Sa</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr>\n                                            <td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td>\n                                            <td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td>\n                                            <td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td>\n                                            <td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td>\n                                            <td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td>\n                                            <td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td>\n                                            <td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td>\n                                            <td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td>\n                                            <td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td>\n                                            <td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td>\n                                            <td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td>\n                                            <td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td>\n                                            <td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td>\n                                            <td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td>\n                                            <td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td>\n                                            <td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td>\n                                            <td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td>\n                                            <td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td>\n                                            <td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td>\n                                            <td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td>\n                                            <td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td>\n                                            <td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td>\n                                            <td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td>\n                                            <td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtActive rdtToday\">21</td>\n                                            <td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td>\n                                            <td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td>\n                                            <td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td>\n                                            <td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td>\n                                            <td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td>\n                                            <td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td>\n                                            <td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td>\n                                            <td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td>\n                                            <td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td>\n                                            <td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td>\n                                            <td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td>\n                                            <td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td>\n                                            <td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td>\n                                        </tr>\n                                    </tbody>\n                                    <tfoot>\n                                        <tr>\n                                            <td colspan=\"7\" class=\"rdtTimeToggle\">01:07</td>\n                                        </tr>\n                                    </tfoot>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"margin-top-10\">\n            <small>Saved value: </small>\n        </div>\n    </div>\n    <div class=\"width-300\">\n        <div class=\"form-group\">\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled - With error</div>\n            <div class=\"form-group has-feedback has-error margin-0\">\n                <div class=\"input-group\">\n                    <div class=\"rdt DatePicker form-group margin-0 width-100pct\">\n                        <div class=\"input-group\">\n                            <span class=\"input-group-addon\">\n                                <span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\">\n                                </span>\n                            </span>\n                            <div class=\"ClearableInput input-group\">\n                                <input type=\"text\" class=\"form-control\" placeholder=\"Enter a date\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px; padding-right: 10px;\">\n                            </div>\n                        </div>\n                        <div class=\"rdtPicker\">\n                            <div class=\"rdtDays\">\n                                <table>\n                                    <thead>\n                                        <tr>\n                                            <th class=\"rdtPrev\">\n                                                <span>‹</span>\n                                            </th>\n                                            <th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th>\n                                            <th class=\"rdtNext\">\n                                                <span>›</span>\n                                            </th>\n                                        </tr>\n                                        <tr>\n                                            <th class=\"dow\">Su</th>\n                                            <th class=\"dow\">Mo</th>\n                                            <th class=\"dow\">Tu</th>\n                                            <th class=\"dow\">We</th>\n                                            <th class=\"dow\">Th</th>\n                                            <th class=\"dow\">Fr</th>\n                                            <th class=\"dow\">Sa</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr>\n                                            <td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td>\n                                            <td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td>\n                                            <td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td>\n                                            <td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td>\n                                            <td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td>\n                                            <td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td>\n                                            <td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td>\n                                            <td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td>\n                                            <td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td>\n                                            <td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td>\n                                            <td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td>\n                                            <td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td>\n                                            <td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td>\n                                            <td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td>\n                                            <td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td>\n                                            <td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td>\n                                            <td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td>\n                                            <td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td>\n                                            <td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td>\n                                            <td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td>\n                                            <td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td>\n                                            <td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td>\n                                            <td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td>\n                                            <td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td>\n                                            <td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td>\n                                            <td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td>\n                                            <td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td>\n                                            <td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td>\n                                            <td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td>\n                                            <td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td>\n                                            <td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td>\n                                            <td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td>\n                                            <td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td>\n                                            <td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td>\n                                            <td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td>\n                                            <td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td>\n                                            <td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td>\n                                        </tr>\n                                    </tbody>\n                                    <tfoot>\n                                        <tr>\n                                            <td colspan=\"7\" class=\"rdtTimeToggle\">12:00</td>\n                                        </tr>\n                                    </tfoot>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n                <span class=\"help-block z-index-max\">\n                    <span>Required field</span>\n                </span>\n            </div>\n        </div>\n        <div class=\"margin-top-10\">\n            <small>Saved value: </small>\n        </div>\n    </div>\n    <div class=\"width-300\">\n        <div class=\"form-group\">\n            <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Controlled - Reset and close on invalid</div>\n            <div data-testid=\"demo-testid\" class=\"form-group margin-0\">\n                <div class=\"input-group\">\n                    <div class=\"rdt DatePicker form-group margin-0 width-100pct\">\n                        <div class=\"input-group\">\n                            <span class=\"input-group-addon\">\n                                <span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\">\n                                </span>\n                            </span>\n                            <div class=\"ClearableInput input-group\">\n                                <input type=\"text\" class=\"form-control\" placeholder=\"Enter date after last week\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\">\n                            </div>\n                        </div>\n                        <div class=\"rdtPicker\">\n                            <div class=\"rdtDays\">\n                                <table>\n                                    <thead>\n                                        <tr>\n                                            <th class=\"rdtPrev\">\n                                                <span>‹</span>\n                                            </th>\n                                            <th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th>\n                                            <th class=\"rdtNext\">\n                                                <span>›</span>\n                                            </th>\n                                        </tr>\n                                        <tr>\n                                            <th class=\"dow\">Su</th>\n                                            <th class=\"dow\">Mo</th>\n                                            <th class=\"dow\">Tu</th>\n                                            <th class=\"dow\">We</th>\n                                            <th class=\"dow\">Th</th>\n                                            <th class=\"dow\">Fr</th>\n                                            <th class=\"dow\">Sa</th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr>\n                                            <td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td>\n                                            <td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td>\n                                            <td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td>\n                                            <td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td>\n                                            <td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td>\n                                            <td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td>\n                                            <td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td>\n                                            <td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td>\n                                            <td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td>\n                                            <td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td>\n                                            <td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td>\n                                            <td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td>\n                                            <td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td>\n                                            <td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td>\n                                            <td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td>\n                                            <td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td>\n                                            <td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td>\n                                            <td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td>\n                                            <td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td>\n                                            <td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td>\n                                            <td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td>\n                                            <td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td>\n                                            <td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td>\n                                            <td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtToday\">21</td>\n                                            <td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td>\n                                            <td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td>\n                                            <td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td>\n                                            <td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td>\n                                            <td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td>\n                                            <td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td>\n                                            <td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td>\n                                        </tr>\n                                        <tr>\n                                            <td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td>\n                                            <td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td>\n                                            <td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td>\n                                            <td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td>\n                                            <td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td>\n                                            <td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td>\n                                            <td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"input-group-btn\">\n                        <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-pencil\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"margin-top-10\">\n            <small>Saved value: </small>\n        </div>\n    </div>\n    <div class=\"width-300\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableDateInput (only month)</div>\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"rdt DatePicker form-group margin-0 width-100pct\">\n                    <div class=\"input-group\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input type=\"text\" class=\"form-control\" placeholder=\"Target month\" disabled=\"\" value=\"\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\">\n                        </div>\n                    </div>\n                    <div class=\"rdtPicker\">\n                        <div class=\"rdtMonths\">\n                            <table>\n                                <thead>\n                                    <tr>\n                                        <th class=\"rdtPrev\">\n                                            <span>‹</span>\n                                        </th>\n                                        <th class=\"rdtSwitch\" colspan=\"2\">2025</th>\n                                        <th class=\"rdtNext\">\n                                            <span>›</span>\n                                        </th>\n                                    </tr>\n                                </thead>\n                            </table>\n                            <table>\n                                <tbody>\n                                    <tr>\n                                        <td class=\"rdtMonth\" data-value=\"0\">Jan</td>\n                                        <td class=\"rdtMonth\" data-value=\"1\">Feb</td>\n                                        <td class=\"rdtMonth\" data-value=\"2\">Mar</td>\n                                        <td class=\"rdtMonth\" data-value=\"3\">Apr</td>\n                                    </tr>\n                                    <tr>\n                                        <td class=\"rdtMonth\" data-value=\"4\">May</td>\n                                        <td class=\"rdtMonth\" data-value=\"5\">Jun</td>\n                                        <td class=\"rdtMonth\" data-value=\"6\">Jul</td>\n                                        <td class=\"rdtMonth\" data-value=\"7\">Aug</td>\n                                    </tr>\n                                    <tr>\n                                        <td class=\"rdtMonth\" data-value=\"8\">Sep</td>\n                                        <td class=\"rdtMonth\" data-value=\"9\">Oct</td>\n                                        <td class=\"rdtMonth\" data-value=\"10\">Nov</td>\n                                        <td class=\"rdtMonth\" data-value=\"11\">Dec</td>\n                                    </tr>\n                                </tbody>\n                            </table>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-pencil\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"width-300\">\n        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">SaveableDateInput (disabled)</div>\n        <div class=\"form-group\">\n            <div class=\"input-group\">\n                <div class=\"rdt DatePicker form-group margin-0 width-100pct\">\n                    <div class=\"input-group\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input type=\"text\" class=\"form-control\" disabled=\"\" value=\"11/21/2025 1:07 PM\" style=\"border-top-right-radius: 0px; border-bottom-right-radius: 0px;\">\n                        </div>\n                    </div>\n                    <div class=\"rdtPicker\">\n                        <div class=\"rdtDays\">\n                            <table>\n                                <thead>\n                                    <tr>\n                                        <th class=\"rdtPrev\">\n                                            <span>‹</span>\n                                        </th>\n                                        <th class=\"rdtSwitch\" colspan=\"5\" data-value=\"10\">November 2025</th>\n                                        <th class=\"rdtNext\">\n                                            <span>›</span>\n                                        </th>\n                                    </tr>\n                                    <tr>\n                                        <th class=\"dow\">Su</th>\n                                        <th class=\"dow\">Mo</th>\n                                        <th class=\"dow\">Tu</th>\n                                        <th class=\"dow\">We</th>\n                                        <th class=\"dow\">Th</th>\n                                        <th class=\"dow\">Fr</th>\n                                        <th class=\"dow\">Sa</th>\n                                    </tr>\n                                </thead>\n                                <tbody>\n                                    <tr>\n                                        <td data-value=\"26\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">26</td>\n                                        <td data-value=\"27\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">27</td>\n                                        <td data-value=\"28\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">28</td>\n                                        <td data-value=\"29\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">29</td>\n                                        <td data-value=\"30\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">30</td>\n                                        <td data-value=\"31\" data-month=\"9\" data-year=\"2025\" class=\"rdtDay rdtOld\">31</td>\n                                        <td data-value=\"1\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">1</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"2\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">2</td>\n                                        <td data-value=\"3\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">3</td>\n                                        <td data-value=\"4\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">4</td>\n                                        <td data-value=\"5\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">5</td>\n                                        <td data-value=\"6\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">6</td>\n                                        <td data-value=\"7\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">7</td>\n                                        <td data-value=\"8\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">8</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"9\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">9</td>\n                                        <td data-value=\"10\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">10</td>\n                                        <td data-value=\"11\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">11</td>\n                                        <td data-value=\"12\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">12</td>\n                                        <td data-value=\"13\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">13</td>\n                                        <td data-value=\"14\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">14</td>\n                                        <td data-value=\"15\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">15</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"16\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">16</td>\n                                        <td data-value=\"17\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">17</td>\n                                        <td data-value=\"18\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">18</td>\n                                        <td data-value=\"19\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">19</td>\n                                        <td data-value=\"20\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">20</td>\n                                        <td data-value=\"21\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay rdtActive rdtToday\">21</td>\n                                        <td data-value=\"22\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">22</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"23\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">23</td>\n                                        <td data-value=\"24\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">24</td>\n                                        <td data-value=\"25\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">25</td>\n                                        <td data-value=\"26\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">26</td>\n                                        <td data-value=\"27\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">27</td>\n                                        <td data-value=\"28\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">28</td>\n                                        <td data-value=\"29\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">29</td>\n                                    </tr>\n                                    <tr>\n                                        <td data-value=\"30\" data-month=\"10\" data-year=\"2025\" class=\"rdtDay\">30</td>\n                                        <td data-value=\"1\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">1</td>\n                                        <td data-value=\"2\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">2</td>\n                                        <td data-value=\"3\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">3</td>\n                                        <td data-value=\"4\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">4</td>\n                                        <td data-value=\"5\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">5</td>\n                                        <td data-value=\"6\" data-month=\"11\" data-year=\"2025\" class=\"rdtDay rdtNew\">6</td>\n                                    </tr>\n                                </tbody>\n                                <tfoot>\n                                    <tr>\n                                        <td colspan=\"7\" class=\"rdtTimeToggle\">1:07 PM</td>\n                                    </tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"input-group-btn\">\n                    <button type=\"button\" class=\"btn btn-primary btn-icon-only btn-component\" disabled=\"\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-pencil\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "placeholder",
+                      "type": "String",
+                      "default": "",
+                      "description": "The input placeholder."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Date | Moment | String",
+                      "default": "",
+                      "description": "The actual input value."
+                    },
+                    {
+                      "name": "isValid",
+                      "type": "boolean",
+                      "default": "true",
+                      "description": "Used to control the save button from the outside to disable it in case the entered value is not valid."
+                    },
+                    {
+                      "name": "errorMessage",
+                      "type": "string | ReactNode",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "hideErrorIcon",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false."
+                    },
+                    {
+                      "name": "onValueChanged",
+                      "type": "(value: Moment | string, previousValue: Moment | string | Date) => void",
+                      "default": "",
+                      "description": "Callback function triggered when the value changes and is saved."
+                    },
+                    {
+                      "name": "onInputChange",
+                      "type": "(value: Moment | string, isValid: boolean) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation."
+                    },
+                    {
+                      "name": "onEnterEdit",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "onExitEdit",
+                      "type": "(wasSaved: boolean) => void",
+                      "default": "",
+                      "description": "Callback function that gets triggered when edit mode is exited (either saved or cancelled)."
+                    },
+                    {
+                      "name": "onCancel",
+                      "type": "VoidFunction",
+                      "default": "",
+                      "description": "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."
+                    },
+                    {
+                      "name": "invalidExitBehavior",
+                      "type": "\"stay-open\" | \"reset-and-close\"",
+                      "default": "\"stay-open\"",
+                      "description": "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"
+                    },
+                    {
+                      "name": "buttonStyle",
+                      "type": "\"default\" | \"primary\"",
+                      "default": "",
+                      "description": "Defines the button style: default or primary."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "Attributes",
+                      "default": "",
+                      "description": "Additional HTML attributes to be set on the input element."
+                    },
+                    {
+                      "name": "datePickerProps",
+                      "type": "DatePickerProps",
+                      "default": "",
+                      "description": "Props passed directly to the date picker component."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Disables the component so the user cannot enter the edit mode."
+                    },
+                    {
+                      "name": "inputClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the input itself."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}