Beyondspace Posted November 6, 2021 Share Posted November 6, 2021 (edited) [16-May-2023] Update The script has been updated, find the new solution here Hi guys, Understanding the requirement to set consistently format date on all pages of website , I would like to share my solution to you . 1. Add the following codes to Home > Settings > Advanced > Code Injection <!-- 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-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]); } pubDate.innerHTML = d.format(dateformat); }); }); })(); </script> 2. Change the 'dateformat' in my previous code with the date format you want to apply. Ex: dd-mm-yyy, mmm-dd-yyyy,... Hope that it can help your sites properly Let me know if you have any issue that needs to be solved. Support me by pressing 👍 if this useful for you Edited May 16 by Beyondspace Better result KazzaT, sayreambrosio, Soren_90 and 1 other 2 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Yadi Posted November 26, 2021 Share Posted November 26, 2021 Hi, it is not working on my page. would love to change the blog list page date format on my site. but after injecting the code above, nothing changed. Can you please help me? Beyondspace 1 Link to comment
tuanphan Posted November 28, 2021 Share Posted November 28, 2021 On 11/26/2021 at 10:55 PM, Yadi said: Hi, it is not working on my page. would love to change the blog list page date format on my site. but after injecting the code above, nothing changed. Can you please help me? You share link to blog list page, we can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Beyondspace Posted November 29, 2021 Author Share Posted November 29, 2021 On 11/26/2021 at 10:55 PM, Yadi said: Hi, it is not working on my page. would love to change the blog list page date format on my site. but after injecting the code above, nothing changed. Can you please help me? Hi @Yadi, Can you share your site with the protected password for us to take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Yadi Posted December 15, 2021 Share Posted December 15, 2021 On 11/29/2021 at 3:50 PM, bangank36 said: Hi @Yadi, Can you share your site with the protected password for us to take a look? https://diaryofanintrovertng.com/ Link to comment
Beyondspace Posted December 25, 2021 Author Share Posted December 25, 2021 On 12/16/2021 at 12:30 AM, Yadi said: https://diaryofanintrovertng.com/ Problem solved BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Glenn Hubbers Posted December 31, 2021 Share Posted December 31, 2021 I tried this on my site. While it does change the format (I prefer yyyy-mm-dd) the date on the index is one day off of the date on the blog post. Example: on the blog index I have a post with the date 2019-12-31 and when you click that post it comes up with the day 2019-12-30 Beyondspace 1 Link to comment
Beyondspace Posted December 31, 2021 Author Share Posted December 31, 2021 3 hours ago, Glenn Hubbers said: I tried this on my site. While it does change the format (I prefer yyyy-mm-dd) the date on the index is one day off of the date on the blog post. Example: on the blog index I have a post with the date 2019-12-31 and when you click that post it comes up with the day 2019-12-30 Can you share your site with the protected password so we can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
Glenn Hubbers Posted January 2, 2022 Share Posted January 2, 2022 I don't understand how I could share my site and password such that the world can't see it. Please advise. Link to comment
creedon Posted January 2, 2022 Share Posted January 2, 2022 @Glenn Hubbers Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Beyondspace Posted January 4, 2022 Author Share Posted January 4, 2022 (edited) On 1/2/2022 at 11:00 PM, Glenn Hubbers said: I don't understand how I could share my site and password such that the world can't see it. Please advise. Have you solved it yet? Do you still need help? Edited January 4, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
staceykaitlin Posted January 15, 2022 Share Posted January 15, 2022 I'm working on a website for a client who would like the dates on her blog page and each individual blog post to show as DD Month YYYY (i.e. 15th January 2022), is this possible with this code injection? Link to comment
Beyondspace Posted January 15, 2022 Author Share Posted January 15, 2022 (edited) 11 hours ago, staceykaitlin said: I'm working on a website for a client who would like the dates on her blog page and each individual blog post to show as DD Month YYYY (i.e. 15th January 2022), is this possible with this code injection? Yes, this code can be applied to the blog page and individual blog post. Kindly change the format in my blog with const dateformat = "dd-mmm-yyyy"; Let me know how it works on your site Edited January 15, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
markusthorsen Posted January 27, 2022 Share Posted January 27, 2022 Hello Thanks to tuanphan and bangank36 I've managed to finally have a "norwegian" setup for an event page. With norwegain names for days and months, norwegian order of things like 27 januar 2022 and lastly have the clock in bloody 24hr format. I'll paste the code I've stitched together from both of them below, so hopefully people should be able to grab that and change the days/months to their own language. I don't understand half of this code, so if it doesnt work for you "as pasted" I won't be able to help any further. As I said this is all tuanphan and bangank36's magic work 👌Thank you so so much!! <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> const translate = { Jan: "jan", Feb: "feb", Mar: "mar", Apr: "apr", May: "mai", Jun: "jun", Jul: "jul", Aug: "aug", Sep: "sep", Oct: "okt", Nov: "nov", Dec: "des" } const translate1 = { January: "januar", February: "februar", March: "mars", April: "april", May: "mai", June: "juni", July: "juli", August: "august", September: "september", October: "oktober", November: "november", December: "desember" } const day = { Monday: "Mandag", Tuesday: "Tirsdag", Wednesday: "Onsdag", Thursday: "Torsdag", Friday: "Fredag", Saturday: "Lørdag", Sunday: "Søndag" } $(document).ready(function() { $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) { const text = $(e).html() $(e).html(translate[text]) }) $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) { let text = $(e).html() for(let key in translate1) { text = text.replace(key, translate1[key]) } for(let key in day) { text = text.replace(key, day[key]) } console.log(text) $(e).html(text) }) }) </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(function($){ $(".eventitem-backlink").html(function() { return $(this).html().replace("Back to All Events", "Tilbake"); }); }); </script> <!-- Fix inconsistent blog + event date format on Squarespace 7.1 template --> <!-- Squarespace Forum 03-08-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var dateformat = "d mmmm yyyy"; var timeformat = "H:MM"; var pubdate = document.querySelectorAll("time[datetime]:not([class*=event-time]), 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]).getAttribute("content"); } pubdate[i].innerHTML = d.format(dateformat); } var eventTime = document.querySelectorAll("time[datetime][class*=event-time]"); for (var i = 0; i < eventTime.length; i++) { console.log(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText); var d = new Date(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText); eventTime[i].innerHTML = d.format(timeformat); } var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time"); for (var i = 0; i < eventTimeSummary.length; i++) { var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr"); var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr"); _12hrs.innerHTML = _24hrs.innerHTML; } }); </script> Beyondspace 1 Link to comment
markusthorsen Posted January 27, 2022 Share Posted January 27, 2022 Well, that didn't take long 😉 hehe... I just realised I was missing a few more pieces to complete to ultimate setup. Maybe somebody has figured this out already! As you can see on this page https://fjordcadenza.squarespace.com/konserter/iiro-rantala-new-trio (password: fjordcadenza) I have a little writeup, title, date and time. But my client also wants tags, categories and I'm playing around with the idea of having "source" be "buy tickets" or something. But how do I change "Source" to say "Kjøp billetter", "Posted in" to say "Sjanger" and "Tagged" to say "Tags"? I can imagine it being similar to the code(provided by tuanphan) that made me able to change English months to Norwegian months etc, but I have no idea how to recreate that for these 3 specific things. Anybody have some suggestions? All that aside, I feel like the event module in SQ is super limited and almost more hassle than reward, but oh well 🤷🏼♂️ 57 minutes ago, markusthorsen said: Hello Thanks to tuanphan and bangank36 I've managed to finally have a "norwegian" setup for an event page. With norwegain names for days and months, norwegian order of things like 27 januar 2022 and lastly have the clock in bloody 24hr format. I'll paste the code I've stitched together from both of them below, so hopefully people should be able to grab that and change the days/months to their own language. I don't understand half of this code, so if it doesnt work for you "as pasted" I won't be able to help any further. As I said this is all tuanphan and bangank36's magic work 👌Thank you so so much!! <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> const translate = { Jan: "jan", Feb: "feb", Mar: "mar", Apr: "apr", May: "mai", Jun: "jun", Jul: "jul", Aug: "aug", Sep: "sep", Oct: "okt", Nov: "nov", Dec: "des" } const translate1 = { January: "januar", February: "februar", March: "mars", April: "april", May: "mai", June: "juni", July: "juli", August: "august", September: "september", October: "oktober", November: "november", December: "desember" } const day = { Monday: "Mandag", Tuesday: "Tirsdag", Wednesday: "Onsdag", Thursday: "Torsdag", Friday: "Fredag", Saturday: "Lørdag", Sunday: "Søndag" } $(document).ready(function() { $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) { const text = $(e).html() $(e).html(translate[text]) }) $('[class*="-month"], time.event-date, .events-item-pagination-date').each(function(i, e) { let text = $(e).html() for(let key in translate1) { text = text.replace(key, translate1[key]) } for(let key in day) { text = text.replace(key, day[key]) } console.log(text) $(e).html(text) }) }) </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> jQuery(function($){ $(".eventitem-backlink").html(function() { return $(this).html().replace("Back to All Events", "Tilbake"); }); }); </script> <!-- Fix inconsistent blog + event date format on Squarespace 7.1 template --> <!-- Squarespace Forum 03-08-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var dateformat = "d mmmm yyyy"; var timeformat = "H:MM"; var pubdate = document.querySelectorAll("time[datetime]:not([class*=event-time]), 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]).getAttribute("content"); } pubdate[i].innerHTML = d.format(dateformat); } var eventTime = document.querySelectorAll("time[datetime][class*=event-time]"); for (var i = 0; i < eventTime.length; i++) { console.log(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText); var d = new Date(eventTime[i].getAttribute("datetime") + " " + eventTime[i].innerText); eventTime[i].innerHTML = d.format(timeformat); } var eventTimeSummary = document.querySelectorAll(".summary-metadata-item--event-time"); for (var i = 0; i < eventTimeSummary.length; i++) { var _24hrs = eventTimeSummary[i].querySelector(".event-time-24hr"); var _12hrs = eventTimeSummary[i].querySelector(".event-time-12hr"); _12hrs.innerHTML = _24hrs.innerHTML; } }); </script> Link to comment
Beyondspace Posted January 27, 2022 Author Share Posted January 27, 2022 12 hours ago, markusthorsen said: Well, that didn't take long 😉 hehe... I just realised I was missing a few more pieces to complete to ultimate setup. Maybe somebody has figured this out already! As you can see on this page https://fjordcadenza.squarespace.com/konserter/iiro-rantala-new-trio (password: fjordcadenza) I have a little writeup, title, date and time. But my client also wants tags, categories and I'm playing around with the idea of having "source" be "buy tickets" or something. But how do I change "Source" to say "Kjøp billetter", "Posted in" to say "Sjanger" and "Tagged" to say "Tags"? I can imagine it being similar to the code(provided by tuanphan) that made me able to change English months to Norwegian months etc, but I have no idea how to recreate that for these 3 specific things. Anybody have some suggestions? All that aside, I feel like the event module in SQ is super limited and almost more hassle than reward, but oh well 🤷🏼♂️ Do you mean changing the date format from English to Norwegian? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 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
markusthorsen Posted January 28, 2022 Share Posted January 28, 2022 No, Im all good regarding the date and time format. Everything is perfect! But if you check out the link you can see below my text it says "source", "posted in" and "tagged in". I was wondering if it was possible to change these to be "whatever I want", similar to the way I've managed to change Monday to Mandag and October to Oktober. I guess I need to find the ID or class name of "source", "posted in" and "tagged in" and target those with some code? But that's way above my league 😂 8 hours ago, bangank36 said: Do you mean changing the date format from English to Norwegian? Link to comment
markusthorsen Posted March 22, 2022 Share Posted March 22, 2022 Hi guys. I've just discovered a weird bug... I've used the same code as i provided above here, and as I said before everything was working perfectly. But now I've discovered that Safari ignores the 24hr clock thing, but Chrome for some reason still honours it. As you can see in the pics, the code is identical... Or at least as far as I can see... Any ideas on what is going on? Link to comment
creedon Posted March 22, 2022 Share Posted March 22, 2022 7 hours ago, markusthorsen said: I've discovered that Safari ignores the 24hr clock thing You'll love this. Apple's JavaScript implementation of the Date function in Safari ( perhaps only older versions ) is choking on the input date format i.e. 2022-03-22. If you replace the dashes with forward slashes Safari is happy. So basically your script is crashing out with an invalid date and doesn't make the 12 to 24 conversion. So one way to take care of the issue is something like '2022-03-22 12:00 AM'.replace ( /-/g, '/' ) before passing into the Date function. @bangank36 @tuanphan Beyondspace 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
JoelleM Posted April 4, 2022 Share Posted April 4, 2022 (edited) Thanks so much for this @bangank36. It seems to be partially working - though for some reason I have two posts on my blog page and it is changing only one of them?? https://together-learning-trust-new.squarespace.com/news-views Password: David123 Edited April 6, 2022 by JoelleM Beyondspace 1 Link to comment
JoelleM Posted April 15, 2022 Share Posted April 15, 2022 On 4/4/2022 at 4:51 PM, JoelleM said: Thanks so much for this @bangank36. It seems to be partially working - though for some reason I have two posts on my blog page and it is changing only one of them?? https://together-learning-trust-new.squarespace.com/news-views Password: David123 @bangank36 have any idea why this might only be affecting the date on one post? Link to comment
creedon Posted April 15, 2022 Share Posted April 15, 2022 32 minutes ago, JoelleM said: any idea why this might only be affecting the date on one post? The issue is that the date format generated by SS is in dd/mm/yyyy format and Date requires mm/dd/yyyy. This is on the input side. The code would need a few additional lines of code to work with dd/mm/yyyy dates. The output can of course be controlled by the dateformat constant. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
KYK9 Posted April 17, 2022 Share Posted April 17, 2022 (edited) I too am having trouble with the date format. I added your code in and it changed the format on the blog page but not the blog posts. I want to have mm-dd-yyyy. The page is https://www.kyk9.org/blog Also, how do I change the font on the date to match the rest of the page? I appreciate any help Edited April 17, 2022 by KYK9 spelling Link to comment
JoelleM Posted April 25, 2022 Share Posted April 25, 2022 (edited) On 4/15/2022 at 7:20 PM, creedon said: The issue is that the date format generated by SS is in dd/mm/yyyy format and Date requires mm/dd/yyyy. This is on the input side. The code would need a few additional lines of code to work with dd/mm/yyyy dates. The output can of course be controlled by the dateformat constant. Thank you @creedon, though despite by best efforts that's a bit beyond me! What extra lines would @bangank36's code require? It is working across the summary block and on individual posts. But on the blog page, only the most recent of the 4 posts appears in the corrected format. https://together-learning-trust-new.squarespace.com/news-views PW: David123 Edited April 25, 2022 by JoelleM Link to comment
ChiroUp Posted April 25, 2022 Share Posted April 25, 2022 On 11/6/2021 at 10:21 AM, bangank36 said: Site URL: https://forum.squarespace.com/topic/158057-date-display-format-options/?fbclid=IwAR3c-LN_AFmqlTWG6uPvXzXLV9TqUKihXMjjvyrHfLgn-0NEqg2yXnztUys#comment-447653 Hi guys, Understanding the requirement to set consistently format date on all pages of website , I would like to share my solution to you . 1. Add the following codes to Home > Settings > Advanced > Code Injection <!-- 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-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]); } pubDate.innerHTML = d.format(dateformat); }); }); })(); </script> 2. Change the 'dateformat' in my previous code with the date format you want to apply. Ex: dd-mm-yyy, mmm-dd-yyyy,... Hope that it can help your sites properly Let me know if you have any issue that needs to be solved. Support me by pressing 👍 if this useful for you Hi there, I tried using this code on my site: https://chiroup.com It worked however it's a day off on each publication date if you look at the blog post and then on the blog home page. The dates don't match. They are off by one day. Please help. tonyflores 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment