Adjusting flatpickr Language based on User Language | XM Community
Solved

Adjusting flatpickr Language based on User Language

  • 13 August 2021
  • 1 reply
  • 312 views

Hello all, I'm currently using flatpickr in my survey. My survey is in both English and Chinese and I want my flatpickr to adapt to the language. I'm using following code but it seems that my if-else part is not working properly, so the flatpickr is displaying Chinese for the survey in both languages. I'm not very familiar with JS so would really appreciate any pointers. TIA!
I've put the following code in "Look and Feel" -> "General" -> "Header"




and the following code for the JavaScript part of my text entry question
if ("${e://Field/Q_Language}" == "EN"){
lang = "default";
} else {
lang = "zh";
}

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
"locale": lang,
dateFormat: "Y-m-d",
minDate: new Date().fp_incr(-30),
maxDate: "today"
  });

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

icon

Best answer by NiC 13 August 2021, 11:46

View original

1 reply

Userlevel 7
Badge +27

Hi skwok ,

So the code you wrote is working just fine for me, if still it is not working you can try using the below code :

Qualtrics.SurveyEngine.addOnReady(function()
{
   /*Place your JavaScript here to run when the page is fully displayed*/
      let lang = Qualtrics.SurveyEngine.getEmbeddedData("Q_Language")
      jQuery("#"+this.questionId+" .InputText").flatpickr({
      "locale":lang.toLowerCase().slice(0,2),
      dateFormat: "Y-m-d",
      minDate: new Date().fp_incr(-30),
      maxDate: "today"
 });

});


Leave a Reply