Question

我是Javascript和HTML的新手。现在，我正在使用HTML来显示从XML文件中检索的时间。以下是HTML标记。

<tr>
  <th>Date of Birth: </th>
  <td>{{dob}}</td>
</tr>

这将以yyyy-mm-dd显示日期。日期将显示为2012-03-12我希望将其显示为2013年3月12日。我使用了moment.min.js但未成功。我不知道如何从标签调用javascript函数并相应地显示日期。

Answer 1

<table>
  <tr>
    <th>Date of Birth: </th>
    <td id='date-of-birth'></td>
  </tr>
</table> 

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script>
  var dob = '2012-03-12';
  var dateString = moment(dob).format('DD MMMM YYYY');
  var element = document.getElementById('date-of-birth');
  element.innerHTML = dateString;
</script>

Fiddle.

但是，如果您想使用{{variable}}括号语法在HTML中插入值，则可以使用Handlebars之类的JavaScript模板库。

以下是一个例子：

<script id="sample-template" type="text/x-handlebars-template">
  <table>
    <tr>
      <th>Date of Birth: </th>
      <td>{{dob}}</td>
    </tr>
  </table>
</script>

<div id="output"></div>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script>
  var dob = '2012-03-12';
  var dateString = moment(dob).format('DD MMMM YYYY');

  var source = $('#sample-template').html();
  var template = Handlebars.compile(source);
  $('#output').html(template({dob: dateString}));
</script>

Fiddle.（编辑：错误的链接。已修复。）

Answer 2

<tr>
  <th>Date of Birth: </th>
  <td class="tdDOB">{{dob}}</td>
</tr>

这将有效

var dob = new Date($('td.tdDOB').val());
var dobArr = dob.toDateString().split(' ');
var dobFormat = dobArr[2] + ' ' + dobArr[1] + ' ' + dobArr[3];
$('td.tdDOB').val(dobFormat);

Answer 3

<span class="getdate" style="display:none;">2012-03-12</span>
<table>
  <tr>
    <th>Date of Birth: </th>
    <td class="dateofbirth"></td>
 </tr> 
</table>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script type="text/javascript">
 $("document").ready(function(){
  var dob = $('.getdate:hidden').text();
  var dateString = moment(dob).format('DD MMMM YYYY');
  $('.dateofbirth').html(dateString);
 }) 
 </script>

你必须将你的变量放在任何div或span中，然后使用javascript中的描述获取该值，然后使用moment.js进行格式化，然后使用jquery将该变量放入所需的td。

在这种情况下，您可以将您的变量放在span中，然后使用jquery获取该值，然后我按照您的要求格式化，然后我将该值放在td中.html

如何从HTML中的表调用javascript函数

3 个答案: