1

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.

user3004356
  • 870
  • 4
  • 16
  • 49
  • 3
    What was wrong with the answers you got [here](http://stackoverflow.com/questions/20438352/how-to-convert-date-to-words-in-html/20438524#20438524)? – tewathia Dec 07 '13 at 09:54
  • @tewathia Nothing worked...no one replied when I asked them again. Can you tell me how to call a function inside tags and get the return value substituted inside the tag. I'm still new to Javascript – user3004356 Dec 07 '13 at 09:57
  • Take a look at my answer on this page(or the one on that page, they're more or less identical), it ought to fix your problem – tewathia Dec 07 '13 at 09:58

3 Answers3

2
<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.

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.)

Jackson
  • 9,188
  • 6
  • 52
  • 77
  • The table is inside script so the above code is not getting executed. How can i go about this. – user3004356 Dec 07 '13 at 10:14
  • "is not getting executed"? For which block of code that I posted, the first or second? Please clarify. Also, are you getting any console error messages? (Click F12 and look for a Console tab in the box that pops up and see if there are any errors there.) – Jackson Dec 07 '13 at 10:19
  • But, you have hardcoded the date. That gets displayed. How will I substitute the `var dob` with the date from {{dob}} – user3004356 Dec 07 '13 at 10:20
  • `{{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. – Jackson Dec 07 '13 at 10:24
  • CAn you tell me what I should do for this – user3004356 Dec 07 '13 at 10:24
  • And yes, I hardcoded `var dob = '2012-03-12';` because I do not know how you are getting your data from your XML file. I supposed you had that covered. – Jackson Dec 07 '13 at 10:25
  • Jackson, I see it is only {{dob}}. This gets value substituted with the date from XML. – user3004356 Dec 07 '13 at 10:27
  • I'm sorry that this conversation has become prolonged, but I am very confused. I do not understand what your current problem is. You need to be very explicit in your wording. – Jackson Dec 07 '13 at 10:30
  • Jackson, now the data inside tags are substituted by {{dob}}. Now, when I call your script , I want the data which is got from {{dob}} to be passed to the javascript function you have written – user3004356 Dec 07 '13 at 10:32
  • Instead of the hardcoded value, the value present in between the tags should be given – user3004356 Dec 07 '13 at 10:34
  • Oh, okay. Let me cook that up. – Jackson Dec 07 '13 at 10:35
  • Man, regexes are insanely hard to write at 3AM. Okay, here it is: What I've basically done is reverse-engineer the templating system with a regex. I don't know why you'd want to do this, but I would not be able to sleep without answering your question. http://jsfiddle.net/nJ2YY/2/ – Jackson Dec 07 '13 at 11:05
0
<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);
tewathia
  • 6,890
  • 3
  • 22
  • 27
0
<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

ramchauhan
  • 228
  • 2
  • 6