mysql LocalDateTime 그리고 HTML DateTime-local 간의 변환..

Spring boot 프로젝트에서 Entity에 날짜시간 관련 변수의 데이터형을 LocalDateTime을 사용하였다..

그럼 Mysql에는 자동으로 datetime(6)으로 설정이 된다..

그리고 HTML에서는 날짜를 입력받기 위해 datetime-local 타입의 Input 필드를 사용하였다..

 

 

즉 현재 날짜를 나타는 한 항목(데이터)을

Mysql - datetime(6)

Java(Entity) - LocalDateTime

HTML - datetime-local

이렇게 3가지 형식으로 가지고 있는것이다...

문제는 datetime-local 때문에 발생하였다...

datetime-local은 날짜와 시간을 입력받기 위해 사용한 input 타입이다...

날짜와 시간을 입력 받을 필요가 없고 그냥 출력만 하고싶다면 type="text" 형의 input 타입에 

value를 넣을때 th:value="${#temporals.format(dto.modDate, 'yyyy/MM/dd HH:mm:ss')}"

이런식으로 LocalDateTime의 데이터를 포맷만 해주면 됬었다...

 

 

그런데 datetime-local을 사용한 이유는 입력을 받기 위해서고..문제는..datetime-local 타입의 input 데이터를 submit으로 인해 서버에서 받는것도 되지가 않고datetime-local 타입의 input 에 데이터를 넣어서 세팅을 해놓는것도 되지가 않았다..

 

서버에서 받을때는 똑같이 LocalDateTime으로 설정을 하니까 매칭이 되지 않았다..그리고 HTML에 세팅을 하려고 해도 기본값으로만 보여졌다..

 

해결을 하기위해

일단 바꿀수 없다고 가정한 원칙은

1. Entity는 기존처럼 LocalDateTime을 사용하고 DB도 자동으로 DateTime을 사용한다.

2. HTML에서는 날짜시간 입력을 위해 datetime-local을 사용한다.

 

그리고 각 파트별로 데이터의 타입은

DB 필드 타입 - datetime(6)

엔티티 변수 타입 - LocalDateTime

HTML 전달위한 DTO 변수 타입 - String

HTML input 타입 - datetime-local

 

 

해결방법 :

HTML datetime-local타입 input 데이터를 DTO에서 String으로 받고 (String은 날짜관련 데이터형이 달라도 다 받아줄것 같아서..)

String 형태의 데이터를 Entity에 저장하기 위해 LocalDateTime으로 형변환 하고 이때 HTML datetime-local 형식이 받을 수 있는 포맷으로 파싱을 하여 LocalDateTime 형태로 저장한다. 

 LocalDateTime newDate = LocalDateTime
                .parse(dto.getLimitDate(), DateTimeFormatter.ISO_DATE_TIME);

DB에는 datetime(6) 형태 변수에 2021-03-30 15:30:00.000000 형태로 저장이 된다.

 

그 데이터를 읽어서 다시 datetime-local에 뿌리려고 어떠한 포맷으로 파싱 해보려고 해도 에러가 나거나 제대로 출력이 되지 않았다.. 그러므로 애초에 datetime-local이 받을 수있는 LocalDateTime 형태로 DB에 저장을 하였다.포맷형태로 파싱을 하지 않고 저장하면 LocalDateTime으로 형변환 하여 DB에 저장은 되지만 (DB상에 0.xxx 초 단위까지 저장됨..)

 

그리고 

DTO에 String 형태로 저장하여 HTML에 전송하고

HTML에서는 아래와 같이 그냥 value엣 대입하여 사용하면 된다. 

     <div class="form-group">
                <label>Limit Date</label>
                <input id="limitDate" class="form-control"type="datetime-local" th:value="${dto.limitDate}"/><br>
            </div>

 

 

요약하자면

- HTML -> DB 

datetime-local 값을 dto에서 String으로 받아서   

LocalDateTime newDate = LocalDateTime.parse(dto.getLimitDate(), DateTimeFormatter.ISO_DATE_TIME);

을 사용하여 형변환 해서 DB 저장

 

- DB -> HTML

DB에서 읽은 LocalDateTime을 String으로 DTO 저장하고

HTML에는      

<div class="form-group">
              <label>Limit Date</label>
                <input id="limitDate" class="form-control"type="datetime-local" th:value="${dto.limitDate}"/><br>
</div>

으로 그냥 출력