代码之家 › 专栏 › 技术社区 › frabiacca

ASP.NET jQuery日期选取器错误

datepicker jquery asp.net

frabiacca · 技术社区 · 14 年前

我在ASPX Web窗体中也成功地使用了带有屏蔽输入插件的jQuery日期选取器。我注意到了一个错误:当我通过在日历上选择一个日期并尝试手动修改它来插入一个日期时,日期突然消失了。

你见过这种行为吗?

5 回复 | 直到 14 年前

Eduardo Molteni 14 年前

使用 Jquery 1.3.1 和 UI 1.7.x 一切都很好,但如果你用 1.4.2 和 UI 1.8.x 你碰到了你描述的错误。

<html>
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" rel="Stylesheet" />-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/base/jquery-ui.css" type="text/css" rel="Stylesheet" />


    <script type="text/javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#masktest").mask("99/99/9999");
            $("#masktest").datepicker();
        });
    </script>    

</head>
<body>
  <p>Date: <input id="masktest" type="text" value="01/01/2010" /></p>
  <p>Other field: <input id="other1" type="text" value="" /></p>
  <p>Other field 2: <input id="other2" type="text" value="" /></p>
</body>
</html>

marcos.pont 14 年前

如果使用的是部分日期掩码(年份为2位数),则不会遇到此问题。

但使用完整日期掩码(4位年份)时,会发生此问题,因为datepicker将2位年份的日期解析为有效日期,并调用输入的focus()方法,这会导致屏蔽输入根据完整掩码验证值,从而确定该值不完整并将其清除。

要解决此问题,您需要手动更改jui datepicker的代码。

如果您使用的是JUI的缩小版本,请搜索此子字符串:

否则,如果(c<100)c+=(新日期).getfullyear()-(新日期).getfullyear()%100+(c<=e?0:-100);

然后从代码中删除它。

Mike Chu 14 年前

我刚通过在jquery ui日期选择器的日期格式中添加一个尾随空格来解决这个问题。这样可以防止编辑第三方库。为我出色地工作。

$("#StartDate").datepicker({
  dateFormat: "mm/dd/yy ",
  changeMonth: true,
  changeYear: true,
  showAnim: "fadeIn"
}).mask("99/99/9999");

Gorsky 14 年前

marcos.pont,这是一个很好的黑客,但是:

如果您想在某个地方使用2位数的年份,它将不起作用。

只有你输入的日期足够快,它才能工作。否则,它将在输入第3位年份后清除该字段(例如,您要输入2010,在“201”之后,该字段将清除)

这是一个更好的解决方案,尽管它也是一个黑客(两位数或四位数的年份都适用,但不能输入三位数的年份(100-999)。由于大多数情况下我们只需要2位或4位数字的年份功能,因此有一个解决方案:

非缩小版本 在ParseDate函数中查找此代码:

            case 'y':
                year = getNumber('y');

并添加

                if(format.charAt(iFormat) == 'y' && year < 1000)return null;

在这段代码和 断裂;

在缩微版本中: 替换

case "y":c=m("y");break;

用

case "y":c=m("y");if(a.charAt(z)=='y'&&c<1000)return null;break;

katrin 14 年前

当您键入月份/年份数字时,由于输入字段失去焦点,日期将消失。为了防止这种情况发生,可以在jquery.maskedinput.js中更改焦点句柄:

.bind("focus.mask", function() {
 //add this condition 
 if ($(this).hasClass('hasDatepicker')) {
  return;
 }
 ...
}