asp.net jquery datepicker bug
i'm using successfully a jquery datepicker with masked input plugin too in a aspx webform. I've noticed a bug: when i insert a date by ch开发者_运维百科oosing it on the calendar and then i try to modify it manually, the date suddenly disappears.
Have u ever seen this behaviour?
Using Jquery 1.3.1 and UI 1.7.x everything is fine, but if you use 1.4.2 and UI 1.8.x you hit the bug you are describing.
<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>
If you're using a partial date mask (with 2 digit year), you won't experience this problem.
But with a full date mask (4 digit year), this issue happens because Datepicker parses a date with 2 digit year as a valid date and calls the focus() method of the input, which causes masked input to validate the value against the full mask, determining that it's an incomplete value and clearing it.
To fix this issue, you'll need to manually change the code of JUI Datepicker.
If you're using the minified version of JUI, search for this substring:
else if(c<100)c+=(new Date).getFullYear()-(new Date).getFullYear()%100+(c<=e?0:-100);
And then remove it from the code.
I just solved this by adding a trailing space to the dateFormat of the jQuery UI datepicker. This keeps one from editing a third-party library. Worked brilliantly for me.
$("#StartDate").datepicker({
dateFormat: "mm/dd/yy ",
changeMonth: true,
changeYear: true,
showAnim: "fadeIn"
}).mask("99/99/9999");
marcos.pont, that's a good hack but:
It will not work if you want to use 2-digits year somewhere.
It works only if you type-in the date fast enough. Otherwise it clears the field after 3rd digit of year entered (for example, you want to enter 2010, and after '201' the field will clear)
Here is a better solution, though it's a hack as well (two or four digit years works right both, but you cannot enter 3 digit year (100-999). As most of the time we only need 2- or 4-digit year functionality, there is a fix:
In non-minified version find this code in parseDate function:
case 'y':
year = getNumber('y');
and add
if(format.charAt(iFormat) == 'y' && year < 1000)return null;
between that code and break;
In minified version: Replace
case "y":c=m("y");break;
With
case "y":c=m("y");if(a.charAt(z)=='y'&&c<1000)return null;break;
The date disappears because the input field looses focus when you type month/year digits. To prevent this you can change focus handle in jquery.maskedinput.js:
.bind("focus.mask", function() {
//add this condition
if ($(this).hasClass('hasDatepicker')) {
return;
}
...
}
加载中,请稍侯......
精彩评论