CODEWITHSUNDEEP
javascriptdateblogger
Biyans
Biyans

Reputation: 63

Format Post Date and Add Class

I have a date format in the following output that I get from Blogger:

<time class="published">14 March</time>

I would like to change its format, without modifying the output, to be something like this:

<time class="published"><span class="day">14</span><span class="month">Mar</span></time>

Does anyone have any suggestions?

Upvotes: 1

Views: 2463

Answers (1)

Prayag Verma
Prayag Verma

Reputation: 5651

Update

As you are using the new themes, the procedure for changing the date format timestamp varies a bit. Add the following b:includable into the b:widget to which you want to change the timestamp -

<b:includable id='postTimestamp'>
  <span class='byline post-timestamp'>
    <data:byline.label />
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url.canonical' />
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
        <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>
          <b:eval expr='data:post.date format "dd MMM" '/>
        </time>
      </a>
    </b:if>
  </span>
</b:includable>

As you will notice, the format of the date is changed via the newly introduced format operator. For detailed documentation about the format operator -

format(date, format)

Formats the given date to the given format string, using the blog's selected language.

date: Date to be formatted, e.g. data:post.date

format: ICU format string for the date to be formatted to, in the blog's language. e.g. "MMM dd". 

<b:eval expr='data:post.date format "MMM dd" ' />

There is currently no official documentation new themes, I referred to a Blogger engineer's blog for this information.

To achieve this, the date will have to be manipulated via JavaScript. In the theme code, you will see the code like -

<time class="published"><data:post.timestamp/></time>

Replace it with -

<time class="published"><script>dateconvert(new Date(&#39;<data:post.timestamp/>&#39;));</script></time>

And define the dateconvert function inside the </head> block -

<script>
   function dateconvert(date) {
    document.write("<span class='day'>" + date.getDate() + "</span> <span class='month'>" + date.toLocaleString("en-us", {month: "short"}) + '</span>')
  }
</script>

Upvotes: 3

Related Questions