I have an application using Bootstrap tables and one of the fields is Time. When I get the data from the database, it is encoded in JSON format ad the data for this field is something like 2016-11-07T13:40:29.000Z which I understand is the standard JSON format.
I'd like to break it apart and have one column in my table display the date and another column display the time, ideally. But I would be happy if I could just get the Time column to display only time.
I've read that is has something to do with adding a dataFormatter to the column header, but I can't seem to make it work, as my javascript returns NaN.
This is the code I found while researching the problem. I'm new to Javascript, so there is probably a few mistakes here that I would appreciate some help with.
<table id="table" data-url ="http://maccdx161012:4567/api/v1/sat" data-toggle="table">
<thead>
<tr>
<th data-field="initials">Initials</th>
<th data-field="sector">Sector</th>
<th data-field="cjs">CJS</th>
<th data-field="satin" data-formatter="timeFormatter">In</th>
<th data-field="satout">Out</th>
<th data-field="duration">Duration</th>
<th data-field="position">Position</th>
<th data-field="ot">OT</th>
</tr>
</thead>
</table>
<script>
function timeFormatter(value) {
var date = new Date(value*1000);
var hours = date.getHours();
var minutes = "0" + date.getMinutes();
return hours + ':' + minutes.substr(-2);
}
</script>
<script>
function timeFormatter(value) {
var date = new Date(value);
var hours = date.getHours();
var minutes = leadZero(date.getMinutes());
return hours + ':' + minutes;
}
function dateFormatter(value) {
var date = new Date(value);
var years = date.getFullYear();
var months = leadZero(date.getMonth() + 1);
var days = leadZero(date.getDate());
return years + '-' + months + '-' + days;
}
function leadZero(n) { return n>9 ? n : "0" + n; }
</script>
It will return time for your local timezone. If you don't want this feature - use Keith's solution.