I have the following html code that works as is: (I've tried the two answers given below but neither of them work any other suggestions would be appreciated)
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
<script src="http://bililite.nfshost.com/inc/jquery.timepickr.js"> </script>
</head>
<body>
<script type="text/javascript">
$(function()
{
$('#timepickr-start:eq(0)').timepickr
({
convention: 12,
hoverIntent: false
})
});
</script>
<script type="text/javascript">
$(function()
{
$('#timepickr-end:eq(0)').timepickr
({
convention: 12,
hoverIntent: false
})
});
</script>
<div>
<input id="timepickr-start" name='start' />
</div>
<br>
<div>
<input id="timepickr-end" name='end' />
</div>
</body>
</html>
Is there a way to have just one function? I'm using php and getting back $_POST['start'] and $_POST['end']. It's not much of a problem when I have only two time input fields but on some pages I have 6 or 8. php jquery
FIRST SUGGESTION:
If you would like to initialize multiple timepicker instances with a single javascript function, you could add a class, let's say timepickr, to each instance to initialize, and use the folowing function:
<script type="text/javascript">
$(function()
{
$(".timepickr").each(function() {
$(this).timepickr({
convention: 12,
hoverIntent: false
});
});
});
</script>
Hi, thanks for the suggestion but it didn't work. Not sure how to proceed. btw, the example above was missing a }) but even with that added in it doesn't work
SECOND SUGGESTION:
1.Create a common class for all the required fields and add the function to that class like this:
$('.classname').timepickr({
convention: 12,
hoverIntent: false
});
OR
2.Use the attribute starting with selector
$("input[id^='timepickr']").timepickr({
convention: 12,
hoverIntent: false
});
The second method could prove more feasible in case you have several such input fields and you don't wanna bother adding a class to each field.
I tried the first way with the class name and that works for the first input but not any of the subsequent inputs –
On your second method is that part of the function as in: $(function() { $("input[id='timepickr']").timepickr ({ convention: 12, hoverIntent: false }) }); or something else - I need to pass in :eq(0) so I don't think this will work either –