I'm new to Javascript and HTML. Now, I'm using HTML to display a time retrieved from XML file. Below is the HTML tags.
<tr>
<th>Date of Birth: </th>
<td>{{dob}}</td>
</tr>
This will display the date in yyyy-mm-dd .i.e date will be displayed as 2012-03-12 I want this to be displayed as 12 Mar 2013. I used moment.min.js but was not successfull. I don't know how to call a javascript function from tags and get the date displayed accordingly.
<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>
However, if you want to use the {{variable}} bracket syntax for inserting values into your HTML, you can use a JavaScript templating library like Handlebars.
Here's an example:
<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. (Edit: Wrong link. Fixed.)
var dob with the date from {{dob}}{{dob}} is a string in your html. There is no way for var dob to "get the date from {{dob}}". The string {{dob}}, in my example, is a placeholder for a value that the Handlebars templating engine will later supply.<tr>
<th>Date of Birth: </th>
<td class="tdDOB">{{dob}}</td>
</tr>
This will work
var dob = new Date($('td.tdDOB').val());
var dobArr = dob.toDateString().split(' ');
var dobFormat = dobArr[2] + ' ' + dobArr[1] + ' ' + dobArr[3];
$('td.tdDOB').val(dobFormat);
<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>
You have to put your variable in any div or span and then get that value by using as described in the javascript and then use moment.js to format as you want and then put that variable in to the desired td with jquery.
As in this case you can put your variable in the span and then get that value with jquery and then i formatted that as you want then i am putting that value in the td with .html
