Set time by JavaScript

[Erando89]

Hi Andy,

now I need to set the time using JavaScript. Therefore I've written these two lines of code:

$input.val("08:00");
$input.parent().find('canvas:first').trigger('mousemove'); // repaints canvas

As you can see I am setting the time of the input field and then try to repaint your canvas by triggering the mousemove event. This works fine on desktops and tablets but fails on smartphones (e.g. Android 6.0.1 Chrome 63.0). I guess there's no such thing as mouse events on smartphones. So a function to repaint/refresh your timepicker would be of great help.

Thanks for your awesome timepicker though!

Best regards

Andi

[loebi-ch]

Hi Andi

Thank you for your precious input.

Please update to version 2.1.4 and use the following code to change the input's value at runtime:

$input.clockTimePicker('value', '08:00');

Cheers, Andy

[Erando89]

Thank you Andy. It works just like my approach even though it's a lot handier und prettier than mine.
The problem on mobile devices remains though. As you can see in my screenshot the time doesn't get selected properly.

Do you think you could provide a solution which works on mobile devices as well?

[loebi-ch]

I tested on my mobile phone and it works like a charm... hmmm... I think you have cleared your browser cache on your mobile phone?!
Can you provide me with a test URL to see you problem in action?

[Erando89]

Alright: http://ramm-stein.de/test.html.

Deleting all data of my browser didn't do the trick.

[loebi-ch]

Alright, thank you for the link. I could reproduce your issue and I could find the problem and a possible solution.

This click event is not fired on the mobile phone (don't ask me why?!?):

$('.clockTime').on('click', setDefaultTimeValue);

An alternative to call your callback function is to use the onOpen event:

var clockTimePickerOptions = {
	precision: 15,
	i18n: {
		cancelButton: 'Abbrechen',
		okButton: 'OK'
	},
	onOpen: setDefaultTimeValue
};

[Erando89]

Damn it, that's been the problem. Thank you so much!