Question: I have a jquery ui datepicker textbox within an update panel. For some reason I can no longer click on it to load the datepicker. This is what I have.

```
// Datepicker settings
$('body').on('load', '#dpWorkWeek', function() {
    $(this).datepicker({
        changeMonth: true,
        changeYear: true,
    });
});

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
      <asp:TextBox ID="dpWorkWeek" runat="server" ClientIDMode="Static" CssClass="dpWorkWeek"></asp:TextBox>

 </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadTimesheet" />
</Triggers>

```

Answer: 
Yeah, the JQuery datepicker doesn't work well in an update panel. 

The problem is because the fields lose their bindings because your `body` `onLoad` function isn't called when the `UpdatePanel` triggers. So you have a few options:

* Move the entire field outside the update panel
* If you can't simply move it outside the update panel, you can use an alternate field, and JQuery will update both fields when the date value changes
	+ The problem with this approach, ignoring the fact that you need two fields, is that the popup datepicker will actually appear attached to/near the normal field, which may be a long way away from the update panel.
* Rebind the datepicker on every postback
	+ The problem with this approach is that if the update panel is triggered while the datepicker is open, the datepicker closes. If this is likely to occur, you'd have to write some logic to detect when it opens/closes, and reopen it after binding it (if necessary).

If the `UpdatePanel` doesn't fire on a timer or anything the problem with the last approach might not matter to you. To use the "always rebind" method, move the initialization into the javascript function `pageLoad()`:

```
function pageLoad(sender, args)
{
    // Fix the datepicker here
}

```

**EDIT:** Yes, the `pageLoad` function is called on all postbacks, even though the name seems to imply otherwise.
This is working in my code please follow this code. 

```
( Company : Infotrack Telematics private limited )
<script type="text/javascript">
        $(document).ready(function () {

                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

        });

        function endRequestHandler(sender, args) {
            init();
        }

        function init() {
            var txtTripStartTime = '#<%=txtNotavlFrom.ClientID %>';
                $('#<%=txtNotavlFrom.ClientID %>').datepicker({
                    dateFormat: 'dd/mm/yy',
                    minDate: 0,
                    beforeShow: function () {
                        $(".ui-datepicker").css('font-size', 10)
                    },
                    onSelect: function (selected) {
                        $('#<%=txtnotavlTo.ClientID %>').datepicker("option", "minDate", selected)

        }

    });
        var txtTripEndTime = '#<%=txtnotavlTo.ClientID %>';
                $('#<%=txtnotavlTo.ClientID %>').datepicker({

                    dateFormat: 'dd/mm/yy',
                    minDate: 0,
                    beforeShow: function () {
                        $(".ui-datepicker").css('font-size', 10)
                    }

                });
            }

```