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

Use JQuery to format date in a paragraph to a different format

I have a page with blog posts on so I can’t adjust the output (no access to server-side code) but I want the date in Nov 4, 2022 format.

The HTML looks like this:

<span class="post-time">
  <p>04/11/2022</p>
</span>

I know my date format is MMM D, YYYY but I cannot seem to get the code to output anything.

I have tried the following codes and can’t seem to figure out how to get the new date to output:

$(document).ready(function() {
  // Variation 1:
  var post_date = $(".post-time1 p").text().format('MMM D, YYYY');
  $(".new-date p").text(post_date);

  // Variation 2:
  $(".new-date").val($(".post-time2 p").formatDate('MMM D, YYYY', new Date()));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<span class="post-time1">
  <p>04/11/2022</p>
</span>
<span class="post-time2">
  <p>04/11/2022</p>
</span>
Tags:

2

Answers


  1. 0

    Here is a possible solution for your query.

    Hopefully it can help you.

    $(document).ready(function() {
  const time = new Date();
  const options = { month: 'short', day: 'numeric', year: 'numeric' };
  const formattedDate = time.toLocaleDateString('en-US', options);
  $(".post-time p").text(formattedDate);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="post-time">
  <p></p>
</div>

    Result:

    enter image description here

    Login or Signup to reply.
  2. 0

    To achieve the desired date formatting, you’ll need to parse the existing date, format it in the desired way, and then update the target element. jQuery doesn’t have built-in methods for date formatting, but you can use plain JavaScript Date object methods or a library like Moment.js or Day.js.

    Here’s how you can do it using JavaScript without any additional libraries:

    HTML:

    <div class="post-time">
  <p>04/11/2022</p>
</div>
<div class="new-date">
  <p></p>
</div>

    jQuery Code:

    $(document).ready(function () {
  // Get the text from the .post-time p element
  var originalDate = $(".post-time p").text().trim();

  // Split the date into components
  var dateParts = originalDate.split("/"); // ["04", "11", "2022"]
  var day = parseInt(dateParts[0], 10); // 4
  var month = parseInt(dateParts[1], 10) - 1; // 10 (November, zero-indexed)
  var year = parseInt(dateParts[2], 10); // 2022

  // Create a new Date object
  var formattedDate = new Date(year, month, day);

  // Format the date to "MMM D, YYYY" (Nov 4, 2022)
  var options = { year: "numeric", month: "short", day: "numeric" };
  var newDate = formattedDate.toLocaleDateString("en-US", options);

  // Update the .new-date p element
  $(".new-date p").text(newDate);
});

    Explanation:

    1. Extracting the Original Date: Use .text() to get the date string and .trim() to remove any whitespace.
    2. Parsing the Date: The date is in DD/MM/YYYY format, so split it using /, then use Date(year, monthIndex, day) to construct a Date object (adjusting the month index as it’s zero-based).
    3. Formatting the Date: Use toLocaleDateString() with appropriate options to format the date.
    4. Updating the Target Element: Use .text() to update the content of .new-date p.

    Output:

    The .new-date p element will now contain Nov 4, 2022.

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

Back To Top
Search