I want to trigger an event from clicking on a date in jQuery UI datepicker

I'm working on a site that uses jQuery datepicker. It works as a kind of wizard, where first you pick a service, then you pick an available date, then you pick an available time. As it stands, the 'next' button shows when datepicker's calendar intiates, and I'd like to keep it hidden until a date is picked. I've included a div called 'choose_a_date' as the point where I'd like it to hold until, well, a date is chosen.

jQuery:

<script type='text/javascript'>
 $(document).ready(function(){

        $('#date_panel,#time_panel,#confirm_panel').hide();
        $(".booking").click(function(){
        $('#svc_panel').fadeIn(function(){
        $('#date_panel,#time_panel,#confirm_panel').hide();

        });
    });


      $(".date_button").click(function(){
            $('#svc_panel,#time_panel,#confirm_panel,').h开发者_开发知识库ide();
            $('#date_panel').fadeIn(function(){
            });
      });

      $('.time_button').click(function(){
            $('#svc_panel,#date_panel,#confirm_panel').hide();
            $('#time_panel').fadeIn(function(){
            });
      });

      $('.confirm_button').click(function(){
            $('#svc_panel,#date_panel,#time_panel').hide();
            $('#confirm_panel').fadeIn(function(){
            });
      });

  });

</script>

HTML:

<div id="date_panel">

                        <p>Choose a date: <input id="datepicker" type="text"></p>

                        <div id="wait_for_date"><a href="#"  class="time_button">Next</a></div>

                    </div>

                    <div id="time_panel">

                        <div>Choose a time on: <span id="target"></span></div>

                        <table>

                            <tr>

                                <td class="confirm_button"><a href="#">11:30 am</a></td>

                            </tr>

                            <tr>

                                <td class="confirm_button"><a href="#">12:30 pm</a></td>

                            </tr>

                            <tr>

                                <td class="confirm_button"><a href="#">2:00 pm</a></td>

                            </tr>

                        </table>

                    </div>

Check out the documentation for the onSelect event

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});

Datepicker has onSelect which is called when a date is selected.

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});