Date Picker Translations | XM Community
Skip to main content
I'm using a date picker (pikaday) to collect date of birth and also check that the survey taker's age is between 16-22 using the following javascript.

!



However, I need to translate this to German, Spanish and Dutch (both the calendar itself and the output).

!



How would I go about this?



Thank you in advance
Use the pickaday i18n option.
Thanks @TomG, I have worked out how to use the i18n. I am trying to use if-else to display the correct translation, although there is something wrong. Would you mind telling me how to fix the following?



Qualtrics.SurveyEngine.addOnload(function()

{

var inputId = 'QR~' + this.questionId;

var picker = new Pikaday(

{

field: document.getElementById(inputId),

firstDay: 1,

defaultDate: new Date(2000,0),

i18n:

if ("${e://Field/Q_Language}" = "ES-ES") {

month:["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],

weekdays: ["domingo","lunes","martes","miércoles","jueves","viernes","sábado"],

weekdaysShort: :"dom","lun","mar","mier","jue","vie","sab"],

};

else if ("${e://Field/Q_Language}" = "NL") {

months: :"Januari", "Februari", "Maart", "April","Mei", "Juni", "Juli", "Augustus", "September", "October", "November", "December"],

weekdays: :"zondag", "maandag", "dinsdag", "woensday", "vrijdag", "zaterdag"],

weekdaysShort: :"zo", "ma", "di", "wo", "vr", "za"],

};

else if ("${e://Field/Q_Language}" = "DE") {

months: :"Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],

weekdays: s"Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],

weekdaysShort: t"So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],

};

onSelect: function(date)

{

var todayInSeconds = new Date().getTime();

var birthdayInSeconds = date.getTime();

var ageInSeconds = todayInSeconds - birthdayInSeconds;

var ageInYears = Math.floor(ageInSeconds / (1000 * 3600 * 24) / 365);

Qualtrics.SurveyEngine.setEmbeddedData("Age", ageInYears);

},

});

});



I appreciate it would be a lot easier to just set up a different question for each language and use display logic but I am trying to learn! Thank you so much for your help.
@Sarah646,



You can't do if-else logic inside an object definition. I would create a separate object with the languages as keys, then just reference the correct i18n value in the pickaday setup:



```

var languages = {

"ES-ES": {

month:["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],

weekdays: ["domingo","lunes","martes","miércoles","jueves","viernes","sábado"],

weekdaysShort: :"dom","lun","mar","mier","jue","vie","sab"],

},

"NL": {

months: :"Januari", "Februari", "Maart", "April","Mei", "Juni", "Juli", "Augustus", "September", "October", "November", "December"],

weekdays: :"zondag", "maandag", "dinsdag", "woensday", "vrijdag", "zaterdag"],

weekdaysShort: :"zo", "ma", "di", "wo", "vr", "za"],

},

...etc...

};

```

Then in the pickaday setup:

```

i18n: languagese'${e://Field/Q_Language}']

```
@TomG , thank you so much this is now working except in Spanish. Any idea why?



Qualtrics.SurveyEngine.addOnload(function()

{

var inputId = 'QR~' + this.questionId;

var languages = {

"ES-ES": {

month:["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],

weekdays: ["domingo","lunes","martes","miércoles","jueves","viernes","sábado"],

weekdaysShort: :"dom","lun","mar","mier","jue","vie","sab",],

},

"NL": {

months: :"Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "October", "November", "December"],

weekdays: :"zondag", "maandag", "dinsdag", "woensday", "donderdag", "vrijdag", "zaterdag"],

weekdaysShort: :"zo", "ma", "di", "wo", "do", "vr", "za",],

},

"DE": {

months: :"Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],

weekdays: s"Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],

weekdaysShort: t"So", "Mo", "Di", "Mi", "Do", "Fr", "Sa",],

},

"EN": {

months: s'January','February','March','April','May','June','July','August','September','October','November','December'],

weekdays: s'Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],

weekdaysShort: t'Sun','Mon','Tue','Wed','Thu','Fri','Sat',],

},

};

var picker = new Pikaday(

{

field: document.getElementById(inputId),

firstDay: 1,

defaultDate: new Date(2000,0),

i18n: languagesg'${e://Field/Q_Language}'],

format: "DD/MM/YYYY",

onSelect: function(date) {

var todayInSeconds = new Date().getTime();

var birthdayInSeconds = date.getTime();

var ageInSeconds = todayInSeconds - birthdayInSeconds;

var ageInYears = Math.floor(ageInSeconds / (1000 * 3600 * 24) / 365);

Qualtrics.SurveyEngine.setEmbeddedData("Age", ageInYears);

},

});

});

Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery("#"+this.questionId+" .InputText").attr("readonly",true);



});
> @Sarah646 said:

> @TomG , thank you so much this is now working except in Spanish. Any idea why?

>



My guess is the key (ES-ES) isn't matching. Are you using the correct language code? ES-ES is the code for Spanish. ES is the code for Spanish (Latin America). If you're sure you've got the right one, pipe Q_Language and copy it to the object key...maybe it is a different - character.
Fixed it, thank you so much for all your help @TomG

I want to use the code but I have problems.
I pasted the same code on the JS part but do I need to have a code in my header ? how can I do this please


https://community.qualtrics.com/XMcommunity/discussion/comment/47311#Comment_47311The code above uses the pikaday library that would you need to load in the header (Look & Feel -> General -> Header -> Source mode <>). Load it from a cdn like jsdelivr.
Personally, I recommend flatpickr instead.


Thank you Tom for you answer .
I used this code into my JS :
Qualtrics.SurveyEngine.addOnload(function()
{
  var inputId = 'QR~' + this.questionId;
  var languages = {
    "FR": {
      months: 'Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre'],
      weekdays: 'Dimache','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
      
    },
  };
  var picker = new Pikaday(
    {
    field: document.getElementById(inputId),
    firstDay: 1,
    defaultDate: new Date(2000,0),  
    i18n: languagesa'${e://Field/Q_Language}'],
    format: "DD/MM/YYYY",
    onSelect: function(date) {
      var todayInSeconds = new Date().getTime();
      var birthdayInSeconds = date.getTime();
      var ageInSeconds = todayInSeconds - birthdayInSeconds;
      var ageInYears = Math.floor(ageInSeconds / (1000 * 3600 * 24) / 365);
      Qualtrics.SurveyEngine.setEmbeddedData("Age", ageInYears);
      },
    });
  });
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").attr("readonly",true);

});

And for the Header this one :
https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/css/pikaday.min.css" rel="stylesheet" type="text/css" />">https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js">

But it's not working what should I do please ?


Leave a Reply