ASP.NET 部分回发期间打开时的 jQueryUI 日期选择器行为 : year becomes 1899 or 1900

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

我在 jQueryUI 日期选择器和 UpdatePanel 中遇到了一个非常有趣的错误,其中日期选择器选择的日期大约是 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 将文本框设置为日期选择器。请注意,所有这些都包含在 jQueryUI 模式对话框中。

所以发生的事情是这样的:

  1. 当对话框打开时,下拉菜单是默认焦点。按键盘上的按键将更改下拉列表中的选择,但不会启动回发。
  2. 使用键盘更改下拉列表的值后,单击文本框。部分回发开始(因为下拉菜单失去焦点),并且 jQueryUI DatePicker 出现,显示当前月份和年份(截至撰写本文时为 2012 年 2 月)。
  3. 部分回发可能会在我们有机会使用日期选择器执行任何操作之前完成。
  4. 回发完成后,单击日期选择器上的向前/向后月份按钮之一。如果您向后按,则会转到 2010 年 11 月。如果您向前按,则会转到 2010 年 1 月。
  5. 使用按钮更改月份后,单击日历中的某一天。日期选择器关闭并将日期放入文本框中。如果您在步骤 4 中向后按,则日期为 1899 年 11 月。如果您在步骤 4 中向前按,则日期为 1900 年 1 月。

日期选择器在部分回发后已经打开的情况下初始化时似乎会感到困惑。我知道日期选择器设置无法在部分回发后继续存在,并且我需要在 pageLoad 中重新初始化它。功能。

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

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

它要么做同样的事情,要么自行关闭并且根本不再出现。

我该如何解决这个问题?

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

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

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

更新 3:ASP.NET 4、jQuery 1.7.2 和 jQueryUI 1.8.21 仍然会发生这种情况。我在一个空白页面上使用与此处描述的设置相同的设置对其进行了测试,并看到了相同的行为。我将此称为 jQueryUI 错误。已提交here .

更新 4:我在 this jsfiddle 中重现了没有 ASP.NET 的问题.

最佳答案

根据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;
    }
    }
  });

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

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

关于ASP.NET 部分回发期间打开时的 jQueryUI 日期选择器行为 : year becomes 1899 or 1900,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9470736/

相关文章:

jquery-ui - 为什么我使用 jQuery UI 会得到 "Type Error Dialog is not a Function"?

jquery - 导航栏上的 Logo 溢出(Bootstrap 3)

c# - Web API 2 路由属性在一个 Controller 中起作用,但在另一个 Controller 中不起作用

javascript - Jquery 计算正确的容器大小

c# - 如何实现 ASP.Net 复合服务器控件的 ClientInstanceName 属性

asp.net - 本地主机上的 jQuery 脚本缓存

javascript - 如何模拟 Jquery UI API?

javascript - 更新到 1.11.0 后,自动完成要求您在 iOS 中单击两次

javascript - Ajax 加载脚本上的 Jquery 变量作用域

javascript - addClass 函数无法使用 JQuery