updated dateTime component to take timezone in consideration

Author: mohas22

packages/react-sdk-components/src/components/field/DateTime/DateTime.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import dayjs, { Dayjs } from 'dayjs';
-
+import DateFormatter from '../../helpers/formatters/Date';
 import handleEvent from '../../helpers/event-utils';
 import { format } from '../../helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
@@ -19,7 +19,10 @@ export default function DateTime(props: DateTimeProps) {
 
   const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
 
-  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
+  const environmentInfo = PCore.getEnvironmentInfo();
+  const timezone = environmentInfo && environmentInfo.getTimeZone();
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -35,7 +38,7 @@ export default function DateTime(props: DateTimeProps) {
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
   useEffect(() => {
-    setDateValue(dayjs(value));
+    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
@@ -64,8 +67,9 @@ export default function DateTime(props: DateTimeProps) {
   };
 
   const handleChange = date => {
-    setDateValue(date);
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    const timeZoneDateTime = dayjs.tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+    setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
 

packages/react-sdk-components/src/components/helpers/formatters/common.ts

@@ -7,7 +7,6 @@ export function getLocale(locale: string = '') {
   return Intl.DateTimeFormat().resolvedOptions().locale;
 }
 
-export function getCurrentTimezone(timezone: string = 'America/New_York') {
-  if (timezone) return timezone;
+export function getCurrentTimezone() {
   return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
 }