fix: store correct date time

apps/example/e2e/table.spec.ts

@@ -1,7 +1,7 @@
-import { test } from '@playwright/test';
-import { pagination, search, sort } from './utils';
+import { test } from "@playwright/test";
+import { pagination, search, sort } from "./utils";
 
-test.describe.serial('table test', () => {
+test.describe.serial("table test", () => {
   test(`search (on user)`, async ({ page }) => {
     await search(page);
   });
@@ -13,4 +13,4 @@ test.describe.serial('table test', () => {
   test(`pagination (on user)`, async ({ page }) => {
     await pagination(page);
   });
-});
+});

apps/example/pages/admin/[[...nextadmin]].tsx

@@ -25,9 +25,11 @@ const options: NextAdminOptions = {
           },
           birthDate: {
             formatter: (date) => {
-              return new Date(date as unknown as string)?.toLocaleString().split(" ")[0];
-            }
-          }
+              return new Date(date as unknown as string)
+                ?.toLocaleString()
+                .split(" ")[0];
+            },
+          },
         },
       },
       edit: {
@@ -38,21 +40,22 @@ const options: NextAdminOptions = {
           },
           birthDate: {
             format: "date",
-            handler: {
-              //This getter is used to format the date in the form and match with the format of the input
-              get: (value) => {
-                return value?.toISOString().split("T")[0];
-              },
-            }
-          }
+          },
         },
       },
     },
     Post: {
       toString: (post) => `${post.title}`,
       list: {
-        display: ['id', 'title', 'content', 'published', 'author', 'categories'],
-        search: ['title', 'content'],
+        display: [
+          "id",
+          "title",
+          "content",
+          "published",
+          "author",
+          "categories",
+        ],
+        search: ["title", "content"],
         fields: {
           author: {
             formatter: (author) => {
@@ -62,30 +65,31 @@ const options: NextAdminOptions = {
         },
       },
       edit: {
-        display: ['id', 'title', 'content', 'published', 'authorId', 'categories'],
-      }
+        display: [
+          "id",
+          "title",
+          "content",
+          "published",
+          "authorId",
+          "categories",
+        ],
+      },
     },
     Category: {
       toString: (category) => `${category.name}`,
       list: {
-        display: ['name', 'posts'],
-        search: ['name'],
+        display: ["name", "posts"],
+        search: ["name"],
       },
       edit: {
-        display: ['name', 'posts'],
-      }
+        display: ["name", "posts"],
+      },
     },
   },
 };
 
 export default function Admin(props: AdminComponentProps) {
-  return (
-    <NextAdmin
-      {...props}
-      dashboard={Dashboard}
-      options={options}
-    />
-  );
+  return <NextAdmin {...props} dashboard={Dashboard} options={options} />;
 }
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {

apps/example/playwright.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from '@playwright/test';
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig({
-  testDir: 'e2e',
-    workers: 1,
-});
+  testDir: "e2e",
+  workers: 1,
+});

apps/example/prisma/schema.prisma

@@ -6,7 +6,7 @@ generator client {
 }
 
 generator jsonSchema {
-  provider = "prisma-json-schema-generator"
+  provider              = "prisma-json-schema-generator"
   includeRequiredFields = "true"
 }
 
@@ -20,27 +20,28 @@ enum Role {
   USER
   ADMIN
 }
+
 model User {
-  id        Int      @id @default(autoincrement())
-  email     String   @unique
+  id        Int       @id @default(autoincrement())
+  email     String    @unique
   name      String?
-  posts     Post[]   @relation("author") // One-to-many relation
-  profile   Profile? @relation("profile") // One-to-one relation
+  posts     Post[]    @relation("author") // One-to-many relation
+  profile   Profile?  @relation("profile") // One-to-one relation
   birthDate DateTime?
-  createdAt DateTime @default(now())
-  updatedAt DateTime @default(now()) @updatedAt
-  role      Role     @default(USER)
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @default(now()) @updatedAt
+  role      Role      @default(USER)
 }
 
 model Post {
-  id        Int     @id @default(autoincrement())
-  title     String
-  content   String?
-  published Boolean @default(false)
-  author    User    @relation("author", fields: [authorId], references: [id])
-  authorId  Int
-  categories Category[] @relation("category") // implicit Many-to-many relation
-  comments  post_comment[]  @relation("comments") // One-to-many relation
+  id         Int            @id @default(autoincrement())
+  title      String
+  content    String?
+  published  Boolean        @default(false)
+  author     User           @relation("author", fields: [authorId], references: [id])
+  authorId   Int
+  categories Category[]     @relation("category") // implicit Many-to-many relation
+  comments   post_comment[] @relation("comments") // One-to-many relation
 }
 
 model Profile {
@@ -53,15 +54,15 @@ model Profile {
 }
 
 model Category {
-  id        Int     @id @default(autoincrement())
+  id        Int      @id @default(autoincrement())
   name      String
-  posts     Post[]  @relation("category") // implicit Many-to-many relation
+  posts     Post[]   @relation("category") // implicit Many-to-many relation
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now()) @updatedAt
 }
 
 model post_comment {
-  id        String      @id @default(uuid())
+  id        String   @id @default(uuid())
   content   String
   post      Post     @relation("comments", fields: [postId], references: [id])
   postId    Int

packages/next-admin/src/components/Cell.tsx

@@ -6,16 +6,18 @@ import clsx from "clsx";
 import { useConfig } from "../context/ConfigContext";
 
 type Props = {
-  cell: ListDataFieldValue | ReactNode
-  formatter: (cell: any) => ReactNode
+  cell: ListDataFieldValue | ReactNode;
+  formatter: (cell: any) => ReactNode;
 };
 
 export default function Cell({ cell, formatter }: Props) {
-  const { basePath } = useConfig()
+  const { basePath } = useConfig();
 
-  const isReactNode = (cell: ListDataFieldValue | ReactNode): cell is ReactNode => {
-    return React.isValidElement(cell)
-  }
+  const isReactNode = (
+    cell: ListDataFieldValue | ReactNode
+  ): cell is ReactNode => {
+    return React.isValidElement(cell);
+  };
   if (cell && cell !== null) {
     if (React.isValidElement(cell)) {
       return cell;
@@ -60,8 +62,9 @@ export default function Cell({ cell, formatter }: Props) {
         <div
           className={clsx(
             "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium",
-            cell ? "bg-indigo-50 text-indigo-500" :
-              "bg-neutral-50 text-neutral-600"
+            cell
+              ? "bg-indigo-50 text-indigo-500"
+              : "bg-neutral-50 text-neutral-600"
           )}
         >
           <p>{formatter(cell.toString())}</p>

packages/next-admin/src/components/DataTable.tsx

@@ -15,26 +15,40 @@ import {
   TableRow,
 } from "./radix/Table";
 import { useRouter } from "next/compat/router";
-import { ListData, ListDataItem, ModelName, Field, NextAdminOptions } from "../types";
+import {
+  ListData,
+  ListDataItem,
+  ModelName,
+  Field,
+  NextAdminOptions,
+} from "../types";
 import { useConfig } from "../context/ConfigContext";
 
 interface DataTableProps {
   columns: ColumnDef<ListDataItem<ModelName>>[];
   data: ListData<ModelName>;
   resource: ModelName;
-  options: (Required<NextAdminOptions>)['model'][ModelName]
+  options: Required<NextAdminOptions>["model"][ModelName];
 }
 
-export function DataTable({ columns, data, resource, options }: DataTableProps) {
+export function DataTable({
+  columns,
+  data,
+  resource,
+  options,
+}: DataTableProps) {
   const router = useRouter();
-  const { basePath } = useConfig()
+  const { basePath } = useConfig();
   const hasDisplayField = options?.list?.display?.length ? true : false;
-  const columnsVisibility = columns.reduce((acc, column) => {
-    // @ts-expect-error
-    const key = column.accessorKey as Field<typeof resource>;
-    acc[key] = options?.list?.display?.includes(key) ? true : false;
-    return acc;
-  }, {} as Record<Field<typeof resource>, boolean>)
+  const columnsVisibility = columns.reduce(
+    (acc, column) => {
+      // @ts-expect-error
+      const key = column.accessorKey as Field<typeof resource>;
+      acc[key] = options?.list?.display?.includes(key) ? true : false;
+      return acc;
+    },
+    {} as Record<Field<typeof resource>, boolean>
+  );
 
   const table = useReactTable({
     data,
@@ -58,9 +72,9 @@ export function DataTable({ columns, data, resource, options }: DataTableProps)
                     {header.isPlaceholder
                       ? null
                       : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
                   </TableHead>
                 );
               })}

packages/next-admin/src/components/Form.tsx

@@ -17,6 +17,8 @@ import ArrayField from "./inputs/ArrayField";
 import CheckboxWidget from "./inputs/CheckboxWidget";
 import SelectWidget from "./inputs/SelectWidget";
 import Button from "./radix/Button";
+import DateTimeWidget from "./inputs/DateTimeWidget";
+import DateWidget from "./inputs/DateWidget";
 
 // Override Form functions to not prevent the submit
 class CustomForm extends RjsfForm {
@@ -44,6 +46,8 @@ const fields: CustomForm["props"]["fields"] = {
 };
 
 const widgets: CustomForm["props"]["widgets"] = {
+  DateWidget: DateWidget,
+  DateTimeWidget: DateTimeWidget,
   SelectWidget: SelectWidget,
   CheckboxWidget: CheckboxWidget,
 };