From 90d0c60f8f0e03e3a5a2777de1599e3d350423cd Mon Sep 17 00:00:00 2001 From: sadik_malik Date: Sun, 10 Mar 2024 12:56:31 +0530 Subject: [PATCH] fix: String to object conversion in Date Pickers --- packages/rhf-mui/src/DatePickerElement.tsx | 12 ++++-------- packages/rhf-mui/src/DateTimePickerElement.tsx | 12 ++++-------- packages/rhf-mui/src/MobileDatePickerElement.tsx | 10 +++------- packages/rhf-mui/src/TimePickerElement.tsx | 10 +++------- packages/rhf-mui/src/utils.ts | 13 ++++++++++++- 5 files changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/rhf-mui/src/DatePickerElement.tsx b/packages/rhf-mui/src/DatePickerElement.tsx index c1a022e..14246dd 100644 --- a/packages/rhf-mui/src/DatePickerElement.tsx +++ b/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: diff --git a/packages/rhf-mui/src/DateTimePickerElement.tsx b/packages/rhf-mui/src/DateTimePickerElement.tsx index 066cd67..f5a3f2e 100644 --- a/packages/rhf-mui/src/DateTimePickerElement.tsx +++ b/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: diff --git a/packages/rhf-mui/src/MobileDatePickerElement.tsx b/packages/rhf-mui/src/MobileDatePickerElement.tsx index f79548d..6f973f9 100644 --- a/packages/rhf-mui/src/MobileDatePickerElement.tsx +++ b/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: diff --git a/packages/rhf-mui/src/TimePickerElement.tsx b/packages/rhf-mui/src/TimePickerElement.tsx index f0a05a4..e43a10c 100644 --- a/packages/rhf-mui/src/TimePickerElement.tsx +++ b/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: diff --git a/packages/rhf-mui/src/utils.ts b/packages/rhf-mui/src/utils.ts index 72f24b6..8ad1c85 100644 --- a/packages/rhf-mui/src/utils.ts +++ b/packages/rhf-mui/src/utils.ts @@ -1,3 +1,5 @@ +import {useLocalizationContext} from '@mui/x-date-pickers/internals' + export function hasOwnProperty( obj: X, prop: Y @@ -5,6 +7,15 @@ export function hasOwnProperty( return ( typeof obj === 'object' && obj !== null && - Object.hasOwnProperty.call(obj, prop) + Object.prototype.hasOwnProperty.call(obj, prop) ) } + +export function getTimezone( + adapter: ReturnType, + value: TDate | null +): string | null { + return value == null || !adapter.utils.isValid(value) + ? null + : adapter.utils.getTimezone(value) +}