Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

replace date picker

More
10 hours 48 minutes ago #272552 by bellagambad
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.,
Code:
2013-03-10T02:00
, 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:
  1. Is it possible to modify the format of values saved with the datetime-local widget?
  2. 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

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose