Custom date field on formBuilderPlugin reduced the submitted date by 1 day. #9822
Open
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
orpnpm 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
- 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
- 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
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