Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 4
iolle93

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

Question

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.

Edited by CRM114
Updated title

Share this post


Link to post

Recommended Posts

  • 11

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>

Edited by David Roessli

Building web sites at the speed of life since 1996

Share this post


Link to post
  • 4

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?

Share this post


Link to post
  • 4

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

Edited by David Roessli

Building web sites at the speed of life since 1996

Share this post


Link to post
  • 3

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

Edited by plapcity
Tidy!

Share this post


Link to post
  • 2

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?

Share this post


Link to post
  • 1

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>

Edited by opo

Share this post


Link to post
  • 1

how do you change the date format on forms. I need DD/MM/YYYYOrDD/MONTH/YYYY

The US dates are feeding into my calender and are screwing up my bookings. January 12th 2015 is becoming 1st Dec 2015.

Many Thanks

Share this post


Link to post
  • 1

I have tried all of the suggested options. Not a single one worked with the Wells theme. Why is it so hard for Squarespace to offer a working option to localise your site?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Edited by neeklamy

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.

Share this post


Link to post
  • 0

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

Edited by neeklamy

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.

Share this post


Link to post
  • 0

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


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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...