Language markup that can show dynamic dates in different languages

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?

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('https://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

7 Likes

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”

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

1 Like

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?

1 Like

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: Moment.js | Docs


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

2 Likes

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

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

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

1 Like

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

Hi @samliew Thanks a lot for this post, I’m trying to set this in one of my clients site but it doesn’t work… The dates is supposed to be display in Spanish.
Can you tell me what I’m doing wrong?

http://www.rociosuarez.com/entrenamientos/master-practitioner-en-pnl-modular

Thanks at front!

@Nicolas_Marquez_Vill Make sure the p-t-11 selector is changed to and matches the published elements’ class name

1 Like

I’m having problems getting this to work. Could anyone take a look at my test to try to see what’s wrong?

https://preview.webflow.com/preview/momenttest?utm_medium=preview_link&utm_source=designer&utm_content=momenttest&preview=189382c53ff0a98626e3ce604551581d&mode=preview

Hey guys. Not sure why people are still using Moments.js.

Just use the following code in an embed field to format dates into your region. No waiting for the text to be replaced etc. either.

<script>
{
  var d = new Date('DATE/TIME YOU WANT TO REFORMAT');
  document.write(d.toLocaleString('nb-NO', {year: 'numeric', month: 'long', day: 'numeric'}));
  
}
</script>
  • Insert the date (or a dynamic date field from a collection item) into 'DATE/TIME YOU WANT TO REFORMAT'.
  • You can change the country formatting by switching out 'nb-NO' to the correct country (see list of codes here).
  • You can change the formatting of the actual date / time by inserting options where the {'year: 'numeric', month: 'long', day: 'numeric'} are (see list of options available here).
2 Likes

Thanks a lot, I got it working!

Do you know if it’s possible to show the text “tomorrow” or “today” when the date is next/this day? I’ve searched and couldn’t find any option for that.

If you’re using the date in a collection item template, then you can simply add a text box that says “tomorrow” or “today” and make the conditional visibility so that it’ll only show on the day in question :slight_smile:

2020-03-29 17_34_36-aller siste.ods - Excel

Thank you so much for your help!

1 Like

Hi @Fonsume sounds like the exact solution I am looking for. Can I also get it working on page level and target a css class?