From 95bfed1de6e9c6066f7ce0468d39ea95f9197b87 Mon Sep 17 00:00:00 2001 From: HackGenesis Date: Wed, 19 Mar 2025 16:55:42 +0200 Subject: [PATCH 1/3] set machine date when midnight has been set to false --- .../dateField/datePickerWrapper.tsx | 35 +++++++++++++++---- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx b/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx index c8de939f3..04987d90a 100644 --- a/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx +++ b/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx @@ -1,6 +1,6 @@ import { DatePicker } from '@/components/antd'; import moment, { isMoment } from 'moment'; -import React, { FC, useMemo } from 'react'; +import React, { FC, useEffect, useMemo, useState } from 'react'; import ReadOnlyDisplayFormItem from '@/components/readOnlyDisplayFormItem'; import { useForm, useGlobalState, useMetadata } from '@/providers'; import { getStyle } from '@/providers/form/utils'; @@ -10,13 +10,13 @@ import { IDateFieldProps, RangePickerChangeEvent, TimePickerChangeEvent } from ' import { DATE_TIME_FORMATS, disabledDate, disabledTime, getFormat } from './utils'; import { asPropertiesArray } from '@/interfaces/metadata'; -const MIDNIGHT_MOMENT = moment('00:00:00', 'HH:mm:ss'); - const { RangePicker } = DatePicker; export const DatePickerWrapper: FC = (props) => { const { properties: metaProperties } = useMetadata(false)?.metadata ?? {}; const properties = asPropertiesArray(metaProperties, []); + const [MIDNIGHT_MOMENT, setMIDNIGHT_MOMENT] = useState(moment('00:00:00', 'HH:mm:ss')); + const [momentValue, setMomentValue] = useState(null); const { globalState } = useGlobalState(); @@ -73,7 +73,6 @@ export const DatePickerWrapper: FC = (props) => { return; } const newValue = convertValue(localValue); - (onChange as TimePickerChangeEvent)(newValue, dateString); }; @@ -89,12 +88,32 @@ export const DatePickerWrapper: FC = (props) => { const handleOnOk = (value: moment.Moment | null) => handleDatePickerChange(value, value?.format(pickerFormat)); + const getCurrentTime = () => { + setMomentValue(null); // Reset the state to null + if (defaultToMidnight) { + setMIDNIGHT_MOMENT(moment('00:00:00', 'HH:mm:ss')); + } else { + // Get the current system time as a Moment object and format it to 'HH:mm:ss' + const MIDNIGHT = moment().set({ + hour: moment().hour(), + minute: moment().minute(), + second: moment().second(), + millisecond: 0, + }); + setMIDNIGHT_MOMENT(moment(MIDNIGHT.format('HH:mm:ss'))); + } + }; + const evaluatedStyle = { width: '100%', ...getStyle(style, formData, globalState) }; - const momentValue = useMemo(() => getMoment(value, pickerFormat), [value, pickerFormat]); const rangeMomentValue = useMemo(() => getRangeMoment(value, pickerFormat), [value, pickerFormat]); const defaultMomentValue = useMemo(() => getRangeMoment(defaultValue, pickerFormat), [defaultValue, pickerFormat]); + useEffect(() => { + const newMomentValue = getMoment(value, pickerFormat); + setMomentValue(newMomentValue); + }, [value, pickerFormat]); + if (range) { return ( = (props) => { defaultValue={defaultMomentValue} {...rest} picker={picker} - showTime={showTime ? (defaultToMidnight ? { defaultValue: [MIDNIGHT_MOMENT, MIDNIGHT_MOMENT] } : true) : false} + showTime={showTime ? { defaultOpenValue: [MIDNIGHT_MOMENT, MIDNIGHT_MOMENT] } : false} disabled={readOnly} style={evaluatedStyle} allowClear variant={hideBorder ? 'borderless' : undefined} + onClick={getCurrentTime} /> ); } @@ -129,7 +149,7 @@ export const DatePickerWrapper: FC = (props) => { onChange={handleDatePickerChange} onOk={handleOnOk} variant={hideBorder ? 'borderless' : undefined} - showTime={showTime ? (defaultToMidnight ? { defaultValue: MIDNIGHT_MOMENT } : true) : false} + showTime={showTime ? { defaultOpenValue: MIDNIGHT_MOMENT } : false} showNow={showNow} picker={picker} format={pickerFormat} @@ -137,6 +157,7 @@ export const DatePickerWrapper: FC = (props) => { {...rest} value={momentValue} allowClear + onClick={getCurrentTime} /> ); }; From 2a0e490d45d15f3efd2c6c4fe1314f907191aecf Mon Sep 17 00:00:00 2001 From: HackGenesis Date: Thu, 20 Mar 2025 10:41:33 +0200 Subject: [PATCH 2/3] update date range --- .../dateField/datePickerWrapper.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx b/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx index 04987d90a..ba58a91eb 100644 --- a/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx +++ b/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx @@ -17,6 +17,7 @@ export const DatePickerWrapper: FC = (props) => { const properties = asPropertiesArray(metaProperties, []); const [MIDNIGHT_MOMENT, setMIDNIGHT_MOMENT] = useState(moment('00:00:00', 'HH:mm:ss')); const [momentValue, setMomentValue] = useState(null); + const [rangeMomentValue, setRangeMomentValue] = useState(null); const { globalState } = useGlobalState(); @@ -89,7 +90,10 @@ export const DatePickerWrapper: FC = (props) => { const handleOnOk = (value: moment.Moment | null) => handleDatePickerChange(value, value?.format(pickerFormat)); const getCurrentTime = () => { - setMomentValue(null); // Reset the state to null + // Reset the state to null + setMomentValue(null); + setRangeMomentValue(null); + if (defaultToMidnight) { setMIDNIGHT_MOMENT(moment('00:00:00', 'HH:mm:ss')); } else { @@ -105,13 +109,16 @@ export const DatePickerWrapper: FC = (props) => { }; const evaluatedStyle = { width: '100%', ...getStyle(style, formData, globalState) }; - - const rangeMomentValue = useMemo(() => getRangeMoment(value, pickerFormat), [value, pickerFormat]); const defaultMomentValue = useMemo(() => getRangeMoment(defaultValue, pickerFormat), [defaultValue, pickerFormat]); useEffect(() => { - const newMomentValue = getMoment(value, pickerFormat); - setMomentValue(newMomentValue); + if (range) { + const newRangeMomentValue = getRangeMoment(value, pickerFormat); + setRangeMomentValue(newRangeMomentValue); + } else { + const newMomentValue = getMoment(value, pickerFormat); + setMomentValue(newMomentValue); + } }, [value, pickerFormat]); if (range) { From 7d835f6750e01b3b010d55d16fa72386bb8de9c5 Mon Sep 17 00:00:00 2001 From: HackGenesis Date: Mon, 24 Mar 2025 11:09:55 +0200 Subject: [PATCH 3/3] fix variable name errors --- .../src/designer-components/dateField/datePickerWrapper.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx b/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx index ba58a91eb..dccddd117 100644 --- a/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx +++ b/shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx @@ -15,7 +15,7 @@ const { RangePicker } = DatePicker; export const DatePickerWrapper: FC = (props) => { const { properties: metaProperties } = useMetadata(false)?.metadata ?? {}; const properties = asPropertiesArray(metaProperties, []); - const [MIDNIGHT_MOMENT, setMIDNIGHT_MOMENT] = useState(moment('00:00:00', 'HH:mm:ss')); + const [MIDNIGHT_MOMENT, SET_MIDNIGHT_MOMENT] = useState(moment('00:00:00', 'HH:mm:ss')); const [momentValue, setMomentValue] = useState(null); const [rangeMomentValue, setRangeMomentValue] = useState(null); @@ -95,7 +95,7 @@ export const DatePickerWrapper: FC = (props) => { setRangeMomentValue(null); if (defaultToMidnight) { - setMIDNIGHT_MOMENT(moment('00:00:00', 'HH:mm:ss')); + SET_MIDNIGHT_MOMENT(moment('00:00:00', 'HH:mm:ss')); } else { // Get the current system time as a Moment object and format it to 'HH:mm:ss' const MIDNIGHT = moment().set({ @@ -104,7 +104,7 @@ export const DatePickerWrapper: FC = (props) => { second: moment().second(), millisecond: 0, }); - setMIDNIGHT_MOMENT(moment(MIDNIGHT.format('HH:mm:ss'))); + SET_MIDNIGHT_MOMENT(moment(MIDNIGHT.format('HH:mm:ss'))); } };