fix timezone issue with time fields in editable grid

Author: XingY

packages/components/src/internal/components/editable/DateInputCell.tsx

@@ -3,7 +3,12 @@ import React, { FC, memo, useCallback } from 'react';
 import { QueryColumn } from '../../../public/QueryColumn';
 
 import { DatePickerInput } from '../forms/input/DatePickerInput';
-import { formatDate, formatDateTime, formatTime, isDateTimeCol } from '../../util/Date';
+import {
+    formatDate,
+    formatDateTime,
+    getTimeValueFromDatePickerInput,
+    isDateTimeCol
+} from '../../util/Date';
 
 import { MODIFICATION_TYPES, SELECTION_TYPES } from './constants';
 import { ValueDescriptor } from './models';
@@ -40,14 +45,14 @@ export const DateInputCell: FC<DateInputCellProps> = memo(props => {
                 if (newDate && typeof newDate === 'string') display = newDate;
                 else if (newDate && newDate instanceof Date) {
                     display = col.isTimeColumn
-                        ? formatTime(newDate)
+                        ? getTimeValueFromDatePickerInput(newDate, col)
                         : isDateTimeCol(col)
                           ? formatDateTime(newDate)
                           : formatDate(newDate);
                 }
             }
 
-            modifyCell(colIdx, rowIdx, [{ raw: newDate, display }], MODIFICATION_TYPES.REPLACE, col);
+            modifyCell(colIdx, rowIdx, [{ raw: col.isTimeColumn ? display : newDate, display }], MODIFICATION_TYPES.REPLACE, col);
         },
         [col, colIdx, modifyCell, rowIdx]
     );

packages/components/src/internal/util/Date.ts

@@ -199,13 +199,18 @@ export function getDateFromISO(
 
 export function formatDateTimeDisplayValueForUpdate(vd: ValueDescriptor, queryColumn: QueryColumn): string {
     const isoValue = vd?.raw;
-    if (!isoValue) return null;
+    if (!isoValue || typeof isoValue !== 'string') return null;
     const date = getDateFromISO(isoValue, queryColumn);
     const { dateFormat, timeFormat } = getPickerDateAndTimeFormat(queryColumn, false, date);
     if (queryColumn.isTimeColumn) return formatTime(isoValue, timeFormat);
     return formatDate(date, null, dateFormat);
 }
 
+export function getTimeValueFromDatePickerInput(date: Date, queryColumn: QueryColumn): string {
+    const { timeFormat } = getPickerDateAndTimeFormat(queryColumn, false, date);
+    return formatTime(date, timeFormat);
+}
+
 export function getColDateFormat(column: QueryColumn, dateFormat?: string, dateOnly?: boolean): string {
     let rawFormat = dateFormat || column?.format;
     if (!rawFormat) {