Welcome to the LimeSurvey Community Forum

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

replace date picker

More
3 weeks 1 day 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.

More
1 week 4 hours ago #272718 by bellagambad
Replied by bellagambad on topic replace date picker
Hi everyone,

Just following up on the topic I posted a couple of weeks ago. I haven’t received any replies yet, so I wanted to gently bring it back to attention in case someone has insights or suggestions to share.

I’d really appreciate any guidance or ideas — thanks in advance!

Please Log in to join the conversation.

More
1 week 1 hour ago #272722 by Joffm
Replied by Joffm on topic replace date picker
Hi,
I do not really see your issue.

I send detailed notifications to certain users, which then trigger actions on their part, so the format needs to be directly readable.

What is a format directly readable?

You see, the result of your daterime picker is a text.
So you can use all string functions and date functions to convert it into a format you like
See here:
[url] www.limesurvey.org/manual/ExpressionScri...mplemented_functions [/url]

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
6 days 4 hours ago - 6 days 4 hours ago #272737 by bellagambad
Replied by bellagambad on topic replace date picker
Hi Joffm,

Thanks a lot for your reply. To clarify, the format I mentioned — 2013-03-10T02:00 — isn’t culturally common where I live. We’re more used to something like dd-mm-yyyy hh:mm, which would be more intuitive and readable for the people receiving the notifications. Since these messages often trigger actions, clarity is key in my opinion. I’ve already tried several approaches to reformat the value, including suggestions from Copilot and ChatGPT. Unfortunately, none of them worked reliably — most scripts ended up breaking the response saving process, and the database received an empty value instead of the reformatted date. As a healthcare professional trying to learn and adapt on the go, I’d really appreciate a bit more guidance if possible. 

Thanks again for your time and support !
Best regards, David
Last edit: 6 days 4 hours ago by bellagambad. Reason: text formatting

Please Log in to join the conversation.

More
6 days 1 hour ago #272743 by Joffm
Replied by Joffm on topic replace date picker
So, what did you try so far?
Which of the in LimeSurvey implemented functions did you use?

As I wrote, you have a simple text.

You can use string functions to cut the interesting parts and join them in your desired order.
Or - as this text is the representationof a date - use the respective date functions to convert the text into a timestamp and and then back to your desired format.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
5 days 11 hours ago #272745 by bellagambad
Replied by bellagambad on topic replace date picker
Hi again,

Thanks for your follow-up.

Just to clarify: I’ve already tried several JavaScript-based approaches to reformat the datetime value, as mentioned earlier. Unfortunately, none of them worked reliably — they caused issues with saving the response, resulting in empty values in the database. So I didn't keep track of them.

As for the LimeSurvey implemented functions, I wasn’t aware of them before your message. I’ve now looked into the documentation (e.g., str_replace, substr, or strtotime), but I’m still unsure where and how these functions should be used in practice with a dynamic value (i.e. the answer) — whether in the question source, in the notification templates, or elsewhere. I might be missing something obvious, but it’s not clear to me.

Thanks again for your time and support.

Best regards,
David

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose