Spring Bootの画面から@DateTimeFormatを使用して日時項目を受信するサンプルです。
(確認環境：Spring Boot 2.5,JDK 11)
目次
| サンプル | 画面から@DateTimeFormatを使用して日時項目を受信 |
| 送信の画面 | |
| データを格納するクラス(SyainForm.java) | |
| コントローラのクラス(MainController.java) | |
| 送受信するファイル(index.html) |
画面から@DateTimeFormatを使用して日時項目を受信
画面(index.html)から項目を送信しコントローラクラス(MainController.java)で受信します。
データを格納するクラス(SyainForm.java)で、日時のデータ型は@DateTimeFormatを使用して格納しそのデータを返します。
以下のURLでアクセスします。
http://localhost:8765
githubにコードがあります。
https://github.com/ut23405/springboot/tree/master/springboot-DateTimeFormat
送信の画面
JavaのLocalDate型、LocalTime型、LocalDateTime型、Date型の項目にデータを送信します。
データを格納するクラス(SyainForm.java)
package com.example.demo;
import java.time.LocalDate;
import java.time.LocalDateTime;
import java.time.LocalTime;
import java.util.Date;
import org.springframework.format.annotation.DateTimeFormat;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
@Data
public class SyainForm {
private String name;
@DateTimeFormat(pattern = "yyyy/MM/dd")
@JsonFormat(pattern = "yyyy/MM/dd")
private LocalDate localDate;
@DateTimeFormat(pattern = "HH:mm:ss")
private LocalTime localTime;
@DateTimeFormat(pattern = "yyyy/MM/dd HH:mm:ss.SSS")
@JsonFormat(pattern = "yyyy/MM/dd HH:mm:ss.SSS")
private LocalDateTime localDateTime;
@DateTimeFormat(pattern = "yyyy/MM/dd HH:mm:ss.SSS")
@JsonFormat(pattern = "yyyy/MM/dd HH:mm:ss.SSS")
private Date date;
}上記の日時項目に@DateTimeFormatをつけています。ないとエラーになります。
@JsonFormatは、JSONで値を返すために使用しています。
コントローラのクラス(MainController.java)
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class MainController {
@GetMapping("/")
public String write1() {
return "test1/index";
}
@PostMapping("/check")
@ResponseBody
public SyainForm disp(SyainForm syainForm) {
System.out.println(syainForm.getLocalDate()); // 2022-02-05
System.out.println(syainForm.getLocalTime()); // 23:47:22
System.out.println(syainForm.getLocalDateTime());// 2021-10-06T23:47:22.175
System.out.println(syainForm.getDate());// Wed Oct 06 23:47:22 JST 2021
return syainForm;
}
}
19-22行目は受信した日時の値を表示しています。
19行目のLocalDateはハイフン(-)区切りになっています。
21行目のLocalDateTimeは日と時間の間にTがあります。
22行目のDateは、Wed Oct・・・になっています。
送受信するファイル(index.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>check</title>
</head>
<body>
<form method="post">
<p><input type="text" name="name" value="suzuki" /></p>
<p><input type="text" name="localDate" value="2022/02/05" /></p>
<p><input type="text" name="localTime" value="23:47:22" /></p>
<p><input type="text" name="localDateTime" value="2021/10/06 23:47:22.175" /></p>
<p><input type="text" name="date" value="2021/10/06 23:47:22.175" /></p>
<p><input type="button" id="button1" value="送信" /></p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
$("#button1").click(function () {
$.ajax({
url: "/check",
type: "POST",
data: $("form").serialize(),
dataType: "json",
timespan: 1000,
})
.done(function (data1, textStatus, jqXHR) {
console.log(jqXHR.status); // 200
console.log(data1["name"]); // suzuki
console.log(data1["localDate"]); // 2022-02-05
// @JsonFormat使用時、2022/02/05
console.log(data1["localTime"]); // 23:47:22
console.log(data1["localDateTime"]); //2021-10-06T23:47:22.175
// @JsonFormat使用時、2021/10/06 23:47:22.175
console.log(data1["date"]); //2021-10-06T14:47:22.175+00:00
// @JsonFormat使用時、2021/10/06 14:47:22.175
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR.status); //例：404
console.log(textStatus); //例：error
console.log(errorThrown); //例：NOT FOUND
})
.always(function () {
console.log("complete"); // complete
});
});
});
</script>
</body>
</html>33行目は、 @JsonFormat使用でスラッシュ(/)区切りになっています。
関連の記事