j-query date-picker does not work after post back - asp.net

Question

I have a j-query date-picker that does not work after the first post back. It only works before the post back but the date-picker does not work after post back. the text-box that shows the date-picker is wrapped with ajax update panel. here is my j-query:
<script type="text/javascript">
$().ready(function () {
$('.date-picker').mousedown(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
});
</script>
<style type="text/css">
.ui-datepicker-calendar {
display: none;
}
</style>

Answer 1

Your issue is that on a partial post back, which is what happens when an UpdatePanel causes a post back, the DOM is not reloaded and thus your $().ready(function () { will not fire and wire up the date picker. This is one of those ASP.NET AJAX gotchas.
One way to deal with this is to have a JavaScript function invoked when the PageRequestManager does the partial post back via the UpdatePanel, like this:
<script type="text/javascript">
$().ready(function () {
$('.date-picker').mousedown(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// Re-bind your jQuery objects here
});
</script>
Note: This is one of those places where jQuery and ASP.NET AJAX do not play nice without a little tweaking.

Answer 2

You should use a rebind for every page load like this :
function pageLoad() {
$('#mydatepick').unbind();
$('#mydatepick').datepicker();
};