From 7c75eabbf5287e364803908ebc9c5cfd7caa77b8 Mon Sep 17 00:00:00 2001
From: Sarthak Pandey <sarthak.pandey@altudo.co>
Date: Wed, 10 Dec 2025 18:14:26 +0530
Subject: [PATCH 1/3] docs: add missing controlled datepicker example  Fixes
 #1588 by adding the missing datepicker.value.tsx example file that
 demonstrates controlled datepicker usage with value prop and ability to clear
 by passing  null

---
 .../examples/datepicker/datepicker.value.tsx  | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 apps/web/examples/datepicker/datepicker.value.tsx

diff --git a/apps/web/examples/datepicker/datepicker.value.tsx b/apps/web/examples/datepicker/datepicker.value.tsx
new file mode 100644
index 000000000..be5b35559
--- /dev/null
+++ b/apps/web/examples/datepicker/datepicker.value.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { Button, Datepicker } from "flowbite-react";
+import { useState } from "react";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { Button, Datepicker } from "flowbite-react";
+import { useState } from "react";
+
+export function Component() {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Datepicker value={selectedDate} onChange={setSelectedDate} />
+      <div className="flex gap-2">
+        <Button size="xs" onClick={() => setSelectedDate(new Date())}>
+          Set to Today
+        </Button>
+        <Button size="xs" onClick={() => setSelectedDate(null)}>
+          Clear
+        </Button>
+      </div>
+      {selectedDate && (
+        <p className="text-sm text-gray-500">
+          Selected: {selectedDate.toLocaleDateString()}
+        </p>
+      )}
+    </div>
+  );
+}
+`;
+
+export function Component() {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Datepicker value={selectedDate} onChange={setSelectedDate} />
+      <div className="flex gap-2">
+        <Button size="xs" onClick={() => setSelectedDate(new Date())}>
+          Set to Today
+        </Button>
+        <Button size="xs" onClick={() => setSelectedDate(null)}>
+          Clear
+        </Button>
+      </div>
+      {selectedDate && (
+        <p className="text-sm text-gray-500">
+          Selected: {selectedDate.toLocaleDateString()}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export const value: CodeData = {
+  type: "single",
+  code: {
+    fileName: "index",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "datepicker/datepicker.value.tsx",
+  component: <Component />,
+};

From b43b142e443d6f6f87bde88fbd0f5dbb47f233ee Mon Sep 17 00:00:00 2001
From: Sarthak Pandey <sarthak.pandey@altudo.co>
Date: Thu, 11 Dec 2025 15:03:41 +0530
Subject: [PATCH 2/3] chore: add export for value example

---
 apps/web/examples/datepicker/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/examples/datepicker/index.ts b/apps/web/examples/datepicker/index.ts
index efdb2945f..f477842dc 100644
--- a/apps/web/examples/datepicker/index.ts
+++ b/apps/web/examples/datepicker/index.ts
@@ -5,4 +5,5 @@ export { filter } from "./datepicker.filter";
 export { range } from "./datepicker.range";
 export { root } from "./datepicker.root";
 export { title } from "./datepicker.title";
+export { value } from "./datepicker.value";
 export { weekStart } from "./datepicker.weekStart";

From 159fd48163f3dfa1517b5ac6460a9ca721c98f92 Mon Sep 17 00:00:00 2001
From: Sarthak Pandey <sarthak.pandey@altudo.co>
Date: Thu, 11 Dec 2025 18:47:02 +0530
Subject: [PATCH 3/3] fix: add controlled datepicker example

---
 apps/web/examples/datepicker/datepicker.value.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/web/examples/datepicker/datepicker.value.tsx b/apps/web/examples/datepicker/datepicker.value.tsx
index be5b35559..8acc94453 100644
--- a/apps/web/examples/datepicker/datepicker.value.tsx
+++ b/apps/web/examples/datepicker/datepicker.value.tsx
@@ -48,11 +48,7 @@ export function Component() {
           Clear
         </Button>
       </div>
-      {selectedDate && (
-        <p className="text-sm text-gray-500">
-          Selected: {selectedDate.toLocaleDateString()}
-        </p>
-      )}
+      {selectedDate && <p className="text-sm text-gray-500">Selected: {selectedDate.toLocaleDateString()}</p>}
     </div>
   );
 }