Timepicker and Cleave.Js challenges | XM Community
Question

Timepicker and Cleave.Js challenges

  • 24 March 2020
  • 8 replies
  • 126 views
S
Hi all,
I am trying to add in Timepicker to my survey to make it easier for respondents to add in times. I tried using a regex, but that's been acting up and not working some of the time, despite it appearing to work in the Preview tab. I found the Timepicker option to be best, but it doesn't seem to be working no matter what I've tried from the other answers within this forum.

This is the code I tried for one question: Qualtrics.SurveyEngine.addOnload(function()
{
$(document).ready(function(){
$('input.timepicker').timepicker({ timeFormat: 'h🇲🇲ss p' });
});

I also tried something TomG has posted a few times:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: true, noCalendar: true, defaultTime: "H:i"});
});

I wanted it to look like what was found in this post but am wondering what the JavaScript should look like (my HTML works): https://www.qualtrics.com/community/discussion/1691/adding-flatpickr-timepicker-to-a-question

Any ideas? Thanks so much!

8 replies

rondev
Rank
Userlevel 7
Badge +22
Paste the below code in the look and feel -> general -> header -> source view (<>)

`<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>`

Paste the below code in the JS OnReady function of the open ended question

jQuery("#"+this.questionId+" .InputText").flatpickr({
enableTime: true,
noCalendar: true,
defaultTime: "H:i"
});
Ron Dev (DM for any request. Freelancer, surveysolution.in)
R
Rank
Userlevel 5
Badge +11

Hi rondev,
Regarding the above code, this doesn't work on mobile phone (eg. Android) as it seems the native time picker overrides flatpickr. On the flatpickr site, they talk about using the extra config line of 'disableMobile: true' but that doesn't seems to be working form me.

Do you have any advice on this. The native time picker would be fine except that I get seconds and milliseconds! I can't debug it as the mobile view of the Qualtrics preview system works as expected. I've tested it on a Samsung A5, Android 8.0 Chrome Browser. Please see pic.

SophieM do you see the same issue?

Hope you can help. Thanks.

Rod
Screenshot_20200629-210357_Chrome.jpg

rondev
Rank
Userlevel 7
Badge +22

Rod_Pestell , following your instruction, I updated the code as below and I was able to view the flat picker timer selection on my phone.
jQuery("#"+this.questionId+" .InputText").flatpickr({
    enableTime: true, 
    noCalendar: true, 
    defaultTime: "H:i",
disableMobile: true
    });

Ron Dev (DM for any request. Freelancer, surveysolution.in)
TomG
Rank
Userlevel 7
Badge +27

Rod_Pestell ,
disableMobile works when done like this:
jQuery("#"+this.questionId+" .InputText").flatpickr({
enableTime: true,
noCalendar: true,
defaultTime: "H:i",
disableMobile: true
});

R
Rank
Userlevel 5
Badge +11

Hi All,
This is my code:
jQuery("#"+this.questionId+" .InputText").flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
minuteIncrement: "15",
disablemobile: true});

TomG , I tried your code and it worked! I've spotted the problem - I was using disablemobile and not disableMobile.

Is there any difference between using dataFormat and defaultTime?

Thanks for the help. Can you provide any pointers and what software you use to help with the syntax and catching mistakes like this? I am essentially using the window within Qualtrics which is not easy to use or Notepad++.

On another note, is there a way to add a check box which instead of a time, the user can say it's not applicable and the words not applicable appear in the field instead of a time? Sorry this might be a new question!
Thanks
Rod

TomG
Rank
Userlevel 7
Badge +27

Rod_Pestell ,

Is there any difference between using dataFormat and defaultTime?

I just copied rondev's code from above and added to it. Not sure where defaultTime came from since it isn't in the docs. I would go with dateFormat.
Can you provide any pointers and what software you use to help with the syntax and catching mistakes like this? I am essentially using the window within Qualtrics which is not easy to use or Notepad++.

Use your browser's developer tools console. Although I'm not sure that typo would have generated an error. More likely, it would have just been ignored. If you want a code editor, I use Visual Studio Code (free, support for a number of languages).
On another note, is there a way to add a check box which instead of a time, the user can say it's not applicable and the words not applicable appear in the field instead of a time? Sorry this might be a new question!

I would use a multi-select multiple choice with allow text on the first choice (time) and an exclusive "Not applicable" as the second choice. Use JS to hide the time label and clear the time entry when not applicable is checked.


R
Rank
Userlevel 5
Badge +11

Hi TomG ,
Thanks for the reply and the advice. I was working on a matrix question (as there were 2 categories) so a text field and radio button and then hiding everything was becoming difficult. I'm no HTML nor JS developer. It's all self taught. It's very tedious to work out which elements need to be hidden plus there is no exclusive answer option on a matrix. So in the end I did two separate questions. :)
I'll look into Visual Studio Code. I'd love to find something that I can paste in some source or even just a url link (so that it takes into account the css code too) and simply click on an element and drag it about.

Thanks

Rod

W

rondev (or anyone who can answer),

I posted the coding into the header as listed. However, on my 2nd block in the survey, the timepicker is literally showing at the top of the page. How do I keep the timepicker in Block 1 but not have it show up at the top of Block 2. It doesn't show in Block 3 though (which I don't want it to).

Leave a Reply


Terms & Conditions