머테리얼ui의 Date Time Picker와 Moment.js

기존 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.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)}
/>