javascript - 我想在div中显示js的结果

Question

我想在 div 或 php 中显示此示例的结果

<script>
   function dateformat()
   {
     var date = document.getElementById('date').value;
     date = moment(date).format('D MMMM YYYY');
     document.write(date)
     return false;
    }
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<form onsubmit="return dateformat()" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
   <input type="date" name="date" id="date" >
   <input type="submit" onsubmit="return dateformat()">
</form>

<?php echo $_POST["date"]; ?>

如何修改该代码以使用以下格式的 PHP:DAY August 2019

<?php echo $_POST["date"]; ?>

Answer 1

为什么要用 php 来做这个？这需要您执行额外的服务器请求，因此与使用 Javascript 执行此操作并仅更改元素相比，会导致更多的延迟和更糟糕的用户体验。

只需添加一个元素即可添加结果，并将 document.write(date) 替换为 document.getElementById("result").innerText = date; 即可技巧完美。

function dateformat() {
  var date = document.getElementById('date').value;
  date = moment(date).format('D MMMM YYYY');
  document.getElementById("result").innerText = date;
  return false;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<form onsubmit="return dateformat()" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
  <input type="date" name="date" id="date">
  <input type="submit" onsubmit="return dateformat()">
</form>
<div id="result"></div>