2 (or more?) datepickers and "disable"
I've been trying to figure this on my own, but searching the list
doesn't seem to show anyone else having the same problem so possibly
it's me doing something silly...
I was creating a page wth 2 datepickers (with id's of start_date and
end_date) and I wanted to disable #end_date until a date had been
chosen for #start_date by initially doing
$("#end_date").datepicker("disable");
in the $(document).ready function, then enabling it in the onClose
function of #start_date if a date had been chosen.
This works as I want it to (#end date is indeed disabled), but I
noticed that after calling datepicker("disable") both the img tags for
the button images had had "opacity: 0.5" so both looked disabled. On
setting the #start_date and the onClose function calling $
("#end_date").datepicker("enable") the opacity was set to 1 for both
img tags.
Further checking showed that with "buttonImageOnly: false", the
buttons created are also being affected in a similar way.
The code below should hopfully show the problem (after adjusting for
the included file locations, and changing buttonImage: to show some
local image).
Enabling #start_date also affects the image for #end_date without
reenabling the datepicker.
Any sugestions on how to solve this would be greatly appreciated, as
I'm relatively new to jQuery and might be missing the obvious.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/ui.datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript" src="/jquery/jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var datepicker_options = {
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
};
$("#start_date").datepicker(datepicker_options);
$("#end_date").datepicker(datepicker_options);
$("#end_date").datepicker("disable");
// $("#start_date").datepicker("enable");
}
)
</script>
<title>Datepicker test</title>
</head>
<body>
<div id="container">
<input type="text" size="10" value="" name="start_date"
id="start_date" />
to
<input type="text" size="10" value="" name="end_date"
id="end_date" />
</div>
</body>
</html>