JKK JKK - 1 month ago 9
jQuery Question

Convert Default Spring-Boot DateTime to Human Readable in Datatables

I am trying to convert the default date time format returned from a RepositoryRestResource in Spring Boot to a human readable format in jQuery Datatables. I found this Datatables plugin:

DataTables datetime plugin

I'm using it but getting "Invalid date"

I believe I need to specify the input date format to the plugin so moment.js can understand it to do the conversion but I'm not sure how to format the input format.

Here is my javascript DataTable script:

$('#invoices').DataTable({
"bFilter": true,
"autoWidth": true,
"processing": false,
"ajax": _link,
"sAjaxDataProp" : "_embedded.invoices",
"oLanguage": {
"sSearch": "<span>Filter:</span> _INPUT_" //search
},
columnDefs: [ {
targets: 0,
render: $.fn.dataTable.render.moment( 'YYYY-MM-DD' )
} ],
"columns": [
{ "data": "dropoff"},
{ "data": "ready" },
{ "data": "total_quantity" },
{ "data": "total_price" },
{ "data": "paid" }
]
});


Here's example of the service object data: _embedded.invoices

_embedded: {
invoices: [
{
dropoff: "2016-02-13T18:00:00.000+0000",
ready: "2016-02-15T14:00:00.000+0000",
note: "ZIPPER IS NIKEL",
paid: true,
total_price: 79.8,
total_quantity: 203,
_links: {
self: {
href: "http://localhost:8080/invoices/1"
},
invoice: {
href: "http://localhost:8080/invoices/1"
},
itemlines: {
href: "http://localhost:8080/invoices/1/itemlines"
},
customer: {
href: "http://localhost:8080/invoices/1/customer"
}
}
}


So you can see the date format above: "2016-02-15T14:00:00.000+0000"

It has the full date, time, and utc offset. I just want it to show date and time without seconds, something simple doesn't need to be fancy, just clean it up a little remove the T and UTC garbage at the end for the end users.

Appreciate the help!!!

For my HTML scripts I have them in this order, which doesn't seem to be causing a problem but here it is just in case:

<script src="/js/jQuery-2.2.3/jquery-2.2.3.js"></script>
<script src="/js/datatables.js"></script>
<script src="/js/datetime.js"></script>
<script src="/js/moment.js"></script>

Answer

I would suggest you define bean for Jackson configuration:

@Bean
public Jackson2ObjectMapperBuilder jacksonBuilder() {
    Jackson2ObjectMapperBuilder b = new Jackson2ObjectMapperBuilder();
    b.indentOutput(true).dateFormat(new SimpleDateFormat("yyyy-MM-dd"));
    return b;
}

For more info check how to Customizing the Jackson ObjectMapper: With Spring Boot.