Jump to content

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

Recommended Posts

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.

Link to comment
  • Replies 41
  • Views 31.7k
  • Created
  • Last Reply

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?

Link to comment
  • 3 weeks later...

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>

Building web sites at the speed of life since 1996

Link to comment

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?

Link to comment

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>

Link to comment

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!

Link to comment
  • 4 months later...

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&period;js documentation.

Hope this helps!

Best,
Perri

Link to comment
  • 3 weeks later...

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());

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 7 months later...

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

The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Link to comment
  • 8 months later...
  • 2 weeks later...

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

Building web sites at the speed of life since 1996

Link to comment

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

Building web sites at the speed of life since 1996

Link to comment
  • 3 weeks later...

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!

Link to comment
  • 4 weeks later...

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.