Fixing date & time format in HTML

Context of Question

Hi all, I'm building a Twitter clone. I'm using JavaScript to create & insert a new Tweet into the news feed.

After inserting the new Tweet into the news feed, I noticed the date & time format is different after refreshing the page. Examples below for reference:

Tweet after inserting into news feed & before refreshing the page

enter image description here

Tweet after refreshing the page

enter image description here

The Tweet in JSON format looks like this

  {
    "id": 56,
    "user": "admin",
    "content": "yes",
    "date": "Feb 07 2023, 12:26 AM",
    "likes": 0
  }

I'm using Django as the backend & the how a Tweet gets serialized is as follows:

def serialize(self):
        return {
            "id": self.id,
            "user": self.user.username,
            "content": self.content,
            "date": self.date.strftime("%b %d %Y, %I:%M %p"),
            "likes": self.likes
        }

Now, I'm not sure what's causing this mismatch of date & time format:

  • the serializer for the Tweet, or
  • how HTML handles the date & time format

Use the date filter to format a date in a Django template

The following format string should match the output of the one used in your JSON

  <small class="text-muted tweet-date">{{ tweet.date|date:"M d Y, h:i A" }}</small>
Back to Top