To address the time part of the datetime picker, I looked for a small plugin that offered the ability to display time in mulitple formats including 12 hour, AM/PM and ISO 8601 format. After testing few solutions I settled on XDsofts DateTimePicker jQuery plugin.
https://xdsoft.net/jqplugins/datetimepicker/
I only ran into one issue in implementation that wasn't documented very well in the examples and opitions list. By providing both a "format" and "timeFormat" I was able to get the plugin to display a human readable calendar and 12 hour AM/PM time selection. The output to the visible field worked directly into the ISO 8601 format I required. Here is the code.
<input id="txtArticleDateCreated" name="txtArticleDateCreated" type="text" autocomplete="off" />
<script src="/js/datetimepicker/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/datetimepicker/jquery.datetimepicker.min.css" >
<script>
$(function(){
$("#txtArticleDateCreated").datetimepicker({
format:'Y-m-d H:i:s',
step:15,
formatTime:'h:i a'
});
});
</script>I also found that adding the input element autocomplete value off removed Chromes autocomplete that kept blocking the selection box.