Clock / Time Input Question | XM Community
Skip to main content
Solved

Clock / Time Input Question


Forum|alt.badge.img
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

Best answer by TomG

@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:

 

View original

14 replies

Michael_Campbell_RedPepper
QPN Level 3 ●●●
Forum|alt.badge.img+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.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5938 replies
  • March 21, 2018
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.

Michael_Campbell_RedPepper
QPN Level 3 ●●●
Forum|alt.badge.img+3
There we go. I like @TomG 's response. (Saving cleave.js for future reference)

RTSullivan
Level 2 ●●
Forum|alt.badge.img+1
  • Level 2 ●●
  • 22 replies
  • March 23, 2018
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.

Forum|alt.badge.img+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!

LaurenK
Former XM Community Team Member
Forum|alt.badge.img+13
  • Former XM Community Team Member
  • 900 replies
  • August 15, 2018
Hey @klcar_dart! Be sure to use @ to properly tag and notify another user!

Forum|alt.badge.img+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!

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5938 replies
  • August 15, 2018
> @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.

Forum|alt.badge.img+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!

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5938 replies
  • August 15, 2018
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(); ```

Forum|alt.badge.img+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?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5938 replies
  • February 7, 2022

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.


Forum|alt.badge.img
  • 1 reply
  • January 12, 2024
TomG wrote:

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.


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5938 replies
  • Answer
  • January 13, 2024

@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