Change language using flatpickr | XM Community
Skip to main content
Solved

Change language using flatpickr

  • August 10, 2020
  • 4 replies
  • 3584 views
S

Hello!
I have a survey that is in both English and Spanish, and I have set up a calendar in one question using flatpickr. I'm trying to change the code so that participants who complete the survey in English see months in English and Spanish participants see months in Spanish. This is my code so far:
Qualtrics.SurveyEngine.addOnload(function () {

var input = jQuery("#"+this.questionId+" .InputText");

var languages = {
  "ES-ES": {
   months:["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"], 
   },
  "EN" : {
months:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
}
};

 input.flatpickr({
  l10ns: languages['${e://Field/Q_Language}'],
  dateFormat: "m/d/Y",
  minDate: "12/01/2019",
  maxDate: "today"
 });
});

I tried to adapt some code for pikaday (https://www.qualtrics.com/community/discussion/6074/date-picker-translations), but obviously I'm doing it incorrectly. Does anyone have any ideas? Thanks so much!
Shivani

Best answer by TomG

This should work:
Qualtrics.SurveyEngine.addOnload(function () {
 jQuery("#"+this.questionId+" .InputText").flatpickr({
locale: "${e://Field/Q_Language}".substr(0,2).toLowerCase(),
    dateFormat: "m/d/Y",
    minDate: "12/01/2019",
    maxDate: "today"
  });
});

4 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6083 replies
  • August 11, 2020

You need to load the flatpickr localization file in the header, then set the locale. See: https://flatpickr.js.org/localization/#localization-in-a-browser-environment

S
  • skochhar
  • Author
  • 4 replies
  • August 11, 2020

Hi Tom, thanks for your response! I have the below in my header right now:

I modified my code, but I'm not quite sure how to display the calendar in English for English participants and Spanish for Spanish participants. I'm not very familiar with JS, apologies! Do you have any ideas?
Qualtrics.SurveyEngine.addOnload(function () {
 var input = jQuery("#"+this.questionId+" .InputText");
var languages = {
    "ES-ES": {
firstDayofWeek: 1,
months: {
      longhand:["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"], },
weekdays: {
shorthand: ["Lu", "Ma", "Mi.", "Ju", "Vi", "Sá", "Do"], },
},

    "EN" : {
firstDayofWeek: 0,
months: {
longhand: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
},
weekdays: {
shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], },
},
};

  var mindate = "${e://Field/subdate_v1_cal}";

  input.flatpickr({
"locale": "es",
    l10n: languages['${e://Field/Q_Language}'],
    dateFormat: "m/d/Y",
    minDate: "12/01/2019" ,
    maxDate: "today"
  });
});

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 6083 replies
  • Answer
  • August 11, 2020

This should work:
Qualtrics.SurveyEngine.addOnload(function () {
 jQuery("#"+this.questionId+" .InputText").flatpickr({
locale: "${e://Field/Q_Language}".substr(0,2).toLowerCase(),
    dateFormat: "m/d/Y",
    minDate: "12/01/2019",
    maxDate: "today"
  });
});

S
  • skochhar
  • Author
  • 4 replies
  • August 11, 2020

Thank you, that worked perfectly!!


Terms & ConditionsAccessibility statement