Using Cleave.Js for time spent hh;mm

Sorry, I should have also added the original Cleave.Js code that I adapted mine from was: 

var cleave = new Cleave('.input-element', {
    time: true,
    timePattern: ['h', 'm']

Remove the extra ] from the last line. Instead of })]; it should be });.

Also cleave doesn’t accept a jQuery object as an argument. Get the html contained within the lastInput object with .get(0).

Thanks for responding Tom - I actually did adapt my code based on yours in another thread. I had the extra bracket since an earlier error suggested that there was one open bracket that needed resolving.

I adapted the code based on your suggestion (if I understood it correctly), 

{
	var lastInput = jQuery("#"+this.questionId+".InputText:last").get(0);
	     new Cleave (lastInput, { 
    time: true,
    timePattern: ['h', 'm'] 

});

but the error now is ‘Unexpected end of input’. Any idea why? 

The whole thing should be:

Qualtrics.SurveyEngine.addOnReady({
	var lastInput = jQuery("#"+this.questionId+".InputText:last").get(0);
	var cleave = new Cleave (lastInput, { 
        time: true,
        timePattern: ['h', 'm']
    }); 
});

Thank you so much - the code was accepted. However, strangely, when previewing the question, the response doesn’t adhere to the code - I am able to type anything in, including letters, and the separator between h and m does not appear. 

Did you load the cleave.js library in your survey header?

Yes! That’s what’s missing - I had the flatpickr library in the header instead. Would it be the same as the one used for flatpickr with cleave.js inserted instead? Cannot locate any thread that provides the code for loading the cleave.js script in. 

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

There is no stylesheet associated with cleave. The best thing to do is go to jsdelivr.net, search for cleave, and then let it configure the necessary html for you that you can copy to your survey.

Thank you again Tom for directing me to that resource - I was able to generate the html for cleave.js and insert it into the header

<script src="https://cdn.jsdelivr.net/npm/cleave.js/dist/cleave.min.js"></script>

but alas, the question is still not showing any signs that it has been coded. I’m so confused.

It’s worked! Thank you so much for all your help, much appreciated :)

-Ahuti 

Thanks for this thread guys, very useful at my end.

Just a question @TomG  - is there any data security risk you’re aware of in using the cleave js library and associated js code in a survey that collects sensitive information? I’m a bit of a newbie so sorry if this is a silly question.

Thanks!

Nothing I am aware of.  It is open source, so you could examine it.