[FIXED] JavaScript JSON response - formatting dates and times

Issue

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).

Solution

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

Answered By - prasanth