HTML5 DateTime + Ajax Jquery + SpringBoot @JsonFormat 예제

https://grokonez.com/frontend/html-5/html5-datetime-ajax-jquery-springboot-jsonformat-example

HTML5 DateTime + Ajax Jquery + SpringBoot @JsonFormat 예제

튜토리얼에서 JavaSampleApproach은 Html5 DateTime + Jquery Ajax + SpringBoot @JsonFormat를 사용하여 웹 애플리케이션을 빌드하는 방법을 보여줍니다.

관련 게시물:

Ajax Jquery post List JavaScript Objects to SpringBoot server | BootStrap

I. 기술

– 자바 1.8
– 메이븐 3.6.1
– 스프링 도구 모음 – 버전 3.8.1.RELEASE
– HTML 5
– 제이쿼리 아약스
– 부트스트랩
– 스프링 부트 – 1.5.7.RELEASE

Ⅱ. HTML5 DateTime + Ajax Jquery + SpringBoot

시간 입력 작업을 위해 Html5는 새로운 입력 유형 세트를 지원합니다.

일자

datetime-local

시간

주

Html5 날짜 입력의 데이터를 JQuery로 바인딩하려면 new Date() :

를 사용합니다.

    $("#taskForm").submit(function(event) {
        // Prevent the form from submitting via the browser.
        event.preventDefault();
        
        // get data from submit form
        var formTask = {
                taskName : $("#taskName").val(),
                startTime : new Date($("#startTime").val()),
                endTime : new Date($("#endTime").val())
        }

Date 개체를 사용자 정의된 형식으로 표시하려면 아래 코드

와 같이 일부 Date 메서드를 사용할 수 있습니다.

function timeFormat(date){
    if(date instanceof Date){
        var isoDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        var time = date.toLocaleString('en-US', { hour: 'numeric',minute:'numeric', hour12: true });
        return isoDate + ' @ ' + time;  
    }else{
        return "";
    }
}

클라이언트에서 서버로 데이터를 교환할 때 JSON.stringify() 에서 Json 형식을 사용하며 Date 객체는 UTC 표준 형식의 String 형식으로 변환됩니다.

https://grokonez.com/frontend/html-5/html5-datetime-ajax-jquery-springboot-jsonformat-example

HTML5 DateTime + Ajax Jquery + SpringBoot @JsonFormat 예제