Skip to content

Custom date field on formBuilderPlugin reduced the submitted date by 1 day. #9822

Open
@S-Elevatio

Description

Describe the Bug

HI, I'm trying to add date field to form builder.

Although I managed to make it work,
the data being submitted and saved to the database is always being reduced by 1 day.

e.g. 5 December 2024 will be saved as 4 December 2024
even though the one rendered on the form
before being submitted is clearly shown as 5 December 2024

This minimum reproduction code is only changed slightly from Payload 3.0 website template
by adding ShadCn DatePicker as a field to formBuilderPlugin

Changed files or directories:

  • src/blocks/Form/Date/block.ts
  • src/blocks/Form/Date/index.tsx
  • src/blocks/Form/Date/type.ts
  • src/blocks/Form/buildInitialFormState.tsx
  • src/blocks/Form/fields.tsx
  • src/plugins/index.ts
  • src/components/ui/calendar.tsx
  • src/components/ui/popover.tsx

Link to the code that reproduces this issue

https://github.com/S-Elevatio/payload-project

Reproduction Steps

  • git clone https://github.com/S-Elevatio/payload-project
  • cd payload-project
  • pnpm install or pnpm i
  • add these environment variable to .env file
  # Database connection string
  DATABASE_URI=mongodb://127.0.0.1/
  # Used to encrypt JWT tokens
  PAYLOAD_SECRET=tokens
  # Used to configure CORS, format links and more. No trailing slash
  NEXT_PUBLIC_SERVER_URL=http://localhost:3000
  • pnpm run dev
  • login to admin panel
  • go to form tab
  • add new form
  • add field and choose Date
    Image
  • save
  • go to page tab
  • create new page
  • add form block as content
  • choose the newly created form with only date field
  • save
  • open the page
  • pick any date
    Image
  • submit the form
  • go back to the admin panel
  • go to the Form Submission tab
  • choose the recent submitted data
  • the date shown here (and the one saved in database) will be reduced by 1 day
    Image
    Image
    Image

Which area(s) are affected? (Select all that apply)

db-mongodb, Not sure, plugin: form-builder

Environment Info

Binaries:
  Node: 23.3.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.5.0
  next: 15.0.4
  @payloadcms/db-mongodb: 3.5.0
  @payloadcms/email-nodemailer: 3.5.0
  @payloadcms/graphql: 3.5.0
  @payloadcms/live-preview: 3.5.0
  @payloadcms/live-preview-react: 3.5.0
  @payloadcms/next/utilities: 3.5.0
  @payloadcms/payload-cloud: 3.5.0
  @payloadcms/plugin-form-builder: 3.5.0
  @payloadcms/plugin-nested-docs: 3.5.0
  @payloadcms/plugin-redirects: 3.5.0
  @payloadcms/plugin-search: 3.5.0
  @payloadcms/plugin-seo: 3.5.0
  @payloadcms/richtext-lexical: 3.5.0
  @payloadcms/translations: 3.5.0
  @payloadcms/ui/shared: 3.5.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32175
  Available CPU cores: 16

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions