Hi All, Ok, nutty dilemma with a time picker and calendar dates. First, some back story!
I've got a week view of a calendar (Sun -Sat) showing events and times that opens into a lightbox-type window. This calendar is just a table created by a loop that runs for each day of the week. It is basically a "datepicker on steroids" to enable us to view our consultants current schedule so we can properly schedule new appts for them. Each day has a jquery time picker (clock icon and associated input box) and a plus sign icon. What I'm shooting for is, after deciding on a day to set the appt for, the user clicks the time picker clock (which is the only thing showing initially). They would choose a time and then the time picker input box would become visible and contain the chosen time along with the plus sign icon becoming visible. So far, everything above works! Where I slip into FailMode is: how do I pass the date and time back to date and time fields on the parent page and close the window when the user clicks the plus sign icon for the chosen day? Bonus Challenge: If a user selects a time for a particular day but then decides on another day instead before closing the window, how do I clear all time picker fields except the one for the chosen day so that I'm always only passing the one set of values to the parent? The code below is all run in a loop hence the #dtNum# var I use to create unique names for all elements for each day. #dtNum# is a ColdFusion var that starts at "1" so the elements are named 1-7 for each day i.e "plusicon1", 1 is always Sun, 7 is always Sat. The doubled up pound signs are required as escape characters for ColdFusion. There may be WAY better ways to do what I'm doing but that's why I'm here. :-) THX! <img src="images/add.png" id="plusicon#dtNum#" alt="Click to choose this day" width="16" height="16" border="0" align="absmiddle" /> <script type="text/javascript"> $(document).ready(function() { $('##timefield#dtNum#').hide(); $('##plusicon#dtNum#').hide(); $("##clockpick#dtNum#").clockpick({ starthour:6, minutedivisions:2, valuefield:'timefield#dtNum#'', layout:'vertical' },cback); function cback() { $('##timefield#dtNum#').fadeIn(1000); $('##plusicon#dtNum#').fadeIn(1000); } }); </script> <input class="CP_input" type="text" id="timefield#dtNum#" name="timefield#dtNum#" value="" size="8" /><img src="../images/ clock.png" alt="Select Time" width="16" height="16" align="absmiddle" id="clockpick#dtNum#" title="Select Time" />