Html5 DateTime + Ajax Jquery + SpringBoot @JsonFormat example
ajax
15
jQuery
28
springboot
138
jsonformat
1
Male avatar

loveprogramming viết ngày 29/04/2021

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:

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

451 bài viết.
79 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 5 tháng trước
1 0
Bài viết liên quan
White
20 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 5 năm trước
20 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
451 bài viết.
79 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!