在ASP.NET部分回发期间打开时的jQueryUI datepicker行为:年份变为1899或1900

时间:2012-02-27 19:07:28

标签: jquery asp.net jquery-ui updatepanel jquery-ui-datepicker

我有一个非常有趣的错误,它有一个jQueryUI datepicker和一个UpdatePanel,其中datepicker的选择日期约为100年。 jQuery是版本1.6.2,jQueryUI是版本1.8.14。这是粗略的布局:

<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>

所以我有一个UpdatePanel,它包含一个下拉列表,当它被更改时会导致回发,以及一个文本框。我有jQueryUI将文本框设置为datepicker。请注意,所有这些都包含在jQueryUI模式对话框中。

所以这就是发生的事情:

  1. 对话框打开时,下拉列表是默认焦点。按键盘上的某个键将更改下拉列表中的选择,但不会启动回发。
  2. 使用键盘更改下拉列表的值后,单击文本框。部分回发开始(因为下拉失去焦点)和jQueryUI DatePicker出现显示当前月份和年份(2012年2月撰写)。
  3. 在我们有机会对datepicker做任何事情之前,部分回发可能会结束。
  4. 回发完成后,单击日期选择器上的一个前进/后退月份按钮。如果您向后按,则会转到2010年11月。如果按向前,则会转到2010年1月。
  5. 使用按钮更改月份后,单击日历中的某一天。 datepicker关闭并在文本框中输入日期。如果在步骤4中向后按,则日期为1899年11月。如果在步骤4中向前按,则日期为1900年1月。
  6. 似乎日期选择器在部分回发后已经打开时初始化时会感到困惑。我知道datepicker设置不能在部分回发中存活,我需要在pageLoad函数中重新初始化它。

    我可以通过在$('.ui-datepicker-title').length中设置日期选择器时检查pageLoad是否大于零来判断是否发生这种情况。但我不知道该怎么做。在验证它发生后,我在设置datepicker之前在pageLoad中尝试了以下内容:

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

    要么做同样的事情,要么自行关闭,不再出现。

    我该如何解决这个问题?

    更新:我尝试使用jQueryUI 1.8.18和jQuery 1.7.1(编写本文时的最新版本),问题仍然存在。

    更新2 :我在onChangeMonthYear初始化datepicker时,通过在pageLoad选项中提供函数,设法解决了这个问题。如果该事件的年份参数是1899或1900,我将日期选择器的日期设置为从现在开始一个月或向前(分别)。这设置了我不想要的文本框内容,因此我将文本框的值设置为''。最终结果是日期选择器正常运行。

    我仍然希望更好地理解这整个问题,所以我知道是否应该提交jQueryUI中的错误,或者我是否应该在其他地方做一些不同的事情。

    更新3 :仍然在ASP.NET 4,jQuery 1.7.2和jQueryUI 1.8.21中发生。我在一个其他空白页面上测试了它,其设置就像这里描述的那样,并且看到了相同的行为。我称之为jQueryUI错误。它已归档here

    更新4:我在this jsfiddle中没有使用ASP.NET重现了这个问题。

1 个答案:

答案 0 :(得分:5)

根据对the jQueryUI bug I filed的评论,这不应该是真正发生的情况。但我认为它会发生,所以我将在此发布我的解决方法以供将来参考。

给定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;
    }
    }
  });

onChangeMonthYear函数初始化选择器时,使用上面显示的pageLoad选项:

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