Question

I’ve got a very interesting bug with a jQueryUI datepicker and an UpdatePanel where the datepicker’s chosen date is about 100 years off. jQuery is version 1.6.2, and jQueryUI is version 1.8.14. Here’s the rough layout:

<asp:UpdatePanel ID="myUpdatePanel" runat="server">
  <ContentTemplate>
    <asp:DropDownList ID="myDdl" runat="server" AutoPostBack="true">
      <asp:ListItem Value="foo" Text="Foo" />
      <asp:ListItem Value="bar" Text="Bar" />
    </asp:DropDownList>
    <asp:TextBox ID="myText" runat="server" CssClass="dateText" />
  </ContentTemplate
</asp:UpdatePanel>
<script type='text/javscript'>
  $(document).ready(function()
  {
     $('.dateText').datepicker({ changeYear: true, showButtonPanel: true, yearRange: '-2:+2' });
  }

  function pageLoad(sender, args)
  {
    if (args._isPartialLoad == true)
    {
      $('.dateText').datepicker({ changeYear: true, showButtonPanel: true, yearRange: '-2:+2' });
    }
  }
</script>

So I’ve got an UpdatePanel that contains a dropdown that causes a postback when it’s changed, as well as a text box. I’ve got jQueryUI setting the textbox up as a datepicker. Note that all this is contained in a jQueryUI modal dialog.

So here’s what happens:

1. When the dialog opens, the dropdown is the default focus. Pressing a key on the keyboard will change the selection in the dropdown, but will not initiate postback.
2. After having changed the value of the dropdown with the keyboard, click in the textbox. The partial postback starts (because the dropdown lost focus) and the jQueryUI DatePicker comes up showing the current month and year (February 2012 as of writing).
3. The partial postback probably finishes before we have a chance to do anything with the datepicker.
4. After the postback completes, click one of the forward/backward month buttons on the datepicker. If you press backward, it goes to November 2010. If you press forward, it goes to January 2010.
5. After changing the month with the buttons, click a day in the calendar. The datepicker closes and puts a date in the textbox. If you pressed backward in step 4, the date is in November 1899. If you pressed forward in step 4, the date is in January 1900.

It seems that the datepicker gets confused when it’s initialized when it’s already open after the partial postback. I know that the datepicker setup doesn’t survive the partial postback and that I need to reinitialize it in the pageLoad function.

I can tell if this is happening by checking if $('.ui-datepicker-title').length is greater than zero when setting up the datepicker in pageLoad. But I don’t know what to do from there. After verifying that it’s happening, I’ve tried the following in pageLoad before setting up the datepicker:

• $('.dateText').unbind();
• $('.dateText').datepicker('destroy');
• $('#ui-datepicker-div').remove();

It either does the same thing or closes itself and doesn’t come up at all anymore.

How can I fix this?

Update: I tried it with jQueryUI 1.8.18 and jQuery 1.7.1 (latest versions at time of writing) and the problem still happens.

Update 2: I’ve managed to work around the problem by supplying a function in the options for onChangeMonthYear when the datepicker is initialized in pageLoad. If the year parameter of that event is either 1899 or 1900, I set the datepicker’s date to one month back or forward from now (respectively). That sets the textbox’s content, which I don’t want, so I then set the value of the textbox to ”. The net result is that the datepicker acts normally.

I’d still like to understand this whole problem better, though, so I know if it’s a bug in jQueryUI that I should file or whether I should be doing something different elsewhere.

Update 3: Still happening with ASP.NET 4, jQuery 1.7.2 and jQueryUI 1.8.21. I tested it on an otherwise blank page with a setup just like what’s described here, and saw the same behavior. I’m calling this a jQueryUI bug. It’s filed here.

UPDATE 4: I’ve reproduced the problem without ASP.NET in this jsfiddle.

Answer 1

According to comments on the jQueryUI bug I filed, this is not a situation that should ever really happen. But I think it’s going to, so I’m going to post my workaround here for future reference.

Given an input with ID myInput:

var changingDate = false;
$('#myInput').datepicker({onChangeMonthYear:function(year, month, inst)
  {
    if (changingDate == false)
    {
      changingDate = true; //I set the date later which would call this
          //and cause infinite recursion, so use this flag to stop that
      if (year == 1899 || year == 1900)
      {
        var now = new Date(); //what the picker would have had selected
            //before clicking the forward/backward month button
        if (year == 1899) //I clicked backward
        {
           now.setMonth(new.getMonth() - 1);
        }
        else if (year == 1900) //I clicked forward
        {
           now.setMonth(now.getMonth() + 1);
        }
        $(this).datepicker('setDate', now);
      }
      changingDate = false;
    }
    }
  });

Use the onChangeMonthYear option shown above when initializing the picker from the pageLoad function:

function pageLoad(sender, args)
{
  if (args._isPartialLoad == true) //called because of UpdatePanel refresh
  {
    //set up datepicker as shown above
  }
}