fix(ui): clear miliseconds in date fields unless theyre explicitly provided in the display format

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -65,6 +65,13 @@ const DatePicker: React.FC<Props> = (props) => {
       const tzOffset = incomingDate.getTimezoneOffset() / 60
       newDate.setHours(12 - tzOffset, 0)
     }
+
+    if (newDate instanceof Date && !dateFormat.includes('SSS')) {
+      // Unless the dateFormat includes milliseconds, set milliseconds to 0
+      // This is to ensure that the timestamp is consistent with the displayFormat
+      newDate.setMilliseconds(0)
+    }
+
     if (typeof onChangeFromProps === 'function') {
       onChangeFromProps(newDate)
     }

test/fields/collections/Date/e2e.spec.ts

@@ -111,6 +111,70 @@ describe('Date', () => {
     await expect(dateField).toHaveValue('')
   })
 
+  test('should clear miliseconds from dates with time', async () => {
+    await page.goto(url.create)
+    const dateField = page.locator('#field-default input')
+    await expect(dateField).toBeVisible()
+    // Fill in required fields, this is just to make sure saving is possible
+    await dateField.fill('02/07/2023')
+    const dateWithTz = page.locator('#field-dayAndTimeWithTimezone .react-datepicker-wrapper input')
+
+    await dateWithTz.fill('08/12/2027 10:00 AM')
+
+    const dropdownControlSelector = `#field-dayAndTimeWithTimezone .rs__control`
+    const timezoneOptionSelector = `#field-dayAndTimeWithTimezone .rs__menu .rs__option:has-text("London")`
+
+    await page.click(dropdownControlSelector)
+    await page.click(timezoneOptionSelector)
+
+    // Test the time field
+    const timeField = page.locator('#field-timeOnly input')
+    await timeField.fill('08/12/2027 10:00:00.123 AM')
+
+    await saveDocAndAssert(page)
+
+    const id = page.url().split('/').pop()
+
+    const { doc } = await client.findByID({ id: id!, auth: true, slug: 'date-fields' })
+
+    await expect(() => {
+      // Ensure that the time field does not contain milliseconds
+      expect(doc?.timeOnly).toContain('00:00.000Z')
+    }).toPass()
+  })
+
+  test("should keep miliseconds when they're provided in the date format", async () => {
+    await page.goto(url.create)
+    const dateField = page.locator('#field-default input')
+    await expect(dateField).toBeVisible()
+    // Fill in required fields, this is just to make sure saving is possible
+    await dateField.fill('02/07/2023')
+    const dateWithTz = page.locator('#field-dayAndTimeWithTimezone .react-datepicker-wrapper input')
+
+    await dateWithTz.fill('08/12/2027 10:00 AM')
+
+    const dropdownControlSelector = `#field-dayAndTimeWithTimezone .rs__control`
+    const timezoneOptionSelector = `#field-dayAndTimeWithTimezone .rs__menu .rs__option:has-text("London")`
+
+    await page.click(dropdownControlSelector)
+    await page.click(timezoneOptionSelector)
+
+    // Test the time field
+    const timeField = page.locator('#field-timeOnlyWithMiliseconds input')
+    await timeField.fill('6:00.00.625 PM')
+
+    await saveDocAndAssert(page)
+
+    const id = page.url().split('/').pop()
+
+    const { doc } = await client.findByID({ id: id!, auth: true, slug: 'date-fields' })
+
+    await expect(() => {
+      // Ensure that the time with miliseconds field contains the exact miliseconds specified
+      expect(doc?.timeOnlyWithMiliseconds).toContain('625Z')
+    }).toPass()
+  })
+
   describe('localized dates', () => {
     describe('EST', () => {
       test.use({

test/fields/collections/Date/index.ts

@@ -24,6 +24,16 @@ const DateFields: CollectionConfig = {
         },
       },
     },
+    {
+      name: 'timeOnlyWithMiliseconds',
+      type: 'date',
+      admin: {
+        date: {
+          pickerAppearance: 'timeOnly',
+          displayFormat: 'h:mm.ss.SSS aa',
+        },
+      },
+    },
     {
       name: 'timeOnlyWithCustomFormat',
       type: 'date',

test/fields/payload-types.ts

@@ -903,6 +903,7 @@ export interface DateField {
   id: string;
   default: string;
   timeOnly?: string | null;
+  timeOnlyWithMiliseconds?: string | null;
   timeOnlyWithCustomFormat?: string | null;
   dayOnly?: string | null;
   dayAndTime?: string | null;
@@ -2486,6 +2487,7 @@ export interface CustomRowIdSelect<T extends boolean = true> {
 export interface DateFieldsSelect<T extends boolean = true> {
   default?: T;
   timeOnly?: T;
+  timeOnlyWithMiliseconds?: T;
   timeOnlyWithCustomFormat?: T;
   dayOnly?: T;
   dayAndTime?: T;