@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,287 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:29.126Z",
+    "source": "https://uikit.developers.rio.cloud/#components/datepickers",
+    "category": "Components",
+    "section": "Pickers",
+    "slug": "components/datepickers",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "847de6909916a89e478bfa6bee776881842666bd9c97952bbc49fad8be1a1d58"
+  },
+  "title": "DatePicker",
+  "lead": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
+  "content": [
+    {
+      "heading": "DatePicker",
+      "body": "It can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\n> Note: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"row margin-bottom-10\"><div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\"><label for=\"1\" class=\"display-flex flex-wrap justify-content-between\"><span>Default</span><span class=\"text-italic\">Format: YYYY-MM-DD HH:mm</span></label><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"1\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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></div><div class=\"row margin-bottom-10\"><div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\"><label for=\"2\" class=\"display-flex flex-wrap justify-content-between\"><span>No time</span><span class=\"text-italic\">Format: YYYY-MM-DD</span></label><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"2\" placeholder=\"Select Date\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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><div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\"><label for=\"3\">Only month</label><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"3\" placeholder=\"Select Month\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtMonths\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"2\">2025</th><th class=\"rdtNext\"><span>›</span></th></tr></thead></table><table><tbody><tr><td class=\"rdtMonth\" data-value=\"0\">Jan</td><td class=\"rdtMonth\" data-value=\"1\">Feb</td><td class=\"rdtMonth\" data-value=\"2\">Mar</td><td class=\"rdtMonth\" data-value=\"3\">Apr</td></tr><tr><td class=\"rdtMonth\" data-value=\"4\">May</td><td class=\"rdtMonth\" data-value=\"5\">Jun</td><td class=\"rdtMonth\" data-value=\"6\">Jul</td><td class=\"rdtMonth\" data-value=\"7\">Aug</td></tr><tr><td class=\"rdtMonth\" data-value=\"8\">Sep</td><td class=\"rdtMonth\" data-value=\"9\">Oct</td><td class=\"rdtMonth\" data-value=\"10\">Nov</td><td class=\"rdtMonth\" data-value=\"11\">Dec</td></tr></tbody></table></div></div></div></div><div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\"><label for=\"4\">Only time</label><div class=\"rdt DatePicker form-group align-right\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"4\" placeholder=\"Select Time\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtTime\"><table><tbody><tr><td><div class=\"rdtCounters\"><div class=\"rdtCounter\"><span class=\"rdtBtn\">▲</span><div class=\"rdtCount\">12</div><span class=\"rdtBtn\">▼</span></div><div class=\"rdtCounterSeparator\">:</div><div class=\"rdtCounter\"><span class=\"rdtBtn\">▲</span><div class=\"rdtCount\">00</div><span class=\"rdtBtn\">▼</span></div><div class=\"rdtCounter\"><span class=\"rdtBtn\">▲</span><div class=\"rdtCount\">AM</div><span class=\"rdtBtn\">▼</span></div></div></td></tr></tbody></table></div></div></div></div></div><div class=\"row margin-bottom-10\"><div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\"><label for=\"5\">Not closing when selecting</label><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"5\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div></div><div class=\"col-12 col-sm-8 col-lg-6 col-xl-4\"><label for=\"6\">With min-width</label><div class=\"rdt DatePicker form-group\"><div class=\"input-group\" style=\"width: 350px; max-width: 100%;\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"6\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div></div></div><div class=\"row margin-bottom-10\"><div class=\"col-12\"><label for=\"7\">ClearableInput and mandatory value</label></div><div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\"><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"7\" value=\"\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div></div><div class=\"col-12\"><label for=\"8\">ClearableInput and optional value</label></div><div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\"><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"8\" value=\"\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div></div></div><div class=\"margin-bottom-10 display-flex flex-wrap gap-15\"><div><label for=\"rdp-error-1\">DatePicker with wrapped error feedback</label><div class=\"form-group has-feedback has-error width-200\"><div class=\"rdt DatePicker form-group margin-0\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"rdp-error-1\" placeholder=\"Select Date\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block\"><span>This is an error message</span></span></div></div><div><label for=\"rdp-error-2\">With clearable and error feedback</label><div class=\"form-group has-feedback has-error width-200\"><div class=\"rdt DatePicker form-group margin-0\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"rdp-error-2\" placeholder=\"Select Date\" value=\"2025-11-21 01:07\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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><span class=\"form-control-feedback rioglyph rioglyph-error-sign\"></span><span class=\"help-block\"><span>This is an error message</span></span></div></div></div><div class=\"h6 margin-top-25 margin-bottom-0\">Usage of two DatePicker as a date range</div><div class=\"display-flex gap-10 max-width-400 margin-bottom-10\"><div class=\"flex-1-1-0\"><label for=\"from\">From:</label><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"from\" placeholder=\"Select Date\" value=\"\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div></div><div class=\"flex-1-1-0\"><label for=\"to\">To:</label><div class=\"rdt DatePicker form-group align-right\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"to\" placeholder=\"Select Date\" value=\"\"><span class=\"clearButton\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div></div></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"max-width-400 margin-top-10\"><label for=\"unspecified\" class=\"display-flex flex-wrap justify-content-between\"><span>Unspecified locale</span><span class=\"text-italic\">Format: MM/DD/YYYY</span></label><div class=\"rdt DatePicker form-group\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" id=\"unspecified\" placeholder=\"Select Date\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div></div><div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\"><div><span class=\"label label-info label-condensed label-filled\">Note</span></div><div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">Watch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our <a href=\"#start/guidelines/writing#date-formats\">writing guidelines</a>.</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import type { Moment } from 'moment';\nimport { Link } from 'react-router-dom';\n\nimport DatePicker from '@rio-cloud/rio-uikit/DatePicker';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport { Note } from '../../../components/Note';\n\nexport default () => (\n    <div>\n        <div className='row margin-bottom-10'>\n            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>\n                <label htmlFor='1' className='display-flex flex-wrap justify-content-between'>\n                    <span>Default</span>\n                    <span className='text-italic'>Format: YYYY-MM-DD HH:mm</span>\n                </label>\n                <DatePicker\n                    id='1'\n                    dateFormat='YYYY-MM-DD'\n                    timeFormat='hh:mm'\n                    onChange={(result: Moment | string) => console.log(result)}\n                />\n            </div>\n        </div>\n\n        <div className='row margin-bottom-10'>\n            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>\n                <label htmlFor='2' className='display-flex flex-wrap justify-content-between'>\n                    <span>No time</span>\n                    <span className='text-italic'>Format: YYYY-MM-DD</span>\n                </label>\n                <DatePicker\n                    id='2'\n                    inputProps={{ placeholder: 'Select Date' }}\n                    dateFormat='YYYY-MM-DD'\n                    timeFormat={false}\n                    onChange={(result: Moment | string) => console.log(result)}\n                />\n            </div>\n            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>\n                <label htmlFor='3'>Only month</label>\n                <DatePicker\n                    id='3'\n                    inputProps={{ placeholder: 'Select Month' }}\n                    dateFormat='YYYY-MM'\n                    timeFormat={false}\n                    onChange={(result: Moment | string) => console.log(result)}\n                />\n            </div>\n            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>\n                <label htmlFor='4'>Only time</label>\n                <DatePicker\n                    inputProps={{ placeholder: 'Select Time', id: '4' }}\n                    dateFormat={false}\n                    alignRight\n                    onChange={(result: Moment | string) => console.log(result)}\n                />\n            </div>\n        </div>\n\n        <div className='row margin-bottom-10'>\n            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>\n                <label htmlFor='5'>Not closing when selecting</label>\n                <DatePicker id='5' closeOnSelect={false} onChange={(result: Moment | string) => console.log(result)} />\n            </div>\n            <div className='col-12 col-sm-8 col-lg-6 col-xl-4'>\n                <label htmlFor='6'>With min-width</label>\n                <DatePicker id='6' minWidth={350} onChange={(result: Moment | string) => console.log(result)} />\n            </div>\n        </div>\n\n        <div className='row margin-bottom-10'>\n            <div className='col-12'>\n                <label htmlFor='7'>ClearableInput and mandatory value</label>\n            </div>\n            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>\n                <DatePicker id='7' clearableInput onChange={(result: Moment | string) => console.log(result)} />\n            </div>\n            <div className='col-12'>\n                <label htmlFor='8'>ClearableInput and optional value</label>\n            </div>\n            <div className='col-12 col-sm-4 col-lg-3 col-xl-2'>\n                <DatePicker\n                    id='8'\n                    clearableInput\n                    mandatory={false}\n                    onChange={(result: Moment | string) => console.log(result)}\n                />\n            </div>\n        </div>\n\n        <div className='margin-bottom-10 display-flex flex-wrap gap-15'>\n            <div>\n                <label htmlFor='rdp-error-1'>DatePicker with wrapped error feedback</label>\n                <div className='form-group has-feedback has-error width-200'>\n                    <DatePicker id='rdp-error-1' inputProps={{ placeholder: 'Select Date' }} className='margin-0' />\n                    <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n                    <span className='help-block'>\n                        <span>This is an error message</span>\n                    </span>\n                </div>\n            </div>\n            <div>\n                <label htmlFor='rdp-error-2'>With clearable and error feedback</label>\n                <div className='form-group has-feedback has-error width-200'>\n                    <DatePicker\n                        id='rdp-error-2'\n                        value={new Date()}\n                        dateFormat='YYYY-MM-DD'\n                        timeFormat='hh:mm'\n                        inputProps={{ placeholder: 'Select Date' }}\n                        className='margin-0'\n                        clearableInput\n                    />\n                    <span className='form-control-feedback rioglyph rioglyph-error-sign' />\n                    <span className='help-block'>\n                        <span>This is an error message</span>\n                    </span>\n                </div>\n            </div>\n        </div>\n\n        <div className='h6 margin-top-25 margin-bottom-0'>Usage of two DatePicker as a date range</div>\n        <div className='display-flex gap-10 max-width-400 margin-bottom-10'>\n            <div className='flex-1-1-0'>\n                <label htmlFor='from'>From:</label>\n                <DatePicker id='from' inputProps={{ placeholder: 'Select Date' }} clearableInput />\n            </div>\n            <div className='flex-1-1-0'>\n                <label htmlFor='to'>To:</label>\n                <DatePicker id='to' inputProps={{ placeholder: 'Select Date' }} clearableInput alignRight />\n            </div>\n        </div>\n\n        <Divider />\n        <div className='max-width-400 margin-top-10'>\n            <label htmlFor='unspecified' className='display-flex flex-wrap justify-content-between'>\n                <span>Unspecified locale</span>\n                <span className='text-italic'>Format: MM/DD/YYYY</span>\n            </label>\n            <DatePicker id='unspecified' inputProps={{ placeholder: 'Select Date' }} />\n        </div>\n        <Note>\n            Watch out: When no locale is defined, the component falls back to the default american format, which should\n            be avoided. See our <Link to='/start/guidelines/writing#date-formats'>writing guidelines</Link>.\n        </Note>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"row margin-bottom-10\">\n        <div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\">\n            <label for=\"1\" class=\"display-flex flex-wrap justify-content-between\">\n                <span>Default</span>\n                <span class=\"text-italic\">Format: YYYY-MM-DD HH:mm</span>\n            </label>\n            <div class=\"rdt DatePicker form-group\">\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\" id=\"1\" value=\"\">\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>\n    </div>\n    <div class=\"row margin-bottom-10\">\n        <div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\">\n            <label for=\"2\" class=\"display-flex flex-wrap justify-content-between\">\n                <span>No time</span>\n                <span class=\"text-italic\">Format: YYYY-MM-DD</span>\n            </label>\n            <div class=\"rdt DatePicker form-group\">\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\" id=\"2\" placeholder=\"Select Date\" value=\"\">\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>\n        <div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\">\n            <label for=\"3\">Only month</label>\n            <div class=\"rdt DatePicker form-group\">\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\" id=\"3\" placeholder=\"Select Month\" value=\"\">\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>\n        <div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\">\n            <label for=\"4\">Only time</label>\n            <div class=\"rdt DatePicker form-group align-right\">\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\" id=\"4\" placeholder=\"Select Time\" value=\"\">\n                    </div>\n                </div>\n                <div class=\"rdtPicker\">\n                    <div class=\"rdtTime\">\n                        <table>\n                            <tbody>\n                                <tr>\n                                    <td>\n                                        <div class=\"rdtCounters\">\n                                            <div class=\"rdtCounter\">\n                                                <span class=\"rdtBtn\">▲</span>\n                                                <div class=\"rdtCount\">12</div>\n                                                <span class=\"rdtBtn\">▼</span>\n                                            </div>\n                                            <div class=\"rdtCounterSeparator\">:</div>\n                                            <div class=\"rdtCounter\">\n                                                <span class=\"rdtBtn\">▲</span>\n                                                <div class=\"rdtCount\">00</div>\n                                                <span class=\"rdtBtn\">▼</span>\n                                            </div>\n                                            <div class=\"rdtCounter\">\n                                                <span class=\"rdtBtn\">▲</span>\n                                                <div class=\"rdtCount\">AM</div>\n                                                <span class=\"rdtBtn\">▼</span>\n                                            </div>\n                                        </div>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"row margin-bottom-10\">\n        <div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\">\n            <label for=\"5\">Not closing when selecting</label>\n            <div class=\"rdt DatePicker form-group\">\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\" id=\"5\" value=\"\">\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 AM</td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-12 col-sm-8 col-lg-6 col-xl-4\">\n            <label for=\"6\">With min-width</label>\n            <div class=\"rdt DatePicker form-group\">\n                <div class=\"input-group\" style=\"width: 350px; max-width: 100%;\">\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\" id=\"6\" value=\"\">\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 AM</td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"row margin-bottom-10\">\n        <div class=\"col-12\">\n            <label for=\"7\">ClearableInput and mandatory value</label>\n        </div>\n        <div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\">\n            <div class=\"rdt DatePicker form-group\">\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\" id=\"7\" value=\"\">\n                        <span class=\"clearButton\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\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 AM</td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-12\">\n            <label for=\"8\">ClearableInput and optional value</label>\n        </div>\n        <div class=\"col-12 col-sm-4 col-lg-3 col-xl-2\">\n            <div class=\"rdt DatePicker form-group\">\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\" id=\"8\" value=\"\">\n                        <span class=\"clearButton\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\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 AM</td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"margin-bottom-10 display-flex flex-wrap gap-15\">\n        <div>\n            <label for=\"rdp-error-1\">DatePicker with wrapped error feedback</label>\n            <div class=\"form-group has-feedback has-error width-200\">\n                <div class=\"rdt DatePicker form-group margin-0\">\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\" id=\"rdp-error-1\" placeholder=\"Select Date\" value=\"\">\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 AM</td>\n                                    </tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                </div>\n                <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n                </span>\n                <span class=\"help-block\">\n                    <span>This is an error message</span>\n                </span>\n            </div>\n        </div>\n        <div>\n            <label for=\"rdp-error-2\">With clearable and error feedback</label>\n            <div class=\"form-group has-feedback has-error width-200\">\n                <div class=\"rdt DatePicker form-group margin-0\">\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\" id=\"rdp-error-2\" placeholder=\"Select Date\" value=\"2025-11-21 01:07\">\n                            <span class=\"clearButton\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\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                <span class=\"form-control-feedback rioglyph rioglyph-error-sign\">\n                </span>\n                <span class=\"help-block\">\n                    <span>This is an error message</span>\n                </span>\n            </div>\n        </div>\n    </div>\n    <div class=\"h6 margin-top-25 margin-bottom-0\">Usage of two DatePicker as a date range</div>\n    <div class=\"display-flex gap-10 max-width-400 margin-bottom-10\">\n        <div class=\"flex-1-1-0\">\n            <label for=\"from\">From:</label>\n            <div class=\"rdt DatePicker form-group\">\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\" id=\"from\" placeholder=\"Select Date\" value=\"\">\n                        <span class=\"clearButton\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\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 AM</td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"flex-1-1-0\">\n            <label for=\"to\">To:</label>\n            <div class=\"rdt DatePicker form-group align-right\">\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\" id=\"to\" placeholder=\"Select Date\" value=\"\">\n                        <span class=\"clearButton\">\n                            <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                            </span>\n                        </span>\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 AM</td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"max-width-400 margin-top-10\">\n        <label for=\"unspecified\" class=\"display-flex flex-wrap justify-content-between\">\n            <span>Unspecified locale</span>\n            <span class=\"text-italic\">Format: MM/DD/YYYY</span>\n        </label>\n        <div class=\"rdt DatePicker form-group\">\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\" id=\"unspecified\" placeholder=\"Select Date\" value=\"\">\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 AM</td>\n                            </tr>\n                        </tfoot>\n                    </table>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0\" data-capture-callout=\"true\">\n        <div>\n            <span class=\"label label-info label-condensed label-filled\">Note</span>\n        </div>\n        <div class=\"width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1\">Watch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our <a href=\"#start/guidelines/writing#date-formats\">writing guidelines</a>.</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "An id used for the internal input element."
+                    },
+                    {
+                      "name": "initialValue",
+                      "type": "Date / Moment",
+                      "default": "",
+                      "description": "Default value of the DatePicker (date or moment)."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component"
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(value: Moment | string, isValid: boolean) => void",
+                      "default": "() => {}",
+                      "description": "Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments."
+                    },
+                    {
+                      "name": "locale",
+                      "type": "String",
+                      "default": "'en-GB'",
+                      "description": "Locale for date format."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens upwards or not."
+                    },
+                    {
+                      "name": "clearableInput",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the clearableInput button is shown."
+                    },
+                    {
+                      "name": "closeOnSelect",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Once the day has been selected, the date picker will be closed automatically."
+                    },
+                    {
+                      "name": "alignRight",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Opens the picker right aligned."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent."
+                    },
+                    {
+                      "name": "dateValidation",
+                      "type": "(date: Date | string | Moment) => boolean",
+                      "default": "",
+                      "description": "Overwrites the internal date validation function in case you need to customize it."
+                    },
+                    {
+                      "name": "dateFormat",
+                      "type": "Boolean | String",
+                      "default": "",
+                      "description": "Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker."
+                    },
+                    {
+                      "name": "timeFormat",
+                      "type": "Boolean | String",
+                      "default": "",
+                      "description": "Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker."
+                    },
+                    {
+                      "name": "mandatory",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether the input shows an error when the date is invalid or cleared."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "React.HTMLProps<HTMLInputElement>",
+                      "default": "",
+                      "description": "Defines additional attributes for the input element of the component."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the DatePicker element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group display-flex gap-15\"><div class=\"rdt DatePicker form-group min-width-200\"><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-calendar\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input type=\"text\" class=\"form-control\" placeholder=\"Select Date\" value=\"\"></div></div><div class=\"rdtPicker\"><div class=\"rdtDays\"><table><thead><tr><th class=\"rdtPrev\"><span>‹</span></th><th class=\"rdtSwitch\" colspan=\"5\" data-value=\"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 AM</td></tr></tfoot></table></div></div></div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Reset</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport type { Moment } from 'moment';\n\nimport DatePicker from '@rio-cloud/rio-uikit/DatePicker';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    const [value, setValue] = useState<Date | null>();\n\n    const handleReset = () => setValue(null);\n    const handleDateChange = (selectedDate: Date) => setValue(selectedDate);\n\n    const inputProps: React.HTMLProps<HTMLInputElement> = { placeholder: 'Select Date' };\n\n    if (!value) {\n        inputProps.value = '';\n    }\n\n    return (\n        <div className='form-group display-flex gap-15'>\n            <DatePicker className='min-width-200' inputProps={inputProps} value={value} onChange={handleDateChange} />\n            <Button onClick={handleReset}>Reset</Button>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"form-group display-flex gap-15\">\n    <div class=\"rdt DatePicker form-group min-width-200\">\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=\"Select Date\" value=\"\">\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 AM</td>\n                        </tr>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    </div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Reset</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "An id used for the internal input element."
+                    },
+                    {
+                      "name": "initialValue",
+                      "type": "Date / Moment",
+                      "default": "",
+                      "description": "Default value of the DatePicker (date or moment)."
+                    },
+                    {
+                      "name": "value",
+                      "type": "Object",
+                      "default": "",
+                      "description": "Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component"
+                    },
+                    {
+                      "name": "onChange",
+                      "type": "(value: Moment | string, isValid: boolean) => void",
+                      "default": "() => {}",
+                      "description": "Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments."
+                    },
+                    {
+                      "name": "locale",
+                      "type": "String",
+                      "default": "'en-GB'",
+                      "description": "Locale for date format."
+                    },
+                    {
+                      "name": "dropup",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the dropdown opens upwards or not."
+                    },
+                    {
+                      "name": "clearableInput",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the clearableInput button is shown."
+                    },
+                    {
+                      "name": "closeOnSelect",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Once the day has been selected, the date picker will be closed automatically."
+                    },
+                    {
+                      "name": "alignRight",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Opens the picker right aligned."
+                    },
+                    {
+                      "name": "minWidth",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent."
+                    },
+                    {
+                      "name": "dateValidation",
+                      "type": "(date: Date | string | Moment) => boolean",
+                      "default": "",
+                      "description": "Overwrites the internal date validation function in case you need to customize it."
+                    },
+                    {
+                      "name": "dateFormat",
+                      "type": "Boolean | String",
+                      "default": "",
+                      "description": "Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker."
+                    },
+                    {
+                      "name": "timeFormat",
+                      "type": "Boolean | String",
+                      "default": "",
+                      "description": "Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker."
+                    },
+                    {
+                      "name": "mandatory",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether the input shows an error when the date is invalid or cleared."
+                    },
+                    {
+                      "name": "inputProps",
+                      "type": "React.HTMLProps<HTMLInputElement>",
+                      "default": "",
+                      "description": "Defines additional attributes for the input element of the component."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the DatePicker element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Selects are a simple alternative for choosing dates</label><div class=\"display-flex gap-5\"><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">01</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">01</span><input type=\"hidden\" value=\"1\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">02</span><input type=\"hidden\" value=\"2\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">03</span><input type=\"hidden\" value=\"3\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">04</span><input type=\"hidden\" value=\"4\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">05</span><input type=\"hidden\" value=\"5\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">06</span><input type=\"hidden\" value=\"6\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">07</span><input type=\"hidden\" value=\"7\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">08</span><input type=\"hidden\" value=\"8\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">09</span><input type=\"hidden\" value=\"9\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">10</span><input type=\"hidden\" value=\"10\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"11\" data-item-index=\"10\"><span class=\"selected-option-dropdown-item\">11</span><input type=\"hidden\" value=\"11\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"12\" data-item-index=\"11\"><span class=\"selected-option-dropdown-item\">12</span><input type=\"hidden\" value=\"12\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"13\" data-item-index=\"12\"><span class=\"selected-option-dropdown-item\">13</span><input type=\"hidden\" value=\"13\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"14\" data-item-index=\"13\"><span class=\"selected-option-dropdown-item\">14</span><input type=\"hidden\" value=\"14\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"15\" data-item-index=\"14\"><span class=\"selected-option-dropdown-item\">15</span><input type=\"hidden\" value=\"15\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"16\" data-item-index=\"15\"><span class=\"selected-option-dropdown-item\">16</span><input type=\"hidden\" value=\"16\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"17\" data-item-index=\"16\"><span class=\"selected-option-dropdown-item\">17</span><input type=\"hidden\" value=\"17\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"18\" data-item-index=\"17\"><span class=\"selected-option-dropdown-item\">18</span><input type=\"hidden\" value=\"18\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"19\" data-item-index=\"18\"><span class=\"selected-option-dropdown-item\">19</span><input type=\"hidden\" value=\"19\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"20\" data-item-index=\"19\"><span class=\"selected-option-dropdown-item\">20</span><input type=\"hidden\" value=\"20\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"21\" data-item-index=\"20\"><span class=\"selected-option-dropdown-item\">21</span><input type=\"hidden\" value=\"21\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"22\" data-item-index=\"21\"><span class=\"selected-option-dropdown-item\">22</span><input type=\"hidden\" value=\"22\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"23\" data-item-index=\"22\"><span class=\"selected-option-dropdown-item\">23</span><input type=\"hidden\" value=\"23\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"24\" data-item-index=\"23\"><span class=\"selected-option-dropdown-item\">24</span><input type=\"hidden\" value=\"24\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"25\" data-item-index=\"24\"><span class=\"selected-option-dropdown-item\">25</span><input type=\"hidden\" value=\"25\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"26\" data-item-index=\"25\"><span class=\"selected-option-dropdown-item\">26</span><input type=\"hidden\" value=\"26\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"27\" data-item-index=\"26\"><span class=\"selected-option-dropdown-item\">27</span><input type=\"hidden\" value=\"27\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"28\" data-item-index=\"27\"><span class=\"selected-option-dropdown-item\">28</span><input type=\"hidden\" value=\"28\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"29\" data-item-index=\"28\"><span class=\"selected-option-dropdown-item\">29</span><input type=\"hidden\" value=\"29\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"30\" data-item-index=\"29\"><span class=\"selected-option-dropdown-item\">30</span><input type=\"hidden\" value=\"30\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"31\" data-item-index=\"30\"><span class=\"selected-option-dropdown-item\">31</span><input type=\"hidden\" value=\"31\"></a></li></ul></div><div class=\"select dropdown min-width-150 dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">January</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"January\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">January</span><input type=\"hidden\" value=\"January\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"February\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">February</span><input type=\"hidden\" value=\"February\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"March\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">March</span><input type=\"hidden\" value=\"March\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"April\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">April</span><input type=\"hidden\" value=\"April\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"May\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">May</span><input type=\"hidden\" value=\"May\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"June\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">June</span><input type=\"hidden\" value=\"June\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"July\" data-item-index=\"6\"><span class=\"selected-option-dropdown-item\">July</span><input type=\"hidden\" value=\"July\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"August\" data-item-index=\"7\"><span class=\"selected-option-dropdown-item\">August</span><input type=\"hidden\" value=\"August\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"September\" data-item-index=\"8\"><span class=\"selected-option-dropdown-item\">September</span><input type=\"hidden\" value=\"September\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"October\" data-item-index=\"9\"><span class=\"selected-option-dropdown-item\">October</span><input type=\"hidden\" value=\"October\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"November\" data-item-index=\"10\"><span class=\"selected-option-dropdown-item\">November</span><input type=\"hidden\" value=\"November\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"December\" data-item-index=\"11\"><span class=\"selected-option-dropdown-item\">December</span><input type=\"hidden\" value=\"December\"></a></li></ul></div><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">2022</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2022\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">2022</span><input type=\"hidden\" value=\"2022\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2023\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">2023</span><input type=\"hidden\" value=\"2023\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2024\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">2024</span><input type=\"hidden\" value=\"2024\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2025\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">2025</span><input type=\"hidden\" value=\"2025\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2026\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">2026</span><input type=\"hidden\" value=\"2026\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2027\" data-item-index=\"5\"><span class=\"selected-option-dropdown-item\">2027</span><input type=\"hidden\" value=\"2027\"></a></li></ul></div></div><p class=\"margin-top-20 text-color-dark\">Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)</p></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport head from 'lodash/fp/head';\nimport padCharsStart from 'lodash/fp/padCharsStart';\n\nimport Select from '@rio-cloud/rio-uikit/Select';\n\nconst START_YEAR = 2022;\n\ntype Item = {\n    id: string;\n    label: string;\n};\n\nconst days: Item[] = [...Array(32).keys()]\n    .filter(Boolean)\n    .map(value => ({ id: `${value}`, label: `${padCharsStart('0')(2)(value)}` }));\n\nconst months = [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n].map(value => ({ id: `${value}`, label: `${value}` }));\n\nconst years: Item[] = Array.from({ length: 6 }, (_, index) => ({\n    id: `${index + START_YEAR}`,\n    label: `${index + START_YEAR}`,\n}));\n\nconst DatePickerSelectExample = () => {\n    const [selectedDay, setSelectedDay] = useState<Item>(head(days) as Item);\n    const [selectedMonth, setSelectedMonth] = useState<Item>(head(months) as Item);\n    const [selectedYear, setSelectedYear] = useState<Item>(head(years) as Item);\n\n    const handleSelectDay = (value: Item) => setSelectedDay(value);\n    const handleSelectMonth = (value: Item) => setSelectedMonth(value);\n    const handleSelectYear = (value: Item) => setSelectedYear(value);\n\n    // Note: Validation need to be done with your favorite date library like date-fns or others\n    const date = new Date(Number(selectedYear.id), Number(months.indexOf(selectedMonth)), Number(selectedDay.id));\n\n    return (\n        <div>\n            <label>Selects are a simple alternative for choosing dates</label>\n            <div className='display-flex gap-5'>\n                <Select options={days} value={[selectedDay.id]} onChange={handleSelectDay} />\n                <Select\n                    options={months}\n                    value={[selectedMonth.id]}\n                    onChange={handleSelectMonth}\n                    className='min-width-150'\n                />\n                <Select options={years} value={[selectedYear.id]} onChange={handleSelectYear} />\n            </div>\n            <p className='margin-top-20 text-color-dark'>{`${date}`}</p>\n        </div>\n    );\n};\n\nexport default DatePickerSelectExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Selects are a simple alternative for choosing dates</label>\n    <div class=\"display-flex gap-5\">\n        <div class=\"select dropdown dropup\">\n            <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                <span class=\"selected-option-text\">01</span>\n                <span class=\"clearButton hide pointer-events-none\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n                <span class=\"caret\">\n                </span>\n            </button>\n            <ul class=\"dropdown-menu\" role=\"menu\">\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"1\" data-item-index=\"0\">\n                        <span class=\"selected-option-dropdown-item\">01</span>\n                        <input type=\"hidden\" value=\"1\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2\" data-item-index=\"1\">\n                        <span class=\"selected-option-dropdown-item\">02</span>\n                        <input type=\"hidden\" value=\"2\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"3\" data-item-index=\"2\">\n                        <span class=\"selected-option-dropdown-item\">03</span>\n                        <input type=\"hidden\" value=\"3\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"4\" data-item-index=\"3\">\n                        <span class=\"selected-option-dropdown-item\">04</span>\n                        <input type=\"hidden\" value=\"4\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"5\" data-item-index=\"4\">\n                        <span class=\"selected-option-dropdown-item\">05</span>\n                        <input type=\"hidden\" value=\"5\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"6\" data-item-index=\"5\">\n                        <span class=\"selected-option-dropdown-item\">06</span>\n                        <input type=\"hidden\" value=\"6\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"7\" data-item-index=\"6\">\n                        <span class=\"selected-option-dropdown-item\">07</span>\n                        <input type=\"hidden\" value=\"7\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"8\" data-item-index=\"7\">\n                        <span class=\"selected-option-dropdown-item\">08</span>\n                        <input type=\"hidden\" value=\"8\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"9\" data-item-index=\"8\">\n                        <span class=\"selected-option-dropdown-item\">09</span>\n                        <input type=\"hidden\" value=\"9\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"10\" data-item-index=\"9\">\n                        <span class=\"selected-option-dropdown-item\">10</span>\n                        <input type=\"hidden\" value=\"10\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"11\" data-item-index=\"10\">\n                        <span class=\"selected-option-dropdown-item\">11</span>\n                        <input type=\"hidden\" value=\"11\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"12\" data-item-index=\"11\">\n                        <span class=\"selected-option-dropdown-item\">12</span>\n                        <input type=\"hidden\" value=\"12\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"13\" data-item-index=\"12\">\n                        <span class=\"selected-option-dropdown-item\">13</span>\n                        <input type=\"hidden\" value=\"13\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"14\" data-item-index=\"13\">\n                        <span class=\"selected-option-dropdown-item\">14</span>\n                        <input type=\"hidden\" value=\"14\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"15\" data-item-index=\"14\">\n                        <span class=\"selected-option-dropdown-item\">15</span>\n                        <input type=\"hidden\" value=\"15\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"16\" data-item-index=\"15\">\n                        <span class=\"selected-option-dropdown-item\">16</span>\n                        <input type=\"hidden\" value=\"16\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"17\" data-item-index=\"16\">\n                        <span class=\"selected-option-dropdown-item\">17</span>\n                        <input type=\"hidden\" value=\"17\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"18\" data-item-index=\"17\">\n                        <span class=\"selected-option-dropdown-item\">18</span>\n                        <input type=\"hidden\" value=\"18\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"19\" data-item-index=\"18\">\n                        <span class=\"selected-option-dropdown-item\">19</span>\n                        <input type=\"hidden\" value=\"19\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"20\" data-item-index=\"19\">\n                        <span class=\"selected-option-dropdown-item\">20</span>\n                        <input type=\"hidden\" value=\"20\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"21\" data-item-index=\"20\">\n                        <span class=\"selected-option-dropdown-item\">21</span>\n                        <input type=\"hidden\" value=\"21\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"22\" data-item-index=\"21\">\n                        <span class=\"selected-option-dropdown-item\">22</span>\n                        <input type=\"hidden\" value=\"22\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"23\" data-item-index=\"22\">\n                        <span class=\"selected-option-dropdown-item\">23</span>\n                        <input type=\"hidden\" value=\"23\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"24\" data-item-index=\"23\">\n                        <span class=\"selected-option-dropdown-item\">24</span>\n                        <input type=\"hidden\" value=\"24\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"25\" data-item-index=\"24\">\n                        <span class=\"selected-option-dropdown-item\">25</span>\n                        <input type=\"hidden\" value=\"25\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"26\" data-item-index=\"25\">\n                        <span class=\"selected-option-dropdown-item\">26</span>\n                        <input type=\"hidden\" value=\"26\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"27\" data-item-index=\"26\">\n                        <span class=\"selected-option-dropdown-item\">27</span>\n                        <input type=\"hidden\" value=\"27\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"28\" data-item-index=\"27\">\n                        <span class=\"selected-option-dropdown-item\">28</span>\n                        <input type=\"hidden\" value=\"28\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"29\" data-item-index=\"28\">\n                        <span class=\"selected-option-dropdown-item\">29</span>\n                        <input type=\"hidden\" value=\"29\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"30\" data-item-index=\"29\">\n                        <span class=\"selected-option-dropdown-item\">30</span>\n                        <input type=\"hidden\" value=\"30\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"31\" data-item-index=\"30\">\n                        <span class=\"selected-option-dropdown-item\">31</span>\n                        <input type=\"hidden\" value=\"31\">\n                    </a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"select dropdown min-width-150 dropup\">\n            <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                <span class=\"selected-option-text\">January</span>\n                <span class=\"clearButton hide pointer-events-none\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n                <span class=\"caret\">\n                </span>\n            </button>\n            <ul class=\"dropdown-menu\" role=\"menu\">\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"January\" data-item-index=\"0\">\n                        <span class=\"selected-option-dropdown-item\">January</span>\n                        <input type=\"hidden\" value=\"January\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"February\" data-item-index=\"1\">\n                        <span class=\"selected-option-dropdown-item\">February</span>\n                        <input type=\"hidden\" value=\"February\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"March\" data-item-index=\"2\">\n                        <span class=\"selected-option-dropdown-item\">March</span>\n                        <input type=\"hidden\" value=\"March\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"April\" data-item-index=\"3\">\n                        <span class=\"selected-option-dropdown-item\">April</span>\n                        <input type=\"hidden\" value=\"April\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"May\" data-item-index=\"4\">\n                        <span class=\"selected-option-dropdown-item\">May</span>\n                        <input type=\"hidden\" value=\"May\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"June\" data-item-index=\"5\">\n                        <span class=\"selected-option-dropdown-item\">June</span>\n                        <input type=\"hidden\" value=\"June\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"July\" data-item-index=\"6\">\n                        <span class=\"selected-option-dropdown-item\">July</span>\n                        <input type=\"hidden\" value=\"July\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"August\" data-item-index=\"7\">\n                        <span class=\"selected-option-dropdown-item\">August</span>\n                        <input type=\"hidden\" value=\"August\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"September\" data-item-index=\"8\">\n                        <span class=\"selected-option-dropdown-item\">September</span>\n                        <input type=\"hidden\" value=\"September\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"October\" data-item-index=\"9\">\n                        <span class=\"selected-option-dropdown-item\">October</span>\n                        <input type=\"hidden\" value=\"October\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"November\" data-item-index=\"10\">\n                        <span class=\"selected-option-dropdown-item\">November</span>\n                        <input type=\"hidden\" value=\"November\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"December\" data-item-index=\"11\">\n                        <span class=\"selected-option-dropdown-item\">December</span>\n                        <input type=\"hidden\" value=\"December\">\n                    </a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"select dropdown dropup\">\n            <button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                <span class=\"selected-option-text\">2022</span>\n                <span class=\"clearButton hide pointer-events-none\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n                <span class=\"caret\">\n                </span>\n            </button>\n            <ul class=\"dropdown-menu\" role=\"menu\">\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2022\" data-item-index=\"0\">\n                        <span class=\"selected-option-dropdown-item\">2022</span>\n                        <input type=\"hidden\" value=\"2022\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2023\" data-item-index=\"1\">\n                        <span class=\"selected-option-dropdown-item\">2023</span>\n                        <input type=\"hidden\" value=\"2023\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2024\" data-item-index=\"2\">\n                        <span class=\"selected-option-dropdown-item\">2024</span>\n                        <input type=\"hidden\" value=\"2024\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2025\" data-item-index=\"3\">\n                        <span class=\"selected-option-dropdown-item\">2025</span>\n                        <input type=\"hidden\" value=\"2025\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2026\" data-item-index=\"4\">\n                        <span class=\"selected-option-dropdown-item\">2026</span>\n                        <input type=\"hidden\" value=\"2026\">\n                    </a>\n                </li>\n                <li class=\"\" role=\"listitem\">\n                    <a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"2027\" data-item-index=\"5\">\n                        <span class=\"selected-option-dropdown-item\">2027</span>\n                        <input type=\"hidden\" value=\"2027\">\n                    </a>\n                </li>\n            </ul>\n        </div>\n    </div>\n    <p class=\"margin-top-20 text-color-dark\">Sat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)</p>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}