使用datetime-local选择时间和后端接口对接时的问题_datetime-local前后端接收格式问题-优快云博客

本文链接：https://blog.youkuaiyun.com/lqy219/article/details/119174666

本文记录了在前端使用datetime-local选择时间并与后端Java接口对接时遇到的问题。后端实体类通过JsonFormat注解控制时间格式，前端在获取数据后，展示时间时需要将后端返回的' '替换为'T'，以符合datetime-local的格式要求。新增记录时，时间显示为空，而编辑时则显示从后端获取的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录使用datetime-local选择时间和后端接口对接时的问题

前端

<label>任务开始时间:</label>
     <input type="datetime-local" class="form-control" th:value="${#dates.format(mission.missionStartTime,'yyyy-MM-dd')}+'T'+${#dates.format(mission.missionStartTime,'HH:mm')}"
name="missionStartTime" id="missionStartTime" style="width: 220px">

后端实体类使用JsonFormat控制格式

//没有使用String类型，表示为时间戳，数据类型和数据库表中的类型对应
@JsonFormat(pattern = "yyyy-MM-dd HH:mm", timezone = "GMT+8")
    private Date missionStartTime;

获取数据返回后的数据类型是上面的数据类型，再次编辑时显示的时间时从后端获取，然后显示在选择时间的组件上
新增时显示为空

再次编辑时显示从后端获取的数据编辑时显示的时间
因为使用了datetime-local 如果显示的话只能显示为yyyy-MM-ddTHH:mm这种类型，因此在前端获取到数据赋值的时候，将空格替换为T

function editMission(data) {
        $.ajax({
            url: '/Mission/editMission?missionId=' + data,
            type: 'post',
            dataType: 'json',
            success: function (result) {
                var time1 = result.missionStartTime.toString().replace(' ', 'T');
                var time2 = result.missionEndTime.toString().replace(' ', 'T');
                $("#missionStartTime").val(time1);
                $("#missionEndTime").val(time2);
            },
            error: function (data) {
                console.log(data);
            }
        });
    }