我想通过单击 jQuery UI 日期选择器中的日期来触发事件

Question

我正在开发一个使用 jQuery 日期选择器的网站。它就像一种向导一样工作，首先您选择一项服务，然后选择一个可用日期，然后选择一个可用时间。按照目前的情况，“下一个”按钮会显示日期选择器的日历何时启动，我想将其保持隐藏状态，直到选择日期为止。我添加了一个名为“choose_a_date”的 div，作为我希望它保留到选择日期为止的位置。

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>

Answer 1

查看 onSelect 事件的文档

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

Answer 2

Datepicker 有 onSelect ，当选择日期时会调用它。

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