Question 222952 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Convert output of numbers to date format with jquery

I have following setup where the output-date is created by an ACF-field (Advanced Custom Fields plugin for WordPress). The date is then put into an array by my theme (Uncode) and outputted this way. I don’t want to mess into my theme files so is there a way to format the outputted date to the desired format with jQuery?

<div class="table-container">
    <div class="output-date">20220501</div>
    <div class="output-date">20230105</div>
    <div class="output-date">20190923</div>
    ... and so on
</div>

What I want as an output:

<div class="table-container">
    <div class="output-date">May 2022</div>
    <div class="output-date">January 2023</div>
    <div class="output-date">September 2019</div>
    ... and so on
</div>

So the months should come first and must be converted to letters instead of numbers. The days can be removed.
Is there a way to do this in jQuery?

What I tried:

$(".output-date").html(function (index, html) {
      return html.slice(0, html.length - 2) + '<span class="hide-date-part">' + html.slice(html.length - 2) + '</span>';
});

.hide-date-part {
    display: none;
}

This removes the days, but if there is a better way.

Tags:

3

Answers


  1. 0

    Well isn’t this a classic for chatGPT. Nevertheless, here’s my solution

    function formatDate(inputDate) {
  const year = inputDate.substring(0, 4);
  const month = inputDate.substring(4, 6);
  const day = inputDate.substring(6, 8);

  // my solution
  const months = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec'.split(',');
  return months[+month - 1] + ' ' + year
}

function formatElems(selector) {
  document.querySelectorAll(selector).forEach(function(boo) {
    const inputDate = boo.innerText;
    const formattedDate = formatDate(inputDate);
    boo.innerText = formattedDate
  })
}

formatElems('.output-date');
    <div class="table-container">
  <div class="output-date">20220501</div>
  <div class="output-date">20230105</div>
  <div class="output-date">20190923</div>
  ... and so on
</div>
    Login or Signup to reply.
  2. 0

    You can use regular expression to parse the string date into a Date object and the INTL library to format the date the way you would like – in this case, a full month name and year:

    $(".output-date").html(function (index, html) {
    let dateSplit = html.trim().match(/^(d{4})(d{2})(d{2})$/);
    let date = new Date(dateSplit[1], dateSplit[2]-1, dateSplit[3]);
    let formatter = new Intl.DateTimeFormat("en-US", {year: "numeric", month: "long"});
    return formatter.format(date);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-container">
    <div class="output-date">20220501</div>
    <div class="output-date">20230105</div>
    <div class="output-date">20190923</div>
</div>
    Login or Signup to reply.
  3. 0

    The easiest way for date time conversion in a JS file is to use moment library.

    You can use the moment with jQuery like this :

    $("div.output-date").each(function () {        
   let date_in_number = Number($(this).html());
   $(this).html(moment(date_in_number.toString(),"YYYYMMDD").format('MMMM, YYYY'));
});

    You can try moment() in browser’s console of moment’s official website https://momentjs.com/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search