fix: String to object conversion in Date Pickers

packages/rhf-mui/src/DatePickerElement.tsx

@@ -25,6 +25,7 @@ import {
   validateDate,
 } from '@mui/x-date-pickers/internals'
 import useTransform from './useTransform'
+import {getTimezone} from './utils'
 
 export type DatePickerElementProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -101,11 +102,6 @@ const DatePickerElement = forwardRef(function DatePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        const inputTimezone =
-          value == null || !adapter.utils.isValid(value)
-            ? null
-            : adapter.utils.getTimezone(value)
-
         const internalError = validateDate({
           props: {
             shouldDisableDate: rest.shouldDisableDate,
@@ -115,7 +111,7 @@ const DatePickerElement = forwardRef(function DatePickerElement<
             disableFuture: Boolean(rest.disableFuture),
             minDate: rest.minDate,
             maxDate: rest.maxDate,
-            timezone: rest.timezone ?? inputTimezone ?? 'default',
+            timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
           },
           value,
           adapter,
@@ -145,8 +141,8 @@ const DatePickerElement = forwardRef(function DatePickerElement<
         typeof transform?.input === 'function'
           ? transform.input
           : (newValue) => {
-              return newValue && newValue === 'string'
-                ? (new Date(newValue) as TValue) // need to see if this works for all localization adaptors
+              return newValue && typeof newValue === 'string'
+                ? (adapter.utils.date(newValue) as TValue) // need to see if this works for all localization adaptors
                 : newValue
             },
       output:

packages/rhf-mui/src/DateTimePickerElement.tsx

@@ -25,6 +25,7 @@ import {
   DateTimeValidationError,
   PickerChangeHandlerContext,
 } from '@mui/x-date-pickers'
+import {getTimezone} from './utils'
 
 export type DateTimePickerElementProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -100,11 +101,6 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        const inputTimezone =
-          value == null || !adapter.utils.isValid(value)
-            ? null
-            : adapter.utils.getTimezone(value)
-
         const internalError = validateDateTime({
           props: {
             shouldDisableDate: rest.shouldDisableDate,
@@ -114,7 +110,7 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
             disableFuture: Boolean(rest.disableFuture),
             minDate: rest.minDate,
             maxDate: rest.maxDate,
-            timezone: rest.timezone ?? inputTimezone ?? 'default',
+            timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
             disableIgnoringDatePartForTimeValidation:
               rest.disableIgnoringDatePartForTimeValidation,
             maxTime: rest.maxTime,
@@ -151,8 +147,8 @@ const DateTimePickerElement = forwardRef(function DateTimePickerElement<
         typeof transform?.input === 'function'
           ? transform.input
           : (newValue) => {
-              return newValue && newValue === 'string'
-                ? (new Date(newValue) as TValue) // need to see if this works for all localization adaptors
+              return newValue && typeof newValue === 'string'
+                ? (adapter.utils.date(newValue) as TValue) // need to see if this works for all localization adaptors
                 : newValue
             },
       output:

packages/rhf-mui/src/MobileDatePickerElement.tsx

@@ -25,6 +25,7 @@ import {
   DateValidationError,
   PickerChangeHandlerContext,
 } from '@mui/x-date-pickers'
+import {getTimezone} from './utils'
 
 export type MobileDatePickerElementProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -99,11 +100,6 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        const inputTimezone =
-          value == null || !adapter.utils.isValid(value)
-            ? null
-            : adapter.utils.getTimezone(value)
-
         const internalError = validateDate({
           props: {
             shouldDisableDate: rest.shouldDisableDate,
@@ -113,7 +109,7 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
             disableFuture: Boolean(rest.disableFuture),
             minDate: rest.minDate,
             maxDate: rest.maxDate,
-            timezone: rest.timezone ?? inputTimezone ?? 'default',
+            timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
           },
           value,
           adapter,
@@ -144,7 +140,7 @@ const MobileDatePickerElement = forwardRef(function MobileDatePickerElement<
           ? transform.input
           : (newValue) => {
               return newValue && typeof newValue === 'string'
-                ? (new Date(newValue) as TValue) // need to see if this works for all localization adaptors
+                ? (adapter.utils.date(newValue) as TValue) // need to see if this works for all localization adaptors
                 : newValue
             },
       output:

packages/rhf-mui/src/TimePickerElement.tsx

@@ -25,6 +25,7 @@ import {
   PickerChangeHandlerContext,
   TimeValidationError,
 } from '@mui/x-date-pickers'
+import {getTimezone} from './utils'
 
 export type TimePickerElementProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -100,11 +101,6 @@ const TimePickerElement = forwardRef(function TimePickerElement<
       }),
     validate: {
       internal: (value: TValue | null) => {
-        const inputTimezone =
-          value == null || !adapter.utils.isValid(value)
-            ? null
-            : adapter.utils.getTimezone(value)
-
         const internalError = validateTime({
           props: {
             minTime: rest.minTime,
@@ -116,7 +112,7 @@ const TimePickerElement = forwardRef(function TimePickerElement<
               rest.disableIgnoringDatePartForTimeValidation,
             disablePast: Boolean(rest.disablePast),
             disableFuture: Boolean(rest.disableFuture),
-            timezone: rest.timezone ?? inputTimezone ?? 'default',
+            timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
           },
           value,
           adapter,
@@ -147,7 +143,7 @@ const TimePickerElement = forwardRef(function TimePickerElement<
           ? transform.input
           : (newValue) => {
               return newValue && typeof newValue === 'string'
-                ? (new Date(newValue) as TValue) // need to see if this works for all localization adaptors
+                ? (adapter.utils.date(newValue) as TValue) // need to see if this works for all localization adaptors
                 : newValue
             },
       output:

packages/rhf-mui/src/utils.ts

@@ -1,10 +1,21 @@
+import {useLocalizationContext} from '@mui/x-date-pickers/internals'
+
 export function hasOwnProperty<X, Y extends PropertyKey>(
   obj: X,
   prop: Y
 ): obj is X & Record<Y, unknown> {
   return (
     typeof obj === 'object' &&
     obj !== null &&
-    Object.hasOwnProperty.call(obj, prop)
+    Object.prototype.hasOwnProperty.call(obj, prop)
   )
 }
+
+export function getTimezone<TDate>(
+  adapter: ReturnType<typeof useLocalizationContext>,
+  value: TDate | null
+): string | null {
+  return value == null || !adapter.utils.isValid(value)
+    ? null
+    : adapter.utils.getTimezone(value)
+}