기존 input 창에는 날짜와 시간을 합친 형태가 없어서, 우리가 기존에 다운로드 했던 머테리얼 ui에서 Date Time Picker찾았고, 사용하기로 했다. 문제는, 사용자가 시간을 클릭했을 때, 2021-08-11T10:33 이러한 형태로 값을 보내주고 있었다. 이미 우리는 Moment.js를 이용하고 있었고, 우리가 필요한 형식으로 변환하였다. 그러나 여기서 더 추가적인 문제를 발견했다. 아래의 영상처럼 오전과 오후가 변해도 시간이 바뀌지 않는 것이다. (다시 생각해보면 12시간 체제의 문제)
변환해야 할 값에서 T를 빼줘도, 여전히 24시간 체제로 바뀌지 않는다.
moment("2021-08-12 17:30").format("YYYY-MM-DD hh:mm") //실패
수 많은 삽질 속에서 스택오버플로우에서 답을 찾았다.
https://stackoverflow.com/questions/12970284/moment-js-24h-format
moment("2021-08-12 17:30").format("YYYY-MM-DD HH:mm") //성공
머테리얼 ui의 Date Time Picker의 defaultValue(시간 기본값)을 설정할 수 있는데, 이때에도 moment.js를 사용해주면 좋다. 아래는 선거 시작일과 선거 종료일에 사용되어질 녀석들이다. 선거 시작일은 항상 현재이며, 선거 종료일은 현재로부터 일주일 뒤로 설정해주었다.
<TextField
name="start_date"
id="datetime-local"
label="선거 시작일"
type="datetime-local"
defaultValue={moment().format("YYYY-MM-DDTHH:mm")}
className={classes.textField}
InputLabelProps={{shrink: true,}}
onChange={e => setElectionInfo(e)}
/>
<TextField
name="end_date"
id="datetime-local"
label="선거 종료일"
type="datetime-local"
defaultValue={moment().add(7, "d").format("YYYY-MM-DDTHH:mm")}
className={classes.textField}
InputLabelProps={{shrink: true,}}
onChange={e => setElectionInfo(e)}
/>
'📝 꾸준함이 무기 > React' 카테고리의 다른 글
React 프로젝트에서 Storybook 설치 시, 프로젝트 실행이 안된다면? (0) | 2021.10.18 |
---|---|
같은 함수 내에서 SetState 2번 이상 사용해야 될때엔? (0) | 2021.08.11 |
부모컴포넌트에서 자식컴포넌트에게 함수를 넘겨주려면? (0) | 2021.07.03 |
defaultProps로 스타일 지정하기 (0) | 2021.07.03 |
<>와 <React.Fragments>의 차이점 (2) | 2021.07.03 |