웹 애플리케이션을 개발할 때, 서버에서 가져온 데이터를 화면에 표현하는 일은 기본 중의 기본이다. 단순 값 하나가 아니라 날짜·시간을 원하는 형식으로 포맷하고, 연/월/일·요일·시/분/초 같은 구성요소를 뽑아 쓰는 경우도 많다.

 

이때 템플릿에서 직접 메서드를 호출하기보다는, Thymeleaf의 #temporals 유틸을 쓰면
${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}처럼 짧은 문법으로 처리할 수 있다. 아래 예제로 흐름을 잡아 보자.

 

1. BasicController 추가 (데이터 준비하기)

컨트롤러에서 현재 시각을 모델에 담아 뷰로 보낸다.

@GetMapping("/date")
public String date(Model model) {
    model.addAttribute("localDateTime", LocalDateTime.now());
    return "basic/date";
}

 

2. 뷰 템플릿에서 #temporals 사용하기

 

먼저 한 줄 포맷 예시(줄바꿈 없이):

<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

전체 템플릿(/resources/templates/basic/date.html)은 아래와 같다.
(주의: EL 표현식 ${ ... }은 한 줄로 유지해야 한다.)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>LocalDateTime</h1>
<ul>
  <li>default = <span th:text="${localDateTime}"></span></li>
  <li>yyyy-MM-dd HH:mm:ss =
    <span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
  </li>
</ul>

<h1>LocalDateTime - Utils</h1>
<ul>
  <li>${#temporals.day(localDateTime)} =
    <span th:text="${#temporals.day(localDateTime)}"></span></li>
  <li>${#temporals.month(localDateTime)} =
    <span th:text="${#temporals.month(localDateTime)}"></span></li>
  <li>${#temporals.monthName(localDateTime)} =
    <span th:text="${#temporals.monthName(localDateTime)}"></span></li>
  <li>${#temporals.monthNameShort(localDateTime)} =
    <span th:text="${#temporals.monthNameShort(localDateTime)}"></span></li>
  <li>${#temporals.year(localDateTime)} =
    <span th:text="${#temporals.year(localDateTime)}"></span></li>
  <li>${#temporals.dayOfWeek(localDateTime)} =
    <span th:text="${#temporals.dayOfWeek(localDateTime)}"></span></li>
  <li>${#temporals.dayOfWeekName(localDateTime)} =
    <span th:text="${#temporals.dayOfWeekName(localDateTime)}"></span></li>
  <li>${#temporals.dayOfWeekNameShort(localDateTime)} =
    <span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span></li>
  <li>${#temporals.hour(localDateTime)} =
    <span th:text="${#temporals.hour(localDateTime)}"></span></li>
  <li>${#temporals.minute(localDateTime)} =
    <span th:text="${#temporals.minute(localDateTime)}"></span></li>
  <li>${#temporals.second(localDateTime)} =
    <span th:text="${#temporals.second(localDateTime)}"></span></li>
  <li>${#temporals.nanosecond(localDateTime)} =
    <span th:text="${#temporals.nanosecond(localDateTime)}"></span></li>
</ul>
</body>
</html>

 

3. 실행 결과

 

4. 팁 & 주의할 점

  • EL 줄바꿈 금지: ${ ... } 안을 줄바꿈/공백으로 쪼개면 파싱 에러가 난다.
  • 포맷 패턴 헷갈림 주의
    • MM=월, mm=분
    • HH=24시간제, hh=12시간제
    • yyyy(연도) vs YYYY(주 기반 연도, 보통 원치 않는 값)
  • (원한다면) 월/요일 이름을 로캘에 맞게 표시하려면 monthName, dayOfWeekName에 로캘을 넘겨 쓸 수 있다.

 

마무리하며:

정리하면, 컨트롤러에서 LocalDateTime을 모델에 담고, 템플릿에서 #temporals로 간단히 포맷하거나 구성 요소를 바로 꺼내 쓰면 된다. 템플릿 가독성이 좋아지고, 날짜·시간 표기 요구사항도 손쉽게 맞출 수 있다.

 

 

감사합니다.

'타임리프' 카테고리의 다른 글

[Thymeleaf] 리터럴  (1) 2025.09.15
[Thymeleaf] URL링크  (0) 2025.09.15
[Thymeleaf] 변수 -SpringEL  (0) 2025.09.11
[Thymeleaf] 텍스트 -text, utext  (0) 2025.09.11
타임리프(Thymeleaf)에 대하여  (0) 2025.09.11

티스토리툴바