Hello LimeSurvey community,I’m looking to replace the date and time question widget with one that provides a wheel picker on smartphones, at least. In my survey, most participants will respond on a smartphone, and it’s important that the user experience is optimal. I’ve tested the default widget, and in my opinion, its experience on smartphones isn’t ideal, whether with or without a dropdown menu.So far, I’ve managed to replace the widget with the
datetime-local widget (screenshots attached), but one problem remains. This widget saves the value in an ISO-like format (I think), e.g.,
, which is quite hard to read. Yes, it’s perfectly possible to modify this format in Excel or other tools. However, in my workflow, I send detailed notifications to certain users, which then trigger actions on their part, so the format needs to be directly readable.
To replace the widget, I added a short text question and added the following code :
Code:
<script>
// section remplacement du widget
document.addEventListener("DOMContentLoaded", function () {
// Sélectionner l'élément input existant
const oldInput = document.querySelector('input[id="answer765636X772X32778"]');
if (oldInput) {
// Crée un nouvel input de type datetime-local
const newInput = document.createElement("input");
newInput.type = "datetime-local";
newInput.className = "form-control";
newInput.name = oldInput.name;
newInput.id = oldInput.id;
newInput.setAttribute("aria-labelledby", oldInput.getAttribute("aria-labelledby"));
if (oldInput.value) {
newInput.value = oldInput.value;
}
// Remplace l'ancien input par le nouveau
oldInput.parentNode.replaceChild(newInput, oldInput);
}
});
// activer zone input si on clique sur le calendrier
document.addEventListener("DOMContentLoaded", function () {
const input = document.querySelector('input[type="datetime-local"]');
input.addEventListener("click", function () {
this.focus(); // assure le focus même si l’icône est cliquée
});
});
</script>
<style type="text/css">#question32778 .form-control {
width:200px;
}
#question32778 input[type="datetime-local"] {
cursor: text;
}
#question32778 input[type="datetime-local"]::-webkit-calendar-picker-indicator {
cursor: pointer;
transform: scale(1.4);
color: #1f6ab1;
}
</style>
So I have two questions:
- Is it possible to modify the format of values saved with the datetime-local widget?
- Or is there a simpler way to replace the default widget without this date format issue, while still offering a wheel picker?
LS version used : Version 5.4.3+220926 (own server)
I am using a custom fruity theme.
Thank you in advance for your help, best regards,
David