Jump to content

CSS for matching the Date Format for the Blog

Recommended Posts

  • Replies 10
  • Views 1.4k
  • Created
  • Last Reply
On 4/30/2021 at 3:19 AM, dlthdus0817 said:

Site URL: http://revelucent.com

Hi,

I want to match the Date Format with the Blog list page and the Blog page.

Blog list page has the date with MM/DD/YY. But on the blog page, the date is showing as April DD. 

Is there any Custom Code for matching the date format as MM/DD/YY for both pages?

Thank you so much!

738136006_ScreenShot2021-04-29at4_17_08PM.thumb.png.120fd53481ad9c491185e2f2bfb6b552.png

 

 

2042794979_ScreenShot2021-04-29at4_17_14PM.png.98f259dc2bfb43741175031bcd8bbbf2.png

You will need custom javascript for that, check the solution I already provided

Blog collection page - move metadata to bottom + reformat date (7.1) - Coding and Customization - Squarespace Forum

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 4/30/2021 at 8:07 PM, bangank36 said:

You will need custom javascript for that, check the solution I already provided

Blog collection page - move metadata to bottom + reformat date (7.1) - Coding and Customization - Squarespace Forum

Hi, the date format has been updated successfully by using your css.

But, for some reason, the date on blog list and the blog post is different. 

There is one date gap between two pages.

Do you know why it happens?

Thank you so much for your help!

885144513_ScreenShot2021-05-03at10_38_47AM.thumb.png.0e719aa1d65036a8e961266795682254.png

 

 

1240516962_ScreenShot2021-05-03at10_38_37AM.thumb.png.ac155eabdb0156128e2fb0c39318aecb.png

Link to comment
46 minutes ago, dlthdus0817 said:

Hi, the date format has been updated successfully by using your css.

But, for some reason, the date on blog list and the blog post is different. 

There is one date gap between two pages.

Do you know why it happens?

Thank you so much for your help!

885144513_ScreenShot2021-05-03at10_38_47AM.thumb.png.0e719aa1d65036a8e961266795682254.png

 

 

1240516962_ScreenShot2021-05-03at10_38_37AM.thumb.png.ac155eabdb0156128e2fb0c39318aecb.png

that's time zone issue, I thought I fixed it already, let me check again

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, dlthdus0817 said:

Hi, the date format has been updated successfully by using your css.

But, for some reason, the date on blog list and the blog post is different. 

There is one date gap between two pages.

Do you know why it happens?

Thank you so much for your help!

885144513_ScreenShot2021-05-03at10_38_47AM.thumb.png.0e719aa1d65036a8e961266795682254.png

 

 

1240516962_ScreenShot2021-05-03at10_38_37AM.thumb.png.ac155eabdb0156128e2fb0c39318aecb.png

Your script is slightly different, could you try this

<!-- Squarespace Forum 03-08-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var dateformat = "mmm/dd/yyyy";
      var pubdate = document.querySelectorAll("time[datetime], time[pubdate], time.blog-meta-item--date");
      for (var i = 0; i < pubdate.length; i++) {
          var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText);
          if ( pubdate[i].classList.contains('blog-meta-item--date') ) {
              d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]);
          }
          pubdate[i].innerHTML = d.format(dateformat); 
      }
  });


</script>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, bangank36 said:

Your script is slightly different, could you try this


<!-- Squarespace Forum 03-08-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      var dateformat = "mmm/dd/yyyy";
      var pubdate = document.querySelectorAll("time[datetime], time[pubdate], time.blog-meta-item--date");
      for (var i = 0; i < pubdate.length; i++) {
          var d = new Date(pubdate[i].getAttribute("datetime") || pubdate[i].innerText);
          if ( pubdate[i].classList.contains('blog-meta-item--date') ) {
              d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute("content").split("T")[0]);
          }
          pubdate[i].innerHTML = d.format(dateformat); 
      }
  });


</script>

 

Hi, thanks for the quick reply.

I changed the code, but still has the same issue.

Do you think it's because of the time zone? But how it has the different time date for the same blog post?

Link to comment
On 5/4/2021 at 12:44 AM, dlthdus0817 said:

Hi, thanks for the quick reply.

I changed the code, but still has the same issue.

Do you think it's because of the time zone? But how it has the different time date for the same blog post?

Timezone is root cause, that why I tried to remove the time in the date string before parsing it

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

 

image.png.9220c4a0b8c7a8ea0d5d73998d6a711d.pngimage.png.f8421dd60533c2882400f91ea0f57033.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 minutes ago, dlthdus0817 said:

How it can happen?

From my end, it still has the one date gap.

Is it the same post?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.