clean

Author: XingY

packages/components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "6.45.1-fb-issue53071.1",
+  "version": "6.45.1-fb-issue53071.2",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/package.json

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

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

@@ -49,7 +49,7 @@ import { LabelOverlay } from '../forms/LabelOverlay';
 
 import { DropdownMenu } from '../../dropdowns';
 
-import { formatDateTimeDisplayValueForUpdate } from '../../util/Date';
+import { getDateTimeDisplayValueFromStr } from '../../util/Date';
 
 import {
     addRows,
@@ -879,7 +879,7 @@ export class EditableGrid extends PureComponent<EditableGridProps, EditableGridS
             let getDisplayValue = null;
             if (qCol.isTimeColumn || qCol.jsonType === 'date') {
                 getDisplayValue = vd => {
-                    return formatDateTimeDisplayValueForUpdate(vd, qCol);
+                    return getDateTimeDisplayValueFromStr(vd?.raw, qCol);
                 };
             }
             gridColumns = gridColumns.push(

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

@@ -20,6 +20,7 @@ import { FormsyInjectedProps, withFormsy } from '../formsy';
 import { FieldLabel } from '../FieldLabel';
 import {
     getDateFromISO,
+    getDateTimeDisplayValue,
     getJsonDateFormatString,
     getJsonDateTimeFormatString,
     getJsonTimeFormatString,
@@ -52,7 +53,7 @@ export interface DatePickerInputProps extends DisableableInputProps {
     name?: string;
     onBlur?: () => void;
     onCalendarClose?: () => void;
-    onChange?: (rawDate?: Date | string) => void;
+    onChange?: (rawDate?: Date | string, formatted?: string) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     placeholderText?: string;
     queryColumn: QueryColumn;
@@ -169,7 +170,8 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
         if (this.state.relativeInputValue) {
             onChange?.(this.state.relativeInputValue);
         } else {
-            onChange?.(date);
+            const formatted = getDateTimeDisplayValue(date, queryColumn);
+            onChange?.(queryColumn.isTimeColumn ? formatted : date, formatted);
 
             if (formsy) {
                 this.props.setValue?.(this.getFormsyValue(date));

packages/components/src/internal/components/forms/input/DatePickerInput.tsx

@@ -21,7 +21,6 @@ import { QueryColumn } from '../../public/QueryColumn';
 
 import { TIME_RANGE_URI } from '../components/domainproperties/constants';
 import { SelectInputOption } from '../components/forms/input/SelectInput';
-import { ValueDescriptor } from '../components/editable/models';
 
 // These constants align with the formats declared in DateUtil.java
 export const ISO_DATE_FORMAT_STRING = 'yyyy-MM-dd';
@@ -197,18 +196,17 @@ export function getDateFromISO(
     return parseDate(value, undefined, minDate, false, queryColumn.isDateOnlyColumn);
 }
 
-export function formatDateTimeDisplayValueForUpdate(vd: ValueDescriptor, queryColumn: QueryColumn): string {
-    const isoValue = vd?.raw;
-    if (!isoValue || typeof isoValue !== 'string') return null;
-    const date = getDateFromISO(isoValue, queryColumn);
+export function getDateTimeDisplayValue(date: Date, queryColumn: QueryColumn): string {
     const { dateFormat, timeFormat } = getPickerDateAndTimeFormat(queryColumn, false, date);
-    if (queryColumn.isTimeColumn) return formatTime(isoValue, timeFormat);
-    return formatDate(date, null, dateFormat);
+    if (queryColumn.isTimeColumn) return formatTime(date, timeFormat);
+    if (queryColumn.isDateOnlyColumn) formatDate(date, null, dateFormat);
+    return formatDateTime(date, null, dateFormat);
 }
 
-export function getTimeValueFromDatePickerInput(date: Date, queryColumn: QueryColumn): string {
-    const { timeFormat } = getPickerDateAndTimeFormat(queryColumn, false, date);
-    return formatTime(date, timeFormat);
+export function getDateTimeDisplayValueFromStr(isoValue: string, queryColumn: QueryColumn): string {
+    if (!isoValue || typeof isoValue !== 'string') return null;
+    const date = getDateFromISO(isoValue, queryColumn);
+    return getDateTimeDisplayValue(date, queryColumn);
 }
 
 export function getColDateFormat(column: QueryColumn, dateFormat?: string, dateOnly?: boolean): string {
@@ -739,7 +737,8 @@ export function formatDateTime(date: Date | string | number, timezone?: string,
 export function formatTime(timeValue: Date | string, timeFormat?: string): string {
     const timeObj = parseTime(timeValue);
     if (!timeObj) return undefined;
-    return format(timeObj, timeFormat ?? getDateFNSTimeFormat());
+    const _timeFormat = toDateFNSFormatString(timeFormat ?? getDateFNSTimeFormat());
+    return format(timeObj, _timeFormat);
 }
 
 // Issue 44398: see DateUtil.java getJsonDateTimeFormatString(), this function is to match the format, which is