I can't use the English date time picker

Design help General
1

Hi Webflowers!

I can’t use the english released date time picker, as shown in the image
20

I must have the Scandinavian version of “date”.

And it has to start first with: “date” and then “month” and then “year”, that is: “3. Mar. 2019”. (And not as the English which is: Month, date and year, “March 3 2019”).
And I want to write it with 3 first letters of each month (not write the whole month - but only the first three letters). (that is: Jan., Feb., Mar., Apr., Mai, Jun., Jul., Aug., Sep., Okt., Nov., Des. )

So have do I do that?
I want it in my collection.

Thank you for help!

1 Like
2

You use 6 text elements, and the option you have down the list you’re showing above.

“day” “.” “Month” “.” “year” “.”

You bind day on just the digits of the date, month on the 3 letters month of the date, and year. You adjust the spaces with classes or you add the space after the first 2 dots.

3

Yes, but the months are in English? - that was the problem!

As I wrote yesterday, it has to be like this (and this is not english as you see): Jan., Feb., Mar., Apr., Mai, Jun., Jul., Aug., Sep., Okt., Nov., Des.

1 Like
4

Oh, sorry, it was very late when I answered (very sad excuse indeed).

I think I got you covered though.

I made a landing page presenting scripts that you can use to translate names of days and months on the fly.

Unfortunately, I haven’t prepared the Scandinavian version of it, but you’ll easily edit the script to repair my omission.

The scripts on that page are translating full months and days names, but you can add the short versions of them easily. here is the script I’m using for my French sites:

<script>

// config
var dateclass = 'classdate';

$(document).ready(function() {
var wfdc = $('.' + dateclass);

wfdc.each(function() {
var wfdctxt = $(this).text();

var monthsEn = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday',
  'Sunday',
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat',
  'Sun'

];


var monthsFr = [
  'Janvier',
  'Février',
  'Mars',
  'Avril',
  'Mai',
  'Juin',
  'Juillet',
  'Aout',
  'Septembre',
  'Octobre',
  'Novembre',
  'Décembre',
  'Lundi',
  'Mardi',
  'Mercredi',
  'Jeudi',
  'Vendredi',
  'Samedi',
  'Dimanche',
  'Jan',
  'Fev',
  'Mar',
  'Avr',
  'Mai',
  'Jui',
  'Juil',
  'Aou',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
  'Lun',
  'Mar',
  'Mer',
  'Jeu',
  'Ven',
  'Sam',
  'Dim'
];

for (var i = 0; i < monthsEn.length; i++) {
  wfdctxt = wfdctxt.replace(monthsEn[i], monthsFr[i]);
}

$(this).text(wfdctxt);
});
});

</script>

Could you please, if you use it and make the Scandinavian version, give it back to me so I can add it to the page for anyone else to grab?

Webflow is supposed to bring Multilanguage this year, I hope that all thos variables will be translated as well then and that I can retire those scripts.

3 Likes
5

WoW! Great!
But I don’t know how do to this, Shall I put the Scandinavian months where I see the French one? and where I have to place this code?

6

Yes, exactly.

Follow the instructions on the mini site. You have to add a class to the elements that need to be translated. My script use .classdate class name, so add a combo class “classname”. Then the script itself goes at site level or page level, in the second custom code box, the “bfore /body” one. Then publish and check the results online. You will have the dates in english in the Webflow designer, results will be seen online.

7

I will try it later, and I will let you know if I can do this ( I am a new Webflower…)

8

I have used vincent’s script for one of my client’s website and this was a life saver :slight_smile: thanks so much for that ! Didn’t know about the multi-language dropping soon - looking forward to it !

2 Likes
9

Hi again Vincent! I have done as you said, and ad a combo class “classname”. But I don’t know how to put the code in?