jQuery UI datetimepicker and ASP.NET CompareValidator for DataTypeCheck

I'm using an ASP.NET textbox with the jQuery UI datepicker. The textbox allows edits so that the user can enter a date manually or clear an existing entry. I added a CompareValidator to perform a data type check on the textbox and this causes an error after selecting a date with the datepicker. The error occurs in the ASP.NET client side validation:

Microsoft JScript runtime error: 'length' is null or not an object

the error occurs in ValidatorOnChange. How can I fix this? Is it possible to use datepicker with the ASP.NET validator controls?

My markup is:

<asp:Label runat="server" AssociatedControlID="uxInstallDate">Install Date</asp:Label> <asp:TextBox ID="uxInstallDate" runat="server" Columns="10" /> <asp:CompareValidator runat="server" ControlToValidate="uxInstallDate" Operator="DataTypeCheck" Type="Date" Text="*" ErrorMessage="Install Date must be a date." Display="Dynamic" />

Note that the missing ID attribute in the CompareValidator is intentional and adding it doesn't make a difference. My jQuery initialization is:

$(document).ready(function() { $("#<%= uxInstallDate.ClientID %>").datepicker({ changeMonth: true }); });


I think I found a solution. This is a bug that occurs in IE, not Firefox (I didn't test any other browsers). The solution was to override the onSelect method in the initialization:

$("#<%= uxInstallDate.ClientID %>").datepicker({ changeMonth: true, onSelect: function() { } });

I found a description of the issue and the solution here and an alternate solution here.


Base on the solution of Jamie and the alternate solution he provides, here is my workaround to bypass this strange bug that only occurs with IE.

I presume that a date selected by the datepicker control is a valid date so I hide the message or image error of the CompareValidator if it is visible.

$(".myControl").datepicker({ onSelect: function() { if ($.browser.msie) { if ($(this).next("span").css("display") != "none") { $(this).next("span").css("display", "none"); } } else { $(this).trigger('change'); } } });

Hope that help

人吐槽 人点赞



用户名: 密码:
验证码: 匿名发表


查看评论:jQuery UI datetimepicker and ASP.NET CompareValidator for DataTypeCheck