fix: apply datetime selection immediately
This commit is contained in:
@@ -795,3 +795,12 @@
|
|||||||
- `npm.cmd run typecheck` 성공.
|
- `npm.cmd run typecheck` 성공.
|
||||||
- `npm.cmd test` 성공.
|
- `npm.cmd test` 성공.
|
||||||
- `npm.cmd run build` 성공.
|
- `npm.cmd run build` 성공.
|
||||||
|
|
||||||
|
- 2026-07-16 출입신청 일시 선택 UI 재수정:
|
||||||
|
- 운영 서버에서 출입일시 캘린더 `[입력]` 버튼 흐름이 다시 막히는 현상 확인.
|
||||||
|
- 달력 팝업 내부 확정 버튼이 브라우저/라이브러리 이벤트와 충돌할 가능성이 있어 `[입력]` 버튼 의존 구조 제거.
|
||||||
|
- 날짜/시간 선택 즉시 `visitFrom`/`visitTo` 입력값에 반영되도록 단순화.
|
||||||
|
- 검증:
|
||||||
|
- `npm.cmd run typecheck` 성공.
|
||||||
|
- `npm.cmd run build` 성공.
|
||||||
|
- `npm.cmd test` 성공.
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React from 'react';
|
||||||
import DatePicker, { registerLocale } from 'react-datepicker';
|
import DatePicker, { registerLocale } from 'react-datepicker';
|
||||||
import { ko } from 'date-fns/locale';
|
import { ko } from 'date-fns/locale';
|
||||||
import 'react-datepicker/dist/react-datepicker.css';
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
@@ -22,46 +22,22 @@ function fromLocalString(value: string): Date | null {
|
|||||||
return value ? new Date(value) : null;
|
return value ? new Date(value) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DateTimePicker: React.FC<Props> = ({ value, onChange, placeholder }) => {
|
export const DateTimePicker: React.FC<Props> = ({ value, onChange, placeholder }) => (
|
||||||
const [open, setOpen] = useState(false);
|
<DatePicker
|
||||||
const [draft, setDraft] = useState<Date | null>(fromLocalString(value));
|
selected={fromLocalString(value)}
|
||||||
|
onChange={(d: Date | null) => {
|
||||||
useEffect(() => {
|
if (d) onChange(toLocalString(d));
|
||||||
setDraft(fromLocalString(value));
|
}}
|
||||||
}, [value]);
|
showTimeSelect
|
||||||
|
timeIntervals={5}
|
||||||
const confirm = () => {
|
timeCaption="시간"
|
||||||
if (draft) {
|
timeFormat="a h:mm"
|
||||||
onChange(toLocalString(draft));
|
dateFormat="yyyy.MM.dd (eee) a h:mm"
|
||||||
}
|
dateFormatCalendar="yyyy.MM"
|
||||||
setOpen(false);
|
locale="ko"
|
||||||
};
|
shouldCloseOnSelect={false}
|
||||||
|
placeholderText={placeholder ?? '날짜와 시간을 선택하세요'}
|
||||||
return (
|
className="dt-input"
|
||||||
<DatePicker
|
popperClassName="acs-datepicker"
|
||||||
selected={draft}
|
/>
|
||||||
onChange={(d: Date | null) => setDraft(d)}
|
);
|
||||||
open={open}
|
|
||||||
onInputClick={() => setOpen(true)}
|
|
||||||
onCalendarOpen={() => setOpen(true)}
|
|
||||||
onClickOutside={() => setOpen(false)}
|
|
||||||
showTimeSelect
|
|
||||||
timeIntervals={5}
|
|
||||||
timeCaption="시간"
|
|
||||||
timeFormat="a h:mm"
|
|
||||||
dateFormat="yyyy.MM.dd (eee) a h:mm"
|
|
||||||
dateFormatCalendar="yyyy.MM"
|
|
||||||
locale="ko"
|
|
||||||
shouldCloseOnSelect={false}
|
|
||||||
placeholderText={placeholder ?? '날짜와 시간을 선택하세요'}
|
|
||||||
className="dt-input"
|
|
||||||
popperClassName="acs-datepicker"
|
|
||||||
>
|
|
||||||
<div className="dt-actions">
|
|
||||||
<button type="button" className="btn-primary dt-confirm" onClick={confirm}>
|
|
||||||
입력
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</DatePicker>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
Reference in New Issue
Block a user