Show Current Date onclick using jquery datepicker

I am using the datepicker ui for jQuery. The calendar is loading fine. Now I want to fire an event showing the current date when I select a day. I am trying to use this but not having any luck.

The function looks like this:

$(document).ready(AllPageLoads);

    function AllPageLoads()
    {
        $('#datepicker').datepicker();
        $('table.games tbody tr.top').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
        $('table.games tbody tr.bottom').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
    }

    function EpicFail(response, status, error)
    {
        alert(response + " / " + status + " / " + error);

}
$('.selector').datepicker("option", "onSelect", function (d开发者_如何转开发ateText, inst) {
  alert(dateText);
 });

html:

<h2>Current Data</h2>

<div id="datepicker">
</div>

<p>All Times Pacific/p>
<table id="games" class="games">
    <thead> 
        <tr>
            <th>Date</th>
            <th>Data</th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
        </tr>
     </thead>
  <tbody>

  <tr class="left">

        <td>6/9/2011</td>

        <td>901</td>

        <td>Team1</td>

        <td>Payer1</td>

        <td>info1</td>

        <td>OFF</td>

        <td>OFF</td>

    </tr>

    <tr class="right">

        <td>4:05 PM</td>

        <td>902</td>

        <td>Team2</td>

        <td>Palyer2</td>

        <td>info2</td>

        <td>OFF</td>

        <td>OFF</td>

    </tr>
   </tbody>
</table>

---

It's not working because you initialized the datepicker at least once before what you are trying to do now. The binding (inside options as dictionary) you are using works only when initializing the first time.

Either move it to the 1st initialization statement or use:

$('.selector').datepicker("option", "onSelect", function (dateText, inst) {
                                                    alert(dateText);
                                                });

---

When you use $('.selector'). you are telling to jQuery: Look for the element who has class="selector" and perform this function.

But you don't have any element with this class name.

So, to solve the problem, simple add the code:

    function AllPageLoads()
    {
        $('#datepicker').datepicker({
           onSelect: function (dateText, inst) { alert(dateText); }
        });
        $('table.games tbody tr.top').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
        $('table.games tbody tr.bottom').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
    }