@@ -12,7 +12,7 @@ import { isNumber } from "lodash";
1212import dayjs from "dayjs" ;
1313import utc from "dayjs/plugin/utc" ;
1414import { CalendarCompIconSmall , PrevIcon , SuperPrevIcon } from "lowcoder-design" ;
15- import { useState } from "react" ;
15+ import { useEffect , useRef , useState } from "react" ;
1616import styled from "styled-components" ;
1717import { DateParser , DATE_FORMAT } from "util/dateTimeUtils" ;
1818
@@ -149,20 +149,34 @@ type DateEditProps = {
149149} ;
150150
151151export const DateEdit = ( props :DateEditProps ) => {
152+ const pickerRef = useRef < any > ( ) ;
152153const [ panelOpen , setPanelOpen ] = useState ( true ) ;
153154let value = dayjs ( props . value , DateParser ) ;
154155if ( ! value . isValid ( ) ) {
155156value = dayjs ( 0 , DateParser ) ;
156157}
158+
159+ const [ tempValue , setTempValue ] = useState < dayjs . Dayjs | null > ( value ) ;
160+
161+ useEffect ( ( ) => {
162+ const value = props . value ?dayjs ( props . value , DateParser ) :null ;
163+ setTempValue ( value ) ;
164+ } , [ props . value ] )
165+
157166return (
158167< Wrapper
159168onKeyDown = { ( e ) => {
160169if ( e . key === "Enter" && ! panelOpen ) {
161170props . onChangeEnd ( ) ;
162171}
163172} }
173+ onMouseDown = { ( e ) => {
174+ e . stopPropagation ( ) ;
175+ e . preventDefault ( ) ;
176+ } }
164177>
165178< DatePickerStyled
179+ ref = { pickerRef }
166180$open = { panelOpen }
167181suffixIcon = { < CalendarCompIconSmall /> }
168182prevIcon = { < PrevIcon /> }
@@ -172,7 +186,7 @@ export const DateEdit = (props: DateEditProps) => {
172186allowClear = { false }
173187variant = "borderless"
174188autoFocus
175- defaultValue = { value }
189+ value = { tempValue }
176190showTime = { props . showTime }
177191showNow = { true }
178192defaultOpen = { true }
@@ -184,7 +198,7 @@ export const DateEdit = (props: DateEditProps) => {
184198} }
185199onOpenChange = { ( open ) => setPanelOpen ( open ) }
186200onChange = { ( value , dateString ) => props . onChange ( dateString as string ) }
187- onBlur = { props . onChangeEnd }
201+ onBlur = { ( ) => props . onChangeEnd ( ) }
188202/>
189203</ Wrapper >
190204) ;