Streaming live at 10am (PST)

Language markup that can show dynamic dates in different languages


#1

Hey guys, i am translating my site to French and Arabic and i need some code to let the dates and times in the dynamic collections appear correctly in each language. also how can i add an rtl code for the arabic site, that would be helpful.

Thanks in advance,
Anna K


Code that translates language sensitive data like days of the week, time units, etc
CMS Date Language
Date localization
#2

Hey again, I found this js: http://momentjs.com/
Does it help? a
If it does, how can i implement it?


#4

Share link: https://preview.webflow.com/preview/cdl?preview=1212c20efbeacb7236cc2560566003db

English Home
Arabic Home
French Home

There's a dynamic date and time field on these pages.
The Arabic numerals are being pulled from the font of the page.
The pages have hreflang in the code, if it helps. Is there for example a way to code some sort of java to format the date and time according top the hreflang?


#5

Example for FR, for landing page only (http://cdl.webflow.io/fr/home).
Insert into page settings last custom code field.

Do the same for the other pages, but change the variables.

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('http://momentjs.com/downloads/moment-with-locales.min.js', 
  function() {

    // Get all the classes here
    $('.p-t-11').each(function() {

      // Try to parse the contents into a date using this format
      var d = moment($(this).text(), "dddd, MMMM D, YYYY");

      // If it's a valid date
      if(d.isValid()) {

        // Convert to another locale, and in a new format
        var newDate = d.locale('fr').format("dddd, MMMM D, YYYY");

        // Replace contents with the new date
        $(this).text(newDate);
      }

    }); // End each
  }); // End getScript

});
</script>

Also, feel free to contact me for further code help and/or customization of third-party plugins


European Time Format Support
New Hospital Website Launched Today
International Date Format
#11

Updated code. This will find all p-t-11 classes, parse the text into a date. If it's a valid date, convert to FR locale and replace the displayed value.

To test that it works, paste the code without the script tags into the console.

"Wednesday, April 13, 2016" will now be displayed as "mercredi, avril 13, 2016"


#14

Add all your date classes here, comma-separated and each classname prefix with a .:

$('.p-t-11, .date2, .date3, .etc')

To change locale, edit the fr:

d.locale('fr')

Also, feel free to contact me for further code help and/or customization of third-party plugins


#15

Awesome it worked! Thx @samliew :blush:

So, let me get this. if i need it to work on another class, i just update the class name?
I also want to parse the time, i simply change the format right?


#16

You shouldn’t need to change this:

var d = moment($(this).text(), "dddd, MMMM D, YYYY");

To change the format in the new language, change this:

var newDate = d.locale('fr').format("dddd, MMMM D, YYYY");

The formats can be found here: http://momentjs.com/docs/#/displaying/format/


Also, feel free to contact me for further code help and/or customization of third-party plugins


#17

Cooool Thx dude. Thank you so much. Cheers :tada:


#18

#19

https://forum.webflow.com/t/language-markup-that-can-show-dynamic-dates-in-different-languages/25589/16

Thanks for all of your suggestions and help on this post.
I’m switching my project to SSL and in doing so, I simply wanted to have no external dependencies on other sites, especially HTTP sites. And MomentJS was one of them.
I know that momentjs is now HTTPS, but I’m thinking of copying the code and inserting it into my custom code block in site settings instead.
Do you have any thoughts on pasting inline JS into the site settings code block?

Appreciated in advance,
Luke


#20

momentjs is too large for custom code fields.

You’ll have to load from an external source.

<script src="https://cdn.rawgit.com/moment/moment/develop/min/moment.min.js"></script>
<script src="https://cdn.rawgit.com/moment/moment-timezone/develop/builds/moment-timezone.min.js"></script>

Example: http://mrtok.webflow.io/?test


Also, feel free to contact me for further code help and/or customization of third-party plugins


#21

#22

Perfect! But you should use https to link to the script, otherwise it might not load.