Blog Post: Translate date format and months from English to another language

I am looking for a way to change the format of dates in blog posts (contained in the meta field of blog posts). I am developing a Swedish language website and would therefor like to change months from text to numeric (for example: change “March” to “03”) or from English to Swedish (change “March” to “mars”).

Is this possible and if so how? I am willing to use JavaScript or whatever is necessary.

We should set up a group that could translate these standard strings to our native language. datesread morenextprevious

and so on.

Anyone any good at this?

Apparently, there is no way to edit template blocks (even in dev mode), see http://answers.squarespace.com/questions/1004/can-i-change-the-date-format-in-summary-blocks

It is annoying that Squarespace doesn't honor the language locale you choose in your settings. The only use it does of it is to set the lang parameter in the html element.

So, I wrote a few lines of JavaScript that translate the date into French and substitute the annoying “X month ago” string that appears in .timesince elements. It also translates 'Share' into 'Partagez' and 'Continue reading' into 'Continuer à lire'.

The only caveat is that the date is displayed in English until the DOM is fully loaded and the substitution is run. So the page can 'flash' a little.

It can be easily customised to other languages. I have used it within the Five template.

Copy and paste the following code into your footer (Settings > Code injection):

<script>
 /*
 :::::::::::::::::::::::::::::::::::::::::::::
 ::: Build array of months in French
 */
 var month=new Array(12);
 month[0]="janvier";  month[1]="février";   month[2]="mars";
 month[3]="avril";    month[4]="mai";       month[5]="juin";
 month[6]="juillet";  month[7]="août";      month[8]="septembre";
 month[9]="octobre";  month[10]="novembre"; month[11]="décembre";

 Y.use('node', 'node-load', function(Y) {
   Y.on('domready', function() {
     /*
     :::::::::::::::::::::::::::::::::::::::::::::
     ::: Substitute specific strings
     */
     Y.all('.ss-social-button').setHTML('<span class="ss-social-button-icon"></span>Partagez');
     Y.all('.inline-read-more').setHTML('Continuer à lire');
     // Y.all('.newer-posts').setHTML('Suiv');
     // Y.all('.older-posts').setHTML('Prec');
     /*
     :::::::::::::::::::::::::::::::::::::::::::::
     ::: Reformat published date (Blog)
     */
     Y.all('time.published').each(
       function() {
         var pdate = new Date(this.getAttribute('datetime'));
         this.setHTML(pdate.getDate() + " " + month[pdate.getMonth()] + " " + pdate.getFullYear());
       }
     ); // .published
     /*
     :::::::::::::::::::::::::::::::::::::::::::::
     ::: Reformat time since string
     */
     Y.all('time.timestamp').each(
       function() {
         var tdate = new Date(this.getAttribute('datetime'));
         this.setHTML(tdate.getDate() + " " + month[tdate.getMonth()] + " " + tdate.getFullYear());
       }
     ); // .timestamp (.timesince)
   }); // Y.on
 });
</script>

This is really great! I will use it and translate it to Norwegian. Should we perhaps set up a page where we can share these SS-tweaks?And I guess @iolle93 will translate into Swedish?

Translate to Norwegian:

 <script>
 /*
 :::::::::::::::::::::::::::::::::::::::::::::
 ::: Build array of months in Norwegian
 */

 var month=new Array(12);

 month[0]="januar";
 month[1]="februar";
 month[2]="mars";
 month[3]="april";
 month[4]="mai";
 month[5]="juni";
 month[6]="juli";
 month[7]="august";
 month[8]="september";
 month[9]="oktober";
 month[10]="november";
 month[11]="desember";

 Y.use('node', 'node-load', function(Y) {
   Y.on('domready', function() {

     /*
     :::::::::::::::::::::::::::::::::::::::::::::
     ::: Substitute specific strings
     */

     Y.all('.ss-social-button').setHTML('<span class="ss-social-button-icon"></span>Del');
     Y.all('.inline-read-more').setHTML('Les mer…');
     // Y.all('.newer-posts').setHTML('Neste');
     // Y.all('.older-posts').setHTML('Forrige');
     /*
     :::::::::::::::::::::::::::::::::::::::::::::
     ::: Reformat published date (Blog)
     */
     Y.all('time.published').each(
       function() {
         var pdate = new Date(this.getAttribute('datetime'));
         this.setHTML(pdate.getDate() + " " + month[pdate.getMonth()] + " " + pdate.getFullYear());
       }
     ); // .published
     /*
     :::::::::::::::::::::::::::::::::::::::::::::
     ::: Reformat time since string
     */
     Y.all('time.timestamp').each(
       function() {
         var tdate = new Date(this.getAttribute('datetime'));
         this.setHTML(tdate.getDate() + " " + month[tdate.getMonth()] + " " + tdate.getFullYear());
       }
     ); // .timestamp (.timesince)
   }); // Y.on
 });
</script>

Really like the "Substitute specific strings".

Now that you are at it, how about fixing the language on the comments as well? Are you any good at that?

I'll buy you a beer!

Yes, I need to take a look at forms in general. I'll come back to you when its done.Cheers for the beer ;)

I have been using YUI date formatters that work with the developer template. You can find the formatters here: Date Class - YUI Library.

For example, the following code:

<p class="meta">
 Posted on <time datetime="{addedOn|date %F}">{addedOn|date %B %d, %Y}</time>.
</p>

Renders as:
Posted on August 8, 2013

So, if you wanted to do something like 8 Aug 13, you would code out:

<p class="meta">
 Posted on <time datetime="{addedOn|date %F}">{addedOn|date %d %b %y}</time>
</p>   

You can find more formatters such as AM/PM or full/abbreviated months or day of the week.

I also use Moment.js to format dates more specifically, see the Moment.js documentation.

Hope this helps!

Best,
Perri

How would one go about switching the order of the date and the month?

"August 2 2013" instead of "2 August 2013"

As a start, you want to switch the order of the variables, so this line:

this.setHTML(pdate.getDate() + " " + month[pdate.getMonth()] + " " + pdate.getFullYear());

Becomes:

this.setHTML(month[pdate.getMonth()] + " " + pdate.getDate() + " " + pdate.getFullYear());

Perfect. Thank you.

I'm a bit of a novice. How would I go about changing the order of the date from USA format to UK. I want it to read DD MM YYYY.

@Shrubser You can do that in Squarespace general Settings.

I don't believe you can. I would love to be told otherwise though, believe me!

@Shrubser. You´re right. I was thinking about URL format.

It would really make sense to have this available under Settings > Time/Geography, it does say on that page: “These settings will affect the date presentation across the system.

You can do this with David Roessli’s answer though, check out the specific answer here, How can I customize the date shown at the end of a blog post?

Let Squarespace know you want this feature: support@squarespace.com

And if you don’t want the named months, the code is even simpler.

Unfortunatley, this method no longer works. Anyone know why?

Great! Do you guys have an idea why it doesn't work with all templates? - Didn't work with template Adirondak

@ ABraunsberger: this depends on how the strings and events are named, it may differ from template to template.

I’m afraid this solution of injecting code to patch targeted strings is not sustainable and is liable to break at any template update.

Squarespace needs to provide this functionality from within its platform.

In the meantime, I discovered an external provider that offers an elegant solution (not free) called localize.js. Check it out at localizejs.com

I’m afraid this solution of injecting code to patch targeted strings is not sustainable and is liable to break at any template update.

Squarespace needs to provide this functionality from within its platform.

In the meantime, I discovered an external provider that offers an elegant solution (not free) called localize.js. Check it out at localizejs.com

thank you, this helped me a lot... but something still missing for me: anyone figured how to make this work in to the events too? now the events still shows in english. i tryed this (copied from the comments of one this site http://davidroessli.com/logs/2013/04/squarespace_l10n/ and changed to spanish words)

    <script>
// load a function to replace strings
/*
* jQuery replaceText - v1.1 - 11/21/2009
* http://benalman.com/projects/jquery-replacetext-plugin/
* Copyright (c) 2009 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($){$.fn.replaceText=function(b,a,c){return this.each(function(){var f=this.firstChild,g,e,d=[];if(f){do{if(f.nodeType===3){g=f.nodeValue;e=g.replace(b,a);if(e!==g){if(!c&&/</.test(e)){$(f).before(e);d.push(f)}else{f.nodeValue=e}}}}while(f=f.nextSibling)}d.length&&$(d).remove()})}})(jQuery);
</script>

<script>
var monthDE = [];
monthDE[0]="Enero";
monthDE[1]="Febrero";
monthDE[2]="Marzo";
monthDE[3]="Abril";
monthDE[4]="Mayo";
monthDE[5]="Junio";
monthDE[6]="Julio";
monthDE[7]="Agosto";
monthDE[8]="Septiembre";
monthDE[9]="Octubre";
monthDE[10]="Noviembre";
monthDE[11]="Diciembre";
var monthEN = [];
monthEN[0]="January";
monthEN[1]="February";
monthEN[2]="March";
monthEN[3]="April";
monthEN[4]="May";
monthEN[5]="June";
monthEN[6]="July";
monthEN[7]="August";
monthEN[8]="September";
monthEN[9]="October";
monthEN[10]="November";
monthEN[11]="December";
var dayDE = [];
dayDE[0]="Lunes";
dayDE[1]="Martes";
dayDE[2]="Miercoles";
dayDE[3]="Jueves";
dayDE[4]="Viernes";
dayDE[5]="Sabado";
dayDE[6]="Domingo";
var dayEN = [];
dayEN[0]="Monday";
dayEN[1]="Tuesday";
dayEN[2]="Wednesday";
dayEN[3]="Thursday";
dayEN[4]="Friday";
dayEN[5]="Saturday";
dayEN[6]="Sunday";
</script>

<script>
// replace month
$( "time.eventlist-datelabel-startdate" ).each(function() {
var label = $( this ).text();
// we now have "March 12"
var index = label.indexOf(" ");
var detectecMonth = label.substring(0, index);
var day = label.substring(index);
var translatedMonth = "";
for ( var i = 0; i < 12; i++ ) {
if (detectecMonth == monthEN[i]) {translatedMonth = monthDE[i]};
};
$( this ).replaceWith( "<time class='eventlist-datelabel-startdate'>" + day + ". " + translatedMonth + "</time>" );
});
// replace day-month
$( "time.event-meta-heading" ).each(function() {
var label = $( this ).text();
// we now have "Saturday, March 1, 2014"
var index1 =label.indexOf(",");
var detectedDay = label.substring(0, index1);
var indextemp = label.lastIndexOf(",");
var stringtemp = label.substring(index1, indextemp);
// we now have ", March 1"
indextemp = stringtemp.lastIndexOf(" ");
var detectedMonth = stringtemp.substring(2, indextemp);
// sometimes there are 2 blanks behind the month, therefore trim
detectedMonth = jQuery.trim(detectedMonth);
var day = stringtemp.substring(indextemp);
var indexyear = label.lastIndexOf(" ");
var year = label.substring(indexyear);
var translatedDay = "";
var translatedMonth = "";
for ( var i = 0; i < 12; i++ ) {
if (detectedMonth == monthEN[i]) {translatedMonth = monthDE[i]};
};
for ( var k = 0; k < 7; k++ ) {
if (detectedDay == dayEN[k]) {translatedDay = dayDE[k]};
};
$( this ).replaceWith( "<time class='event-meta-heading'>" + translatedDay + ", " + day + ". " + translatedMonth + year + "</time>" );
});
// translate "(map)"
$( "li[class='event-meta-item eventlist-meta-address']" ).each(function() {
$('body :not(textarea)').replaceText( "(map)", "(Mapa)" );
});
</script>

but still not working for me...

Thanks!

How about if you want to add the hours and minutes? How do you retrieve them since they're not on the [datetime] attribute?

How about if you want to add the hours and minutes? How do you retrieve them since they're not on the [datetime] attribute?