CODEWITHSUNDEEP
jqueryeventstriggersdatepicker
Adam
Adam

Reputation: 1022

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,').hide();
            $('#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>

Upvotes: 0

Views: 2037

Answers (2)

Mike Ruhlin
Mike Ruhlin

Reputation: 3556

Check out the documentation for the onSelect event

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

Upvotes: 2

James Montagne
James Montagne

Reputation: 78690

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

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

Upvotes: 1

Related Questions