JavaScript JSON response - formatting dates and times

Question

When I trigger my JavaScript code to open up a modal, an AJAX call is sent to retrieve data in JSON format. I then use the JSON response to populate my modal.

The link that triggers the JavaScript is this:

<?= $this->Html->link(__('View'), ['action' => 'popup', $session->id], ['class' => 'view', 'data-id' => $session->id]) ?>

This is an action from a table on a CakePHP 3 View. $session->id is decided based on which row of data the link is clicked. Popup is an empty CakePHP 3 function that just facilitates the JavaScript working and the modal opening up.

The JavaScript which triggers the modal is as follows:

<script type="text/javascript">
    $(function () {
        $('.view').click(function (ev) {
            ev.preventDefault();
            var sessionId = $(this).attr('data-id');
            $('#viewModal').modal('show');
            $.ajax({
                url:"localhost/project/sessions/details/"+sessionId+".json",
                type:'POST',
                success:function(res) {
                    if(res) {
                        document.getElementById("prdatestart").innerHTML = res.date_start;
                        document.getElementById("prstarttime").innerHTML = res.starttime;
                    }
                }
            });
        });
    });
</script>

The details function from my CakePHP 3 SessionsController is this, which retrieves the relevant data for the $session->id that was obtained earlier:

public function details($id = null)
    {
        $details = $this->Sessions->get($id);
        $this->set(array(
            'output' => $details,
            '_serialize' => 'output',
            '_jsonp' => true
        ));
    }

This is my modal in full that then opens up:

<!-- Modal -->
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="viewModalLabel">Session Details</h3>
                <br>
                <table class="vertical table col-sm-2">
                    <tr>
                        <th>Starting Date:</th>
                        <td id="prdatestart"></td>
                    </tr>
                    <tr">
                        <th>Starting Time:</th>
                        <td id="prstarttime"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
                </button>
            </div>
        </div>
    </div>
</div>

However, my dates and times are in this format:

Date: 2017-05-12T00:00:00+00:00
Time: 2017-03-31T00:14:00+11:00

For the date response, I only need the date, and formatted in D/M/Y format. For the time response, I only need the time, formatted in 12 hour hh:mm AM/PM format. (I don't need the timezone stuff at the end as that was taken into account when the data was first submitted).

Possible duplicate http://stackoverflow.com/questions/9709989/format-date-time-javascript — Asons, Mar 31 '17 at 07:25
You should provide us the code responsible for the returned date, you may want to do the formatting here — Jaay, Mar 31 '17 at 07:25
@lonut: I attempted to add .moment().format('l') to my json responses (eg. res.date_start, but it didn't work - I got an error in the console: `Uncaught TypeError: res.date_start.moment is not a function` — mistaq, Mar 31 '17 at 07:38
@Jaay I've included the JavaScript for the modal and CakePHP 3 function which retrieves the data now. — mistaq, Mar 31 '17 at 07:38

prasanth · Accepted Answer · 2017-03-31T08:22:21.083

simply use with normal javascript new Date() .post like simple js function cal(yourdatevarible ,whichtype) type=date|time

var date = '2017-05-12T00:00:00+00:00';
var time = '2017-03-31T00:14:00+11:00';

console.log(cal(date, 'date'))
console.log(cal(time, 'time'))

function cal(date, type) {

  var m = ['Jan', 'Feb', 'Mar', 'Aprl', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  //var w =['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  var x = new Date(date)
  var h = x.getHours() > 12 ? x.getHours() - 12 : x.getHours();
  var format = x.getHours() > 12 ? 'PM' : 'AM';
  if (type == 'date') {
    return x.getDate() + ' ' + m[x.getMonth()] + ' ' + x.getFullYear();
  } else {
    var min = x.getMinutes().toString().length > 1 ? x.getMinutes() : '0' + x.getMinutes();
     h =h.toString().length > 1 ? h : '0' + h;
    return h + ':' + min + ' ' + format;
  }
}

That works pretty well, thank you. One thing: I would like to format the time a little bit more. If the time is on the hour, it shows as x:0AM/PM rather than x:00AM/PM. I would also like to add a space in between the time and the AM/PM. — mistaq, Mar 31 '17 at 08:03

JavaScript JSON response - formatting dates and times

1 Answers1