Change language using flatpickr | XM Community
Skip to main content

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:n"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: languages0'${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

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

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:g"enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"], },
weekdays: {
shorthand: h"Lu", "Ma", "Mi.", "Ju", "Vi", "Sá", "Do"], },
},

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

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

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

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"
  });
});

Thank you, that worked perfectly!!

Leave a Reply


Terms & Conditions