Asp.net jquery datepicker error
Using Jquery 1.3.1
and UI 1.7.x
is ok, but if you use 1.4.2
and UI 1.8.x
, you run into the error you describe.
<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>
a source to share
If you are using a partial date mask (with a 2-digit year), you will not face this problem.
But with a full date mask (4 digit year), this problem arises because the Datepicker parses a date with a 2 digit year as a valid date and calls the focus () method on the input, which calls the masked input to check the value against the full mask. detecting that it is an incomplete value and clearing it.
To fix this problem, you need to manually change the JUI Datepicker code.
If you are using the mini 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.
a source to share
I just solved it by adding trailing space to dateFormat jQuery UI datepicker. This does not allow 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");
a source to share
marcos.pont, this is a good hack, but:
It won't work if you want to use a 2-digit year somewhere.
It only works if you enter the date fast enough. Otherwise, it clears the field after entering the third digit of the year (for example, you want to enter 2010 and after "201" the field is cleared)
Here's the best solution, although it's a hack (two or four digits of the year work correctly, but you can't enter a 3-digit year (100-999). Since most of the time we only need a 2- or 4-digit year, there is a fix:
In the uninitialized version, find this code in the parseDate function:
case 'y':
year = getNumber('y');
and add
if(format.charAt(iFormat) == 'y' && year < 1000)return null;
between this code and break;
In the abridged version: Replace
case "y":c=m("y");break;
FROM
case "y":c=m("y");if(a.charAt(z)=='y'&&c<1000)return null;break;
a source to share
The date disappears because the input field loses focus when entering month / year digits. To prevent this, you can change the focus descriptor in jquery.maskedinput.js:
.bind("focus.mask", function() {
//add this condition
if ($(this).hasClass('hasDatepicker')) {
return;
}
...
}
a source to share