diff --git a/plugins/ui/src/js/src/elements/hooks/useDatepickerProps.test.ts b/plugins/ui/src/js/src/elements/hooks/useDatepickerProps.test.ts
new file mode 100644
index 000000000..ea4eadd55
--- /dev/null
+++ b/plugins/ui/src/js/src/elements/hooks/useDatepickerProps.test.ts
@@ -0,0 +1,41 @@
+import { parseDateValue } from './useDatepickerProps';
+
+describe('parseDateValue', () => {
+  const isoDate = '2021-02-03';
+  const isoDateTime = '2021-03-03T04:05:06';
+  const isoZonedDateTime = '2021-04-04T05:06:07-04:00[America/New_York]';
+  const nonIsoZonedDateTime = '2021-04-04T05:06:07 America/New_York';
+  const invalidDate = 'invalid-date';
+
+  it('should return null if the value is null', () => {
+    expect(parseDateValue(null)).toBeNull();
+  });
+
+  it('should return undefined if the value is undefined', () => {
+    expect(parseDateValue(undefined)).toBeUndefined();
+  });
+
+  it('should parse an ISO 8601 date string', () => {
+    expect(parseDateValue(isoDate)?.toString()).toEqual(isoDate);
+  });
+
+  it('should parse an ISO 8601 date time string', () => {
+    expect(parseDateValue(isoDateTime)?.toString()).toEqual(isoDateTime);
+  });
+
+  it('should parse an ISO 8601 zoned date time string', () => {
+    expect(parseDateValue(isoZonedDateTime)?.toString()).toEqual(
+      isoZonedDateTime
+    );
+  });
+
+  it('should parse a non-ISO 8601 zoned date time string', () => {
+    expect(parseDateValue(nonIsoZonedDateTime)?.toString()).toEqual(
+      isoZonedDateTime
+    );
+  });
+
+  it('should throw an error if the value is invalid', () => {
+    expect(() => parseDateValue(invalidDate)).toThrow();
+  });
+});
diff --git a/plugins/ui/src/js/src/elements/hooks/useDatepickerProps.ts b/plugins/ui/src/js/src/elements/hooks/useDatepickerProps.ts
index 3b91f1a12..01d044e3e 100644
--- a/plugins/ui/src/js/src/elements/hooks/useDatepickerProps.ts
+++ b/plugins/ui/src/js/src/elements/hooks/useDatepickerProps.ts
@@ -141,7 +141,10 @@ export function useOnChangeCallback(
 ): (value: MappedDateValue<DateValue>) => void {
   return useCallback(
     (value: MappedDateValue<DateValue>) => {
-      callback?.(serializeDateValue(value));
+      if (callback == null) {
+        return;
+      }
+      callback(serializeDateValue(value));
     },
     [callback]
   );
@@ -168,7 +171,7 @@ export function useDateValueMemo(
 export function parseDateValue(
   value?: string | null
 ): DateValue | null | undefined {
-  if (value === undefined || value === null) {
+  if (value == null) {
     return value;
   }