hi there, 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 choosing 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.
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;
}
...
}