feat: added support for the Formatting of the Date

Author: dhavalveera

apps/web/content/docs/components/datepicker.mdx

@@ -19,6 +19,14 @@ Use this example to show a simple datepicker component.
 
 <Example name="datepicker.root" />
 
+## Formatted Date
+
+Use this `inputFormat` prop to set the format of the datepicker component to be displayed
+
+**Note:** don't use `DD` instead use `dd` and also for year don't use `YYYY` instead use `yyyy`
+
+<Example name="datepicker.format" />
+
 ## Localization
 
 Use the `language` prop to set the language of the datepicker component.

apps/web/examples/datepicker/datepicker.format.tsx

@@ -0,0 +1,42 @@
+import { type CodeData } from '~/components/code-demo';
+import { Datepicker } from 'flowbite-react';
+
+const code = `
+'use client';
+
+import { Datepicker } from 'flowbite-react';
+
+function Component() {
+  return <Datepicker inputFormat='dd-MMM-yyyy' />;
+}
+`;
+
+const codeRSC = `
+import { Datepicker } from 'flowbite-react';
+
+function Component() {
+  return <Datepicker inputFormat='dd-MMM-yyyy' />;
+}
+`;
+
+function Component() {
+  return <Datepicker inputFormat="dd-MMM-yyyy" />;
+}
+
+export const format: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'datepicker/datepicker.format.tsx',
+  component: <Component />,
+};

apps/web/examples/datepicker/index.ts

@@ -1,4 +1,5 @@
 export { autoHide } from "./datepicker.autoHide";
+export { format } from './datepicker.format';
 export { inline } from "./datepicker.inline";
 export { localization } from "./datepicker.localization";
 export { range } from "./datepicker.range";

bun.lockb

@@ -46,7 +46,6 @@
     "dev": "",
     "format": "prettier . --write",
     "format:check": "prettier .",
-    "postinstall": "bun run build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prepack": "clean-package",
@@ -76,6 +75,7 @@
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "1.4.0",
     "clean-package": "2.2.0",
+    "date-fns": "^3.6.0",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vitest": "0.3.26",

packages/ui/package.json

@@ -8,7 +8,7 @@ import { getFormattedDate } from "./helpers";
 
 describe("Components / Datepicker", () => {
   it("should display today's date by default", () => {
-    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date());
+    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date(), 'dd-MMM-yyy');
 
     render(<Datepicker />);
 
@@ -28,7 +28,7 @@ describe("Components / Datepicker", () => {
   });
 
   it("should reset to today's date when Clear button is clicked", async () => {
-    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date());
+    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date(), 'dd-MMM-yyy');
     const todaysDayOfMonth = new Date().getDate();
     const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
 
@@ -43,7 +43,7 @@ describe("Components / Datepicker", () => {
   });
 
   it("should use today's date when Today button is clicked", async () => {
-    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date());
+    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date(), 'dd-MMM-yyy');
     const todaysDayOfMonth = new Date().getDate();
     const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
 
@@ -90,7 +90,7 @@ describe("Components / Datepicker", () => {
   });
 
   it("should clear the value when ref.current.clear is called", async () => {
-    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date());
+    const todaysDateInDefaultLanguage = getFormattedDate("en", new Date(), 'dd-MMM-yyyy');
     const todaysDayOfMonth = new Date().getDate();
     const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
 
@@ -105,4 +105,12 @@ describe("Components / Datepicker", () => {
 
     expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
   });
+
+  it("should display today's date in dd-MMM-yyyy format", () => {
+    const todaysDateInDefaultLanguage = getFormattedDate('en-US', new Date(), 'dd-MMM-yyyy');
+
+    render(<Datepicker inputFormat="dd-MMM-yyyy" />);
+
+    expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
+  });
 });

packages/ui/src/components/Datepicker/Datepicker.spec.tsx

@@ -60,3 +60,18 @@ Default.args = {
   weekStart: WeekStart.Sunday,
   theme: {},
 };
+
+export const FormattedDate = Template.bind({})
+FormattedDate.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  defaultDate: new Date(),
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  weekStart: WeekStart.Sunday,
+  theme: {},
+  inputFormat: 'dd MMM yyyy'
+};

packages/ui/src/components/Datepicker/Datepicker.stories.tsx

@@ -97,6 +97,7 @@ export interface DatepickerProps extends Omit<TextInputProps, "theme"> {
   weekStart?: WeekStart;
   theme?: DeepPartial<FlowbiteDatepickerTheme>;
   onSelectedDateChanged?: (date: Date) => void;
+  inputFormat?: string;
 }
 
 const DatepickerRender: ForwardRefRenderFunction<DatepickerRef, DatepickerProps> = (
@@ -117,6 +118,7 @@ const DatepickerRender: ForwardRefRenderFunction<DatepickerRef, DatepickerProps>
     className,
     theme: customTheme = {},
     onSelectedDateChanged,
+    inputFormat = 'dd-MMM-yyyy',
     ...props
   },
   ref,
@@ -201,10 +203,10 @@ const DatepickerRender: ForwardRefRenderFunction<DatepickerRef, DatepickerProps>
       case Views.Years:
         return `${startOfYearPeriod(viewDate, 10)} - ${startOfYearPeriod(viewDate, 10) + 9}`;
       case Views.Months:
-        return getFormattedDate(language, viewDate, { year: "numeric" });
+        return getFormattedDate(language, viewDate, inputFormat, { year: "numeric" });
       case Views.Days:
       default:
-        return getFormattedDate(language, viewDate, { month: "long", year: "numeric" });
+        return getFormattedDate(language, viewDate, inputFormat, { month: "long", year: "numeric" });
     }
   };
 
@@ -272,7 +274,7 @@ const DatepickerRender: ForwardRefRenderFunction<DatepickerRef, DatepickerProps>
               }
               setIsOpen(true);
             }}
-            value={selectedDate && getFormattedDate(language, selectedDate)}
+            value={selectedDate && getFormattedDate(language, selectedDate, inputFormat, {})}
             readOnly
             {...props}
           />

packages/ui/src/components/Datepicker/Datepicker.tsx

@@ -1,3 +1,5 @@
+import { format as DateFNSFormat } from 'date-fns';
+
 export enum Views {
   Days = 0,
   Months = 1,
@@ -99,7 +101,7 @@ export const addYears = (date: Date, amount: number): Date => {
   return newDate;
 };
 
-export const getFormattedDate = (language: string, date: Date, options?: Intl.DateTimeFormatOptions): string => {
+export const getFormattedDate = (language: string, date: Date, dateFormat: string, options?: Intl.DateTimeFormatOptions,): string => {
   let defaultOptions: Intl.DateTimeFormatOptions = {
     day: "numeric",
     month: "long",
@@ -110,7 +112,8 @@ export const getFormattedDate = (language: string, date: Date, options?: Intl.Da
     defaultOptions = options;
   }
 
-  return new Intl.DateTimeFormat(language, defaultOptions).format(date);
+    return DateFNSFormat(new Intl.DateTimeFormat(language, defaultOptions).format(date), dateFormat);
+  
 };
 
 export const startOfYearPeriod = (date: Date, years: number): number => {