jQuery UI datetimepicker and ASP.NET CompareValidator for DataTypeCheck

Answer 09/07/2018 Developer FAQ 1

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 });
});

Answer1:

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.

Answer2:

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