diff --git a/frontend/src/components/form/DateTimePicker.css b/frontend/src/components/form/DateTimePicker.css index 5fbcbf514..b8f289f9b 100644 --- a/frontend/src/components/form/DateTimePicker.css +++ b/frontend/src/components/form/DateTimePicker.css @@ -69,3 +69,9 @@ .jdp-ultra .jdp-clear:hover { color: rgba(255, 255, 255, 0.45); } + +/* With no value the library still paints today's date into its readOnly input; + hide it so an empty (or just-cleared) expiry actually looks empty. */ +.jdp-wrap.jdp-empty input { + color: transparent !important; +} diff --git a/frontend/src/components/form/DateTimePicker.tsx b/frontend/src/components/form/DateTimePicker.tsx index f407e2b6f..0e955ed61 100644 --- a/frontend/src/components/form/DateTimePicker.tsx +++ b/frontend/src/components/form/DateTimePicker.tsx @@ -61,6 +61,16 @@ export default function DateTimePicker({ // Bumped on clear: persian-calendar-suite reads `value` only on mount, so // remounting via key is the only way to reflect an externally cleared value. const [clearNonce, setClearNonce] = useState(0); + // Mounted without a value, persian-calendar-suite seeds today and emits it — + // which would instantly undo a clear. Armed across every (re)mount. + const suppressMountEmit = useRef(true); + + useEffect(() => { + suppressMountEmit.current = false; + return () => { + suppressMountEmit.current = true; + }; + }, [clearNonce]); const persianTheme = useMemo(() => { if (isUltra) return ULTRA_DARK_THEME; @@ -80,11 +90,12 @@ export default function DateTimePicker({ if (datepicker === 'jalalian') { return ( -
+
{ + if (suppressMountEmit.current) return; if (next == null || next === '') { onChange(null); return;