!
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
Best answer by TomG
View original
Date Picker Translations
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
!
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
Userlevel 7
+27
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.
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.
Userlevel 7
+27
@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}']
```
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);
});
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);
});
Userlevel 7
+27
> @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.
> @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.
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
Userlevel 7
+27
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 ?
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.