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: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"], weekdaysShort: ["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: languages['${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: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"], weekdaysShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa",], }, "EN": { months: ['January','February','March','April','May','June','July','August','September','October','November','December'], weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], weekdaysShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat',], }, }; var picker = new Pikaday( { field: document.getElementById(inputId), firstDay: 1, defaultDate: new Date(2000,0), i18n: languages['${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: languages['${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 ?