Change date format inside HTML with JavaScript

Question

I have the following code on a page:

<span class="release-date"><i class="fa fa-calendar"></i> 2014-11-16</span>

This 2014-11-16 is the date and is generated automatically by my CMS. I need to change this date. Basically I need to change the month to read differently because this site has an international audience. In the case above I want it to read like this: 2014-Nov-16.

I know this can be done using a RegEx, however, I have no idea how to write this RegEx as I am not good at them. Of course in my example above 11 = Nov, 12 would equal Dec and so on for each month.

You shouldn't use regex. Select the element and change it's text content. — Ram
– Ram, Commented Nov 17, 2014 at 1:00
I posted an answer but then realized maybe you don't want Javascript. Where are you trying to fix these dates? Client side or server side? And if it's server side, what language is the server written in? — mr rogers
– mr rogers, Commented Nov 17, 2014 at 1:09

Nabil Kadimi · Accepted Answer · 2014-11-17 01:16:47Z

2

Here's a snippets with jQuery and Moment.js that does what you want, I made format into a variable so you can play with is.

$('.release-date').each( function() {
  
  var format = "Do MMM YYYY";

  var $this = $( this );
  var old_date = $.trim($this.text());
  var new_date = moment(old_date , 'YYYY-MM-DD').format( format );

  $this.text($this.text().replace(old_date, new_date));
});

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span class="release-date"><i class="fa fa-calendar"></i> 2014-11-16</span>

answered Nov 17, 2014 at 1:16

Nabil Kadimi

10.5k2 gold badges56 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nabil Kadimi Over a year ago

@Lynda It supports locales as well

L84 Over a year ago

Interesting. How would I include locales if I wanted to the example above?

L84 · Accepted Answer · 2014-11-17 01:10:49Z

2

You can use the Javascript Date to save you some ugly regex

new Date("2014-11-16")
>> Sat Nov 15 2014 16:00:00 GMT-0800 (PST)
new Date("2014-11-16 PST")
>> Sun Nov 16 2014 00:00:00 GMT-0800 (PST)

Unless you add another library like momemt.js or something, you may need to add a little helper to get the month as a string. Something like:

function monthToString(month) {
  var months = [ 'Jan', 'Feb', ... , 'Dec' ];
  return months[month % months.length]
}

Then you can build the new date string like this

function convertDateString(dateFromCms) {
   var date = new Date(dateFromCms);
   return date.getFullYear() + "-" + monthToString(date.getMonth()) + "-" + date.getDate();
}

Or something along those lines. Check out the MDN for more about how Date works.

edited Nov 17, 2014 at 1:10

L84

46.5k59 gold badges183 silver badges260 bronze badges

answered Nov 17, 2014 at 1:07

mr rogers

3,2601 gold badge22 silver badges33 bronze badges

Comments

Ram · Accepted Answer · 2014-11-17 01:20:03Z

1

If you want to select the textNode of the span elements, you can iterate through their childNodes and filter the textNode:

[].forEach.call(document.querySelectorAll('.release-date'), function(el) {
    var n = el.childNodes, inputDate;

    for ( var i = n.length; i--; ) {
        if ( n[i].nodeType === 3 && n[i].nodeValue.trim().length ) {
              inputDate = n[i].nodeValue.trim();
              n[i].nodeValue = // modify the input date        
        }
    }
});

answered Nov 17, 2014 at 1:20

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

Weafs.py · Accepted Answer · 2014-11-17 01:26:41Z

1

You can do it this way:

Fiddle

var elem = document.getElementsByClassName('release-date')[0];
var text = elem.innerHTML;
var regex = /-(\d{1,2})-/m
var month = regex.exec(text);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec']

if (month[1]) {
    elem.innerHTML = text.replace(regex, "-" + months[parseInt(month[1], 10) - 1] + "-")
}

edited Nov 17, 2014 at 1:26

answered Nov 17, 2014 at 1:18

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

Comments

james emanon · Accepted Answer · 2014-11-17 01:40:07Z

1

This works too..

var months = {
  1: 'jan',
  2: 'feb',
  3: 'march',
  4: 'apr',
  5: 'may',
  6: 'june',
  7: 'july',
  8: 'aug',
  9: 'sep',
  10: 'oct',
  11: 'nov',
  12: 'dec'
};

var currentDate = "2014-11-16"; // your date string would go here. Note, I left the retrieval of it out. This is trivial w/ jQuery... $('.release-date').text();

var redrawnCurrentDate = currentDate.replace(/(\d{2})-(\d{2})$/,function(_,$1,$2){
    return months[$1] + "-" + $2;
});

$('.release-date').text(redrawnCurrentDate);

answered Nov 17, 2014 at 1:40

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

Collectives™ on Stack Overflow

Change date format inside HTML with JavaScript

5 Answers 5

2 Comments

Comments

Comments

Fiddle

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related