[jQuery] Nutty dilemma with a time picker and calendar dates

[MikeyJ]

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" />