Clock / Time Input Question | XM Community
Solved

Clock / Time Input Question


Badge
Hi all,

We are asking respondents to let us know what time of day they do certain things and we therefore want them to input the hour and minutes for each item.

We'd rather not leave this to an open-text answer, and are currently torn on the best way to handle this from both a respondent and data analysis perspective.

Thanks in advance for any help you can provide!

Steve
icon

Best answer by TomG 13 January 2024, 15:53

View original

14 replies

Userlevel 4
Badge +3
Yeah! In the validation options, select Custom Validation, and then provide a Regular Expression (RegEx) for time:

!

The expression you'll want to put in is as follows:

`^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$`

This is a complicated topic, but regular expressions checks to see if the values match a specific pattern as above.
Userlevel 7
Badge +27
A validity check with regex will work, but it isn't very respondent friendly. They won't find out they've made an error until they click the next button. An alternative would be to use JavaScript and integrate cleave.js as discussed here so that they can't type it wrong to begin with.
Userlevel 4
Badge +3
There we go. I like @TomG 's response. (Saving cleave.js for future reference)
Badge +1
You may want to use javascript to trigger a time picker. I have used this one before: amsul.ca/pickadate.js/time/

Another cool thing you can do is use jquery and the Modernizr library to try and detect if the device is mobile and if it is, trigger the native time pickers.
Badge +3
RTSullivan - that's exactly what I need to do for my survey. Thanks for the sample code (from amsul.ca/pickadate.js/time/). I am a novice and tried using this code (copied and pasted as-is into Qualtrics) but keep getting the error "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token :"

Can you provide an example? or further guidance on how to implement this? Thanks!
Userlevel 7
Badge +13
Hey @klcar_dart! Be sure to use @ to properly tag and notify another user!
Badge +3
> @RTSullivan said:
> You may want to use javascript to trigger a time picker. I have used this one before: amsul.ca/pickadate.js/time/
>
> Another cool thing you can do is use jquery and the Modernizr library to try and detect if the device is mobile and if it is, trigger the native time pickers.

@RTSullivan - that's exactly what I need to do for my survey. Thanks for the sample code (from amsul.ca/pickadate.js/time/). I am a novice and tried using this code (copied and pasted as-is into Qualtrics) but keep getting the error "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token :"

Can you provide an example? or further guidance on how to implement this? Thanks!
Userlevel 7
Badge +27
> @klcar_dart said:
> RTSullivan - that's exactly what I need to do for my survey. Thanks for the sample code (from amsul.ca/pickadate.js/time/). I am a novice and tried using this code (copied and pasted as-is into Qualtrics) but keep getting the error "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token :"
>
> Can you provide an example? or further guidance on how to implement this? Thanks!

2klcar_dart - That is a JavaScript syntax error. It is seeing a colon where it shouldn't. Maybe you have a colon where you should have a semi-colon. Other causes could be mismatched quotes, a missing paren, etc. You can comment out portions of your code between /* and */ to narrow down the location of the issue.
Badge +3
> @TomG said:
> > @klcar_dart said:
> > RTSullivan - that's exactly what I need to do for my survey. Thanks for the sample code (from amsul.ca/pickadate.js/time/). I am a novice and tried using this code (copied and pasted as-is into Qualtrics) but keep getting the error "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token :"
> >
> > Can you provide an example? or further guidance on how to implement this? Thanks!
>
> 2klcar_dart - That is a JavaScript syntax error. It is seeing a colon where it shouldn't. Maybe you have a colon where you should have a semi-colon. Other causes could be mismatched quotes, a missing paren, etc. You can comment out portions of your code between /* and */ to narrow down the location of the issue.

Thanks for the tip, @TomG! I was able to eliminate the error message by changing all of the commas to semi-colons, but the feature I'm trying to achieve still wont work / doesn't appear when I preview the survey. I think I'm stuck on step zero (http://amsul.ca/pickadate.js/time/) "The basic setup requires targeting an input element and invoking the picker." I'm not sure where in Qualtrics to specify this code: $('.timepicker').pickatime().

I should reiterate I am very much a novice, and greatly appreciate your help!
Userlevel 7
Badge +27
Most probably $ is shortcut for jQuery in the example you are looking at. In Qualtrics you need to spell out jQuery. .timepicker is a class that isn't used in Qualtrics, so you need a selector to find the input field you want to attach the time picker to. So, in its place you probably need:
```
jQuery("#"+this.questionId+" .InputText").pickatime();
```
Userlevel 2
Badge +5

https://community.qualtrics.com/XMcommunity/discussion/comment/5048#Comment_5048Hi Tom,
I am a complete novice in JS and a beginner in Qualtrics. would it be possible to post a .qsf of the time picker you have mentioned?

Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/43450#Comment_43450I've never used the pickatime library referred to above. I recommend flatpickr for date and time picking. Here is a post on integrating it.

Badge

https://community.qualtrics.com/XMcommunity/discussion/comment/43450#Comment_43450I've never used the pickatime library referred to above. I recommend flatpickr for date and time picking. Here is a post on integrating it.

@TomG Hi Tom, I’m not sure if I’m lost but the hyperlink you provided with the ‘Here’ in your previous response seems to lead me to an irrelevant forum about Qualtrics timing out with no mention of flatpickr. Your response from five years ago about cleave.js also provides a hyperlink that leads me to a seemingly irrelevant Qualtrics forum with no mention of cleave.js.

Trying to learn how to integrate cleave.js or flatpickr into my surveys.

Userlevel 7
Badge +27

@MMLab,

Links to old posts were messed up when Qualtrics switched to a different Community platform.

Here are a couple of posts that have what you are looking for:

Flatpickr: 

Cleave:

 

Leave a Reply