Tenneil Posted April 16, 2020 Share Posted April 16, 2020 Site URL: https://www.likeneonlove.com/ Is there any code I can use that will change the date format of my blog posts? At the moment, my latest post reads "Apr 15", but I'd like it displayed as "15 April". I managed to change the format of my summary block using the below script, but I can't seem to get it working for my actual blog page. I'm using the Skye template. It's honestly infuriating that Squarespace STILL doesn't cater to its international customers. Having flexibility in changing date formats, US-based or not, should be a given for any website service! <script> // Changes the format of date on summary items var myObj = document.getElementsByClassName('summary-metadata-item--date'); var options = { year: 'numeric', month: 'long', day: 'numeric' }; for (var i = 0; i < myObj.length; ++i) { var item = myObj[i]; var date = new Date(item.innerHTML); item.innerHTML = date.toLocaleDateString('en-GB', options); } </script> LFyel101, nilsohman, Feliciahj and 1 other 4 Link to comment
Europeans Posted April 30, 2020 Share Posted April 30, 2020 I'm also having a problem with date formatting. The American date formatting looks jarring to our predominantly European viewers. Is there a fix coming, Squarespace? SKYW4KR, belindalong, LaurenMason and 6 others 9 Link to comment
lapislon Posted May 13, 2020 Share Posted May 13, 2020 Hi Tenneil, It seems you managed to change date as you wanted (I looked at your page and dates are in European format). Any chance you could share how you achieved that please? Link to comment
Romulusmap Posted May 18, 2020 Share Posted May 18, 2020 (edited) Hey guys, I've been looking for a solution to this problem myself and since I haven't found one, I've come up with my own. It's rather crude but should be efficient, when customized to your own template. Might change with time but just hit me and I'll try to help. Inject it into the header and change the classes (if needed) for it to work. It's working after the page loaded so you might get a split second flash of old dates. First code is for English users. Just switches order around. Second one is for international users. "//Changing blog grid view dates order." simply switches the display style from MM/DD/YYYY to DD/MM/YYYY. "//Changing blog detailed view dates." changes language to Polish (or any other if you substitute your own 🙂), as well as switches the order around. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> //Changing blog grid view dates order. $(document).ready(function() { $('time.blog-date').each(function(){ let dateArray = this.innerText.split("/"); let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2]; console.log(dateCompiled); this.innerText = dateCompiled; }); //Changing blog detailed view dates. $('time.blog-meta-item--date').each(function(){ this.innerText = this.innerText.split(" ")[1] + " " + this.innerText.split(" ")[0]; }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> //Changing blog grid view dates order. $(document).ready(function() { $('time.blog-date').each(function(){ let dateArray = this.innerText.split("/"); let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2]; console.log(dateCompiled); this.innerText = dateCompiled; }); //Changing blog detailed view dates. $('time.blog-meta-item--date').each(function(){ if (this.innerText.split(" ")[0] === 'Jan'){ this.innerText = this.innerText.split(" ")[1] + ' Stycznia'; } else if (this.innerText.split(" ")[0] === 'Feb') { this.innerText = this.innerText.split(" ")[1] + ' Lutego'; } else if (this.innerText.split(" ")[0] === 'Mar') { this.innerText = this.innerText.split(" ")[1] + ' Marca'; } else if (this.innerText.split(" ")[0] === 'Apr') { this.innerText = this.innerText.split(" ")[1] + ' Kwietnia'; } else if (this.innerText.split(" ")[0] === 'May') { this.innerText = this.innerText.split(" ")[1] + ' Maja'; } else if (this.innerText.split(" ")[0] === 'June') { this.innerText = this.innerText.split(" ")[1] + ' Czerwca'; } else if (this.innerText.split(" ")[0] === 'July') { this.innerText = this.innerText.split(" ")[1] + ' Lipca'; } else if (this.innerText.split(" ")[0] === 'Aug') { this.innerText = this.innerText.split(" ")[1] + ' Sierpnia'; } else if (this.innerText.split(" ")[0] === 'Sept') { this.innerText = this.innerText.split(" ")[1] + ' Września'; } else if (this.innerText.split(" ")[0] === 'Oct') { this.innerText = this.innerText.split(" ")[1] + ' Października'; } else if (this.innerText.split(" ")[0] === 'Nov') { this.innerText = this.innerText.split(" ")[1] + ' Listopada'; } else if (this.innerText.split(" ")[0] === 'Dec') { this.innerText = this.innerText.split(" ")[1] + ' Grudnia'; } }); }); </script> If anyone needs any help with their template, feel free to ask. I'll try to help. Thanks! Edited May 18, 2020 by Romulusmap Soren_90, E13 and Cirkular 1 2 Link to comment
katycarlisle Posted May 26, 2020 Share Posted May 26, 2020 I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks). ForgoneMiniatures, belindalong, ka00876 and 10 others 6 6 1 Oh hey! I'm Katy Carlisle, a web designer and trainer who goes by the name SQSP Queen. My pronouns are she/her and I'm based on Vancouver Island in BC 🍁 I've been using Squarespace since 2013, and work mainly with non-profits or freelancers on projects that do good. I love answering questions about Squarespace and don't expect anything in return, but if you do want to say thanks, feel free to buy me a coffee ☕ Link to comment
Cirkular Posted May 27, 2020 Share Posted May 27, 2020 Hi Romulusmap, I've injected your code into my website and it works perfectly. I even translated it to my own language (Romanian). One thing, though. The current date format is something like "27, Maja", but I'd like to change it to "27 Maja 2020" (so without the comma and with the added current year). Didn't manage to do that. Can you help? Link to comment
Syska Posted July 3, 2020 Share Posted July 3, 2020 On 5/18/2020 at 3:40 PM, Romulusmap said: Hey guys, I've been looking for a solution to this problem myself and since I haven't found one, I've come up with my own. It's rather crude but should be efficient, when customized to your own template. Might change with time but just hit me and I'll try to help. Inject it into the header and change the classes (if needed) for it to work. It's working after the page loaded so you might get a split second flash of old dates. First code is for English users. Just switches order around. Second one is for international users. "//Changing blog grid view dates order." simply switches the display style from MM/DD/YYYY to DD/MM/YYYY. "//Changing blog detailed view dates." changes language to Polish (or any other if you substitute your own 🙂), as well as switches the order around. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> //Changing blog grid view dates order. $(document).ready(function() { $('time.blog-date').each(function(){ let dateArray = this.innerText.split("/"); let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2]; console.log(dateCompiled); this.innerText = dateCompiled; }); //Changing blog detailed view dates. $('time.blog-meta-item--date').each(function(){ this.innerText = this.innerText.split(" ")[1] + " " + this.innerText.split(" ")[0]; }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> //Changing blog grid view dates order. $(document).ready(function() { $('time.blog-date').each(function(){ let dateArray = this.innerText.split("/"); let dateCompiled = dateArray[1] + "/" + dateArray[0] + "/" + dateArray[2]; console.log(dateCompiled); this.innerText = dateCompiled; }); //Changing blog detailed view dates. $('time.blog-meta-item--date').each(function(){ if (this.innerText.split(" ")[0] === 'Jan'){ this.innerText = this.innerText.split(" ")[1] + ' Stycznia'; } else if (this.innerText.split(" ")[0] === 'Feb') { this.innerText = this.innerText.split(" ")[1] + ' Lutego'; } else if (this.innerText.split(" ")[0] === 'Mar') { this.innerText = this.innerText.split(" ")[1] + ' Marca'; } else if (this.innerText.split(" ")[0] === 'Apr') { this.innerText = this.innerText.split(" ")[1] + ' Kwietnia'; } else if (this.innerText.split(" ")[0] === 'May') { this.innerText = this.innerText.split(" ")[1] + ' Maja'; } else if (this.innerText.split(" ")[0] === 'June') { this.innerText = this.innerText.split(" ")[1] + ' Czerwca'; } else if (this.innerText.split(" ")[0] === 'July') { this.innerText = this.innerText.split(" ")[1] + ' Lipca'; } else if (this.innerText.split(" ")[0] === 'Aug') { this.innerText = this.innerText.split(" ")[1] + ' Sierpnia'; } else if (this.innerText.split(" ")[0] === 'Sept') { this.innerText = this.innerText.split(" ")[1] + ' Września'; } else if (this.innerText.split(" ")[0] === 'Oct') { this.innerText = this.innerText.split(" ")[1] + ' Października'; } else if (this.innerText.split(" ")[0] === 'Nov') { this.innerText = this.innerText.split(" ")[1] + ' Listopada'; } else if (this.innerText.split(" ")[0] === 'Dec') { this.innerText = this.innerText.split(" ")[1] + ' Grudnia'; } }); }); </script> If anyone needs any help with their template, feel free to ask. I'll try to help. Thanks! Might there be anyway this will apply on events, as I have the same problem in my event listing. Thanks 🙂 Link to comment
Ledii Posted July 4, 2020 Share Posted July 4, 2020 (edited) Hi. The scripts above did not work for me. I figure this is due to differences in how templates handle the html. I tried to make it a bit more generic by using meta-data and common tags. Another huge upgrade is that I'm converting the strings to Date objects. That way you don't have to deal with manual if cases. And can choose to format to something localized based on context. (Only blog-post pages has a time signature though, not sure if this is a template fault or squarespace fault) Hopefully this will work for more templates. It needs to have two separate behaviours based on weather it is on a blog post page or not. As normal pages might have several dates to update. While a blog post has one that is handled a little differently. I made a shared function that handles the formatting at least. So they all should get the same formatted text and different elements get fed in. You may replace the steps inside the updateDateElement function with a format of your liking. 😃 <script> document.addEventListener("DOMContentLoaded", function(event) { //Figure out context (blog-post or not?) var dateMeta = document.querySelector('[itemprop=datePublished]'); if (dateMeta != null) { //Handle blog post date var publishedDate = new Date(dateMeta.content); var dateElem = document.querySelector('time span'); updateDateElement(dateElem, publishedDate); } else { //Handle all dates on page var times = document.querySelectorAll('time'); for (var i = 0; i < times.length; i++) { var dateElem = times[i]; var publishedDate = new Date(dateElem.innerHTML); updateDateElement(dateElem, publishedDate); } } }); function updateDateElement(elem, date) { //Construct new display string //If you want a different localization, you can change the 'en-US'. //You can also type in undefined insteath of 'en-US' and let the device choose. var dateFormat = { year: 'numeric', month: 'long', day: 'numeric' }; var newFormat = date.toLocaleDateString('en-US', dateFormat); //Assign new string elem.textContent = newFormat; } </script> I wanted to do mine in native js. Thought this might be slightly kinder on the load-time. But some neat formatting libraries I found along the way... https://github.com/datejs/Datejs https://momentjs.com/ https://www.npmjs.com/package/dateformat Edited July 4, 2020 by Ledii LFyel101 and Molotov 1 1 Link to comment
Cynneth Posted July 28, 2020 Share Posted July 28, 2020 On 5/26/2020 at 12:42 PM, thewheelexists said: I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks). That's exactly what I did and it worked instantly. Not sure why everyone is still talking a out complicated code 😆😆 Link to comment
MireyaGonzalez8 Posted February 14, 2021 Share Posted February 14, 2021 On 5/26/2020 at 12:42 PM, katycarlisle said: I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks). Thank you, I appreciate it. It worked instantly. No fuss! I'm in UK btw Link to comment
dovely Posted June 2, 2021 Share Posted June 2, 2021 @tuanphan Do you happen know how to fix the date formatting in the blog for the site link below? I appreciate your help. Thank you! https://www.ristudiodallas.com/a-rendered-interior/spring-maintenance-tips-for-your-home Beyondspace 1 Link to comment
Beyondspace Posted June 3, 2021 Share Posted June 3, 2021 4 hours ago, dovely said: @tuanphan Do you happen know how to fix the date formatting in the blog for the site link below? I appreciate your help. Thank you! https://www.ristudiodallas.com/a-rendered-interior/spring-maintenance-tips-for-your-home This solution work with your template Blog collection page - move metadata to bottom + reformat date (7.1) - Coding and Customization - Squarespace Forum tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
Beyondspace Posted November 22, 2021 Share Posted November 22, 2021 (edited) I've updated a general new solution for this requirement in the following post: It can set a unique format date on all pages If you have any issue when implementing it, do not hesitate to reply on my threat Edited November 22, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
Soren_90 Posted November 29, 2021 Share Posted November 29, 2021 Really helpful, thanks a lot. Beyondspace 1 Link to comment
Andre_99 Posted January 18, 2022 Share Posted January 18, 2022 On 5/26/2020 at 1:42 PM, katycarlisle said: I don't know if this has been a recent fix but I was able to get the UK date format by going to Settings > Language & Region and choosing "English (United Kingdom)" as my language. Now in the overview they display as dd/mm/yy and when you click through it shows as number then month e.g. 6 May. It's still annoying that the formats are different in the overview to in the post (and both of those are different to summary blocks). Okay so it seems like to change to an European format date. it does work if you change it to English (United Kingdom) The format will change immediately to dd/mm/yyyy. However i had my settings on Norwegian. yet the Date format was not in an European format. So changing to English (United Kingdom) is the most easy way to do it Beyondspace 1 Link to comment
Mystah Posted July 12, 2023 Share Posted July 12, 2023 (edited) Hello, I found a code that almost works for me but the problem is that in Swedish text the dates is abbreviated, so for example November shows strange: 11 nov., 2023. How to get rid of the "," between date and year? <script> var a=['\x73\x6c\x69\x63\x65','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x6d\x65\x74\x61\x5b\x69\x74\x65\x6d\x70\x72\x6f\x70\x3d\x22\x64\x61\x74\x65\x50\x75\x62\x6c\x69\x73\x68\x65\x64\x22\x5d','\x63\x6f\x6e\x74\x65\x6e\x74','\x69\x6e\x6e\x65\x72\x54\x65\x78\x74','\x54\x68\x69\x73\x20\x73\x69\x74\x65\x20\x75\x73\x65\x73\x20\x61\x20\x63\x6f\x64\x65\x20\x73\x6e\x69\x70\x70\x65\x74\x20\x63\x6f\x70\x79\x72\x69\x67\x68\x74\x65\x64\x20\x62\x79\x20\x5b\x73\x66\x2e\x64\x69\x67\x69\x74\x61\x6c\x5d','\x74\x69\x6d\x65\x2e\x64\x74\x2d\x70\x75\x62\x6c\x69\x73\x68\x65\x64\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2d\x2d\x64\x61\x74\x65\x20\x73\x70\x61\x6e','\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x180));var b=function(c,d){c=c-0x0;var e=a[c];return e;};window['\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72'](b('\x30\x78\x37'),c=>{console['\x6c\x6f\x67'](b('\x30\x78\x35'));var d;if(d=document[b('\x30\x78\x31')](b('\x30\x78\x36'))){var e=document[b('\x30\x78\x31')](b('\x30\x78\x32'))[b('\x30\x78\x33')];postYear=e[b('\x30\x78\x30')](0x0,0x4);d[b('\x30\x78\x34')]=d[b('\x30\x78\x34')]+'\x2c\x20'+postYear;}}); </script> Edited July 12, 2023 by Mystah Link to comment
Beyondspace Posted July 13, 2023 Share Posted July 13, 2023 15 hours ago, Mystah said: Hello, I found a code that almost works for me but the problem is that in Swedish text the dates is abbreviated, so for example November shows strange: 11 nov., 2023. How to get rid of the "," between date and year? <script> var a=['\x73\x6c\x69\x63\x65','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72','\x6d\x65\x74\x61\x5b\x69\x74\x65\x6d\x70\x72\x6f\x70\x3d\x22\x64\x61\x74\x65\x50\x75\x62\x6c\x69\x73\x68\x65\x64\x22\x5d','\x63\x6f\x6e\x74\x65\x6e\x74','\x69\x6e\x6e\x65\x72\x54\x65\x78\x74','\x54\x68\x69\x73\x20\x73\x69\x74\x65\x20\x75\x73\x65\x73\x20\x61\x20\x63\x6f\x64\x65\x20\x73\x6e\x69\x70\x70\x65\x74\x20\x63\x6f\x70\x79\x72\x69\x67\x68\x74\x65\x64\x20\x62\x79\x20\x5b\x73\x66\x2e\x64\x69\x67\x69\x74\x61\x6c\x5d','\x74\x69\x6d\x65\x2e\x64\x74\x2d\x70\x75\x62\x6c\x69\x73\x68\x65\x64\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2e\x62\x6c\x6f\x67\x2d\x6d\x65\x74\x61\x2d\x69\x74\x65\x6d\x2d\x2d\x64\x61\x74\x65\x20\x73\x70\x61\x6e','\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x180));var b=function(c,d){c=c-0x0;var e=a[c];return e;};window['\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72'](b('\x30\x78\x37'),c=>{console['\x6c\x6f\x67'](b('\x30\x78\x35'));var d;if(d=document[b('\x30\x78\x31')](b('\x30\x78\x36'))){var e=document[b('\x30\x78\x31')](b('\x30\x78\x32'))[b('\x30\x78\x33')];postYear=e[b('\x30\x78\x30')](0x0,0x4);d[b('\x30\x78\x34')]=d[b('\x30\x78\x34')]+'\x2c\x20'+postYear;}}); </script> Is this the correct format for the language? you can try it on BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
Mystah Posted July 13, 2023 Share Posted July 13, 2023 (edited) Hi, Thanks, but then the month dissapears. i want for example "13 nov. 2023". I tried dd mmm yyy and d mmm yyy, but then there is no "." after abbreviated months, and the months are in english and not swedish.. Edited July 13, 2023 by Mystah Beyondspace 1 Link to comment
Mystah Posted July 14, 2023 Share Posted July 14, 2023 (edited) I've got it, thanks! Edited July 14, 2023 by Mystah Beyondspace 1 Link to comment
Maeni Posted July 8 Share Posted July 8 (edited) Dear all I write here, because I would like to get the year of the actual publishing date of the blog post. You can just see month and day, e.g. May 29, even if the year is several years in the past. And the JavaScript does not help if the year is missing - I would like to format the date to MM/YY. On the summary page it works as this date format includes the year. I don't understand why they format it differently on the summary and blog item page! And it does only make sense to omit the year, if they calculate it correctly (e.g. you can omit if the post is from this year and in the past). Thanks in advance, Maeni PS. I found the solution. You can find the publishing date in the metadata of the page - it can be read by JavaScript (and it works independently from the date format): <meta itemprop="datePublished" content="2019-05-29T17:12:00+0200"/> Edited July 8 by Maeni Solution tuanphan 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