I'm using Jon Thornton's jQuery timepicker (http://jonthornton.github.io/jquery-timepicker/) for the time field in a form, but I've recently decided that I need to make the field readonly so that users can't enter any text other than the times in the picker. However, when I add the readonly attribute to the time input field, the timepicker no longer works - it doesn't appear when I click on the field.
I'm a little confused, because I am also using a jQuery calendar on another field that is set to readonly, and that works just fine. Can anyone help me out?
<head>
<!--DATEPICKER-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!--TIMEPICKER-->
<script type="text/javascript" src="jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />
<script>
$(function(){
$("#date").datepicker({maxDate: "+0D" , dateFormat: "yy-mm-dd"});
$("#time").timepicker();
});
</script>
</head>
...
<input type="text" name="date" id="date" readonly="true">
<input type="text" name="time" id="time" readonly="true">
Thanks very much.
Thanks to @oMiKeY for helping me out with this. The main problem was that I was using an outdated version of the timepicker. After I switched to an updated version, I was able to set the disableTextInput option to true, which did the trick.
It seems that disableTextInput had been included in older versions but then was removed in favor of a select-style list, but then later reinstated. I needed the input type to remain text, though, because the user can either select a time from the list or get their current time from a button click.
EDIT - I've noticed that making this change causes the timepicker to fail when using Chrome on my iPhone 5s. It does work when using Safari, though, and seems to work for Chrome on Android.