Datepicker based on language selection does not appear until the selected language is changed | XM Community
Skip to main content

I'd greatly appreciate guidance on this as I'm completely new to JS, inherited this from a colleague, and am having trouble troubleshooting. I have the same JS block in four questions in a survey that correctly displays a datepicker in either English, French, or Japanese based on the language selected in the survey. However, the datepicker only appears after the selected language is changed, even if it's changed from English (United Kingdom) -> Japanese -> English (United Kingdom).
The datepicker is working correctly once it appears after the language selection is modified so I'd like to be able to continue with this approach if I can just tweak the code below to effectively have the datepicker appear initially as intended. Thanks in advance!

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery.getScript( "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" )
.done(function( script, textStatus ) {
}).fail(function( jqxhr, settings, exception ) {
console.log( "Triggered ajaxError handler." );
});
});

Qualtrics.SurveyEngine.addOnReady(function() {
const locale = jQuery( "#Q_lang" ).val();
let locale_defaults = {
dateFormat: "mm/dd/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "",
defaultDate: new Date('June 15, 2021'),
minDate: new Date('June 15, 2021'),
maxDate: new Date('October 15, 2021')
}

if ( locale === 'JA' ) {
locale_defaults = {
closeText: "閉じる",
prevText: "<前",
nextText: "次>",
currentText: "今日",
monthNames: "1月", "2月", "3月", "4月", "5月", "6月",
"7月", "8月", "9月", "10月", "11月", "12月" ],
monthNamesShort: "1月", "2月", "3月", "4月", "5月", "6月",
"7月", "8月", "9月", "10月", "11月", "12月" ],
dayNames: "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ],
dayNamesShort: " "日", "月", "火", "水", "木", "金", "土" ],
dayNamesMin: "日", "月", "火", "水", "木", "金", "土" ],
weekHeader: "週",
dateFormat: "yy/mm/dd",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: "年",
defaultDate: new Date('June 15, 2021'),
minDate: new Date('June 15, 2021'),
maxDate: new Date('October 15, 2021')
}
} else if ( locale === 'FR' ) {
locale_defaults = {
closeText: "Fermer",
prevText: "Précédent",
nextText: "Suivant",
currentText: "Aujourd'hui",
monthNames: { "janvier", "février", "mars", "avril", "mai", "juin",
"juillet", "août", "septembre", "octobre", "novembre", "décembre" ],
monthNamesShort: i "janv.", "févr.", "mars", "avr.", "mai", "juin",
 "juil.", "août", "sept.", "oct.", "nov.", "déc." ],
dayNames: s "dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi" ],
dayNamesShort: t "dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam." ],
dayNamesMin: "D", "L", "M", "M", "J", "V", "S" ],
weekHeader: "Sem.",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "",
defaultDate: new Date('June 15, 2021'),
minDate: new Date('June 15, 2021'),
maxDate: new Date('October 15, 2021')
}
}

jQuery("#"+this.questionId+" .InputText").each(function(index) {
jQuery(this).datepicker(locale_defaults)
});
});

Qualtrics.SurveyEngine.addOnUnload(function() {
jQuery("#ui-datepicker-div").remove();
});

This post help me resolve this issue by using a flatpickr as a replacement for the picker above. Hopefully, it's helpful for others who may have the same issue.
https://community.qualtrics.com/XMcommunity/discussion/17387/adjusting-flatpickr-language-based-on-user-language#latest


Leave a Reply