[英]JavaScript JSON response - formatting dates and times
当我触发JavaScript代码打开模式时,将发送AJAX调用以JSON格式检索数据。 然后,我使用JSON响应填充我的模式。
触发JavaScript的链接是这样的:
<?= $this->Html->link(__('View'), ['action' => 'popup', $session->id], ['class' => 'view', 'data-id' => $session->id]) ?>
这是来自CakePHP 3视图上的表的操作。 $ session-> id根据链接被单击的数据行来确定。 Popup是一个空的CakePHP 3函数,仅用于促进JavaScript的工作和模式的开放。
触发模式的JavaScript如下:
<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>
我的CakePHP 3 SessionsController的details函数是这样的,它将为之前获取的$ session-> id检索相关数据:
public function details($id = null)
{
$details = $this->Sessions->get($id);
$this->set(array(
'output' => $details,
'_serialize' => 'output',
'_jsonp' => true
));
}
这是我的全部模态,然后打开:
<!-- 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">×</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>
但是,我的日期和时间采用以下格式:
对于日期响应,我只需要日期,并以D / M / Y格式设置格式。 对于时间响应,我只需要时间,格式为12小时hh:mm AM / PM格式。 (我不需要最后的时区资料,因为在首次提交数据时已考虑了时区资料)。
只需使用普通的javascript new Date()
cal(yourdatevarible ,whichtype)
就像简单的js函数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; } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.