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

Html5 DateTime + Ajax Jquery + SpringBoot @JsonFormat example

In the tutorial, JavaSampleApproach will show you how to build an web application with Html5 DateTime + Jquery Ajax + SpringBoot @JsonFormat.

Related posts:

• Ajax Jquery post List JavaScript Objects to SpringBoot server | BootStrap

I. Technologies

– Java 1.8 – Maven 3.6.1 – Spring Tool Suite – Version 3.8.1.RELEASE – Html 5 – JQuery Ajax – Bootstrap – Spring Boot – 1.5.7.RELEASE

II. Html5 DateTime + Ajax Jquery + SpringBoot

For working with time input, Html5 support a set of new Input Types:

• date
• datetime-local
• time
• week

• To bind data from Html5 date input with JQuery, we use 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())
    	}

• To display Date object with customized format, we can use some Date methods as below code

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 "";
	}
}

• When exchange data between client to server, Json format is used by JSON.stringify(), and Date objects will be converted to String type with UTC standard format.

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

Html5 DateTime + Ajax Jquery + SpringBoot @JsonFormat example

#springboot #jquery #ajax #jsonformat #html5