[FreeShare] Date display format options on all pages

I don't understand what is going on.

I used bangank36's code to make my blog post dates display as dd mmmm yyyy (20 October 2022). That worked fine, but the dates were still 20/10/22 etc on the blog listing page.

I thought I would try some suggestions from this great thread, but when I changed the site language format from English (Australia) to English (US) the code stopped working entirely, and changing the language back has not fixed it! Also doesn't work with English (UK).

The date display settings on Squarespace seem completely inconsistent and illogical, but I would love any help at all in getting back to dd mmmm yyyy on my blog post pages, at least.

https://www.adamrosser.com.au/articles 

6 minutes ago, AdamR said:

...

I used bangank36's code to make my blog post dates display as dd mmmm yyyy (20 October 2022). That worked fine, but the dates were still 20/10/22 etc on the blog listing page.

I thought I would try some suggestions from this great thread, but when I changed the site language format from English (Australia) to English (US) the code stopped working entirely, and changing the language back has not fixed it! Also doesn't work with English (UK).

...

https://www.adamrosser.com.au/articles 

 

Now it is working again, for no obvious reason. I just cut and pasted exactly the same code snippet into the same place and saved again!

Of course, the blog listing page still has the inconsistent date format, so any help with that would be appreciated.

The date on your site is set with no another attribute so we can not define what is the date

For example: 21/8/22. In your site it will display with dd/mm/yy. On other site, it may have different format, so we need to fix it on each specific case

Thanks BaNgan. Thanks for pointing that out. I now realise that the date was showing as the secondary meta-data. When I changed it to primary, the inspector now shows:

<time class="blog-date" pubdate="" data-animation-role="date">14/10/22</time>

I tried adding time.blog-date to your code injection, but that has not changed the page. I assume that is because the date format is different or it is not referencing pubdate or something like that.

Any ideas? 

14 hours ago, AdamR said:

Thanks BaNgan. Thanks for pointing that out. I now realise that the date was showing as the secondary meta-data. When I changed it to primary, the inspector now shows:

<time class="blog-date" pubdate="" data-animation-role="date">14/10/22</time>

I tried adding time.blog-date to your code injection, but that has not changed the page. I assume that is because the date format is different or it is not referencing pubdate or something like that.

Any ideas? 

You can use this additional code:

<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
  (function(){
    document.addEventListener('DOMContentLoaded', function() {
      const outputDateFormat = "DD MMMM YYYY";
      const inputDateFormat = "D/M/YY"
      const pubdates = document.querySelectorAll(".blog-basic-grid.collection-content-wrapper time[pubdate]");
      pubdates.forEach(pubDate => {
        d = moment(pubDate.innerText,inputDateFormat);
        pubDate.innerHTML = d.format(outputDateFormat); 
      });
    })
  })()
</script>

My testing

On 10/22/2022 at 11:47 AM, bangank36 said:

My testing

Thanks, it is working perfectly for me now too. You are a legend.

Things have gotten weird again.

Today's post shows "Invalid date" when using bangank36's additional code. When I disable that code, the old dates revert to the expected style, but the new one appears correctly!

What gives!? Has Squarespace changed something - surely they should all be the same.

40 minutes ago, AdamR said:

Things have gotten weird again.

Today's post shows "Invalid date" when using bangank36's additional code. When I disable that code, the old dates revert to the expected style, but the new one appears correctly!

What gives!? Has Squarespace changed something - surely they should all be the same.

 

 

I will check it soon

Hello everyone.

I have set up this multilanguage site www.ojala.mx

The code shared here works perfect with one laguage page, but, in the case of two languages I am not having the same great results, I have tried all the codes here, change them and put it in differentes areas of the site, but nothing  has happen, it is possible, just in the blog page for Spanish, and home page of Spanish that have a summary block have the months and dates of this page configured separately of the entire site? I mean translate the months to spanish in the blog 

As you can imagine set up the language and region affects one of the sites.

I am working in 2 home page for each language

www.ojala.mx/es/espanol

www.ojala.mx/en/english

this is the main page of the blog

www.ojala.mx/en/ojala-en

www.ojala.mx/es/ojala-es

Any help will be apretiated.

Hey there, 

My intention is to change the date format to something like "13 Mar 2022" so I used the two code injections from the thread already shared in the thread by @Beyondspace.

I used dateformat = "dd mmm yyyy" and it kinda worked. I get the "invalid date" that @AdamR has, but appears to have fixed? 

Our blog is here:

www.yshousing.org.au/blog

I saw some others in the thread had similar troubles? 

I am based in Australia and Squarespace is set to that location. We use day-month-year.

I understand it could be related to that? Any anyone been able to solve it?

Thanks for @Beyondspace and @AdamR and others for any suggestions you can make

Thanks!

Oscar

++

First code I used:

<!-- Fix inconsistent blog date format on Squarespace 7.1 template -->
<!-- Squarespace Forum Update 06-11-2021 -->
<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
        (function(){
        document.addEventListener('DOMContentLoaded', function() {
            const dateformat = "dd mmm yyyy";
            const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date");
            pubdates.forEach(pubDate => {
                let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText);
                if (pubDate.classList.contains('blog-meta-item--date') ) {
                    d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]);
                }
                pubDate.innerHTML = d.format(dateformat); 
            });
        });
    })();
</script>

Second code I used

<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
  (function(){
    document.addEventListener('DOMContentLoaded', function() {
      const outputDateFormat = "DD MMMM YYYY";
      const inputDateFormat = "D/M/YY"
      const pubdates = document.querySelectorAll(".blog-basic-grid.collection-content-wrapper time[pubdate]");
      pubdates.forEach(pubDate => {
        d = moment(pubDate.innerText,inputDateFormat);
        pubDate.innerHTML = d.format(outputDateFormat); 
      });
    })
  })()
</script>

@ocam The issue you are facing is due to date format you are using. If you are working with US date format change following line:

const outputDateFormat = "DD MMMM YYYY";
const inputDateFormat = "D/M/YY"

into 

<script src="https://momentjs.com/downloads/moment.js"></script>
<script>
  (function(){
    document.addEventListener('DOMContentLoaded', function() {
      const outputDateFormat = "MMMM DD YYYY";
      const inputDateFormat = "M/D/YY"
      const pubdates = document.querySelectorAll(".blog-basic-grid.collection-content-wrapper time[pubdate]");
      pubdates.forEach(pubDate => {
        d = moment(pubDate.innerText,inputDateFormat);
        pubDate.innerHTML = d.format(outputDateFormat); 
      });
    })
  })()
</script>

Hope this help!

On 6/14/2022 at 7:50 AM, arogers said:

I've used the code on my workplace's blog and I'm running into the same problem several other people have described. The date showing is one day off. So if the post was posted on the 13th, it will show the 12th. We are using the mm-dd-yyyy format.

https://blog.1000bulbs.com/

Hello, I had the same problem I resolve it with this code :

<script src="https://stevenlevithan.com/assets/misc/date.format.js"></script>
<script>
        (function(){
        document.addEventListener('DOMContentLoaded', function() {
            const dateformat = "dd-mm-yyyy";
            const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date");
            pubdates.forEach(pubDate => {
                let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText);
                if (pubDate.classList.contains('blog-meta-item--date') ) {
                    d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]);
                }
                const formattedDate = new Date(d.setDate(d.getDate() + 1)).toLocaleDateString('es-MX');
pubDate.innerHTML = formattedDate;
 
            });
        });
    })();
</script>

I just add + or - to the days from the date, and that work it.

Any other improve will be apreciate it
thanks!

I think the root cause of this is because the conversion between your website timezone and the UTC , I will take a closer look and propose an update.

Could you provide your site URL so I can check it?

cc: @mazmac @ocam

1 minute ago, Beyondspace said:

I think the root cause of this is because the conversion between your website timezone and the UTC , I will take a closer look and propose an update.

cc: @mazmac @ocam

The website I use this is www.ojala.mx, just works perfect in summary blocks, all the pages I have are blank pages with summary blocks. In the main blog page or cover page, sometimes appear the legend error

Just now, mazmac said:

The website I use this is www.ojala.mx, just works perfect in summary blocks, all the pages I have are blank pages with summary blocks. In the main blog page or cover page, sometimes appear the legend error

Could you show the legend error if you found them?

On 6/14/2022 at 7:50 PM, arogers said:

I've used the code on my workplace's blog and I'm running into the same problem several other people have described. The date showing is one day off. So if the post was posted on the 13th, it will show the 12th. We are using the mm-dd-yyyy format.

https://blog.1000bulbs.com/

I checked your site and the date seems to be correct, could you point me the incorrect items?

https://www.ojala.mx/es/ojala-es/

You can check the legend in the blog invalid date, but is the main page of the blog, when a summary block show the posts looks fine. But check the link you will se the error

Found it 

Yes, but only in the main blog page. I wonder if the summary block just fix it when it takes the info.
the point was to give solution to the day off, so is I just add +1 or -x days to the code I put in the previous post

Javascript tried to parsed this date '28/04/23', I think it mismatch the date/month order, and returned an invalid value, will need to find a more consistent way

Yes, it start with the XX digits in the days, and as my site is bilingual, maybe cause also some problems there. Foor now works as i am using just summary blocks to avoid the INVALID DATE legend

CALL FOR TESTING 🤩

The Beyondspace date-format snippet has been upgraded, please replace your given snippet with the new one from this URL below

 🌍  Live editor

🌍 outputFormat supports different kinds of format based on the date string token

- MM/DD/YYYY

- DD/MM/YYYY

- MMM D, YYYY

 🌍 Multilingual website is supported out of the box, check for the support locales value here, for example

- www.ojala.mx/es/espanol

- www.ojala.mx/en/english

- www.ojala.mx/en/ojala-en

- www.ojala.mx/es/ojala-es

 🌍  Only those date format can support locales. For example instead putting `MM/DD/YYYY`, place `LLL` so it can be auto-converted into different languages

 🌍  Weglot website is not supported as Weglot has its own mechanism for date time localization, for example

cc: @mazmac @ocam @yshahi @AdamR @JoelleM @ChiroUp @g-souza @Creatingspaces

On 5/12/2023 at 9:04 AM, Beyondspace said:

CALL FOR TESTING 🤩

The Beyondspace date-format snippet has been upgraded, please replace your given snippet with the new one from this URL below

I used the MMMM DD, YYYY format and it worked on the first try. Very nice!

On 5/16/2023 at 7:00 AM, BobRockefeller said:

I used the MMMM DD, YYYY format and it worked on the first try. Very nice!

It worked, but now my resume blocks have the SPANISH month, instead of the number, that resolves all, bur work fine with both blogs!