Ajax Toolkit Calendar Extender Error

Question

I have an asp.net website deployed to a staging server and a production server. On my staging server the calendar extender works fine. However, it comes up a blank calendar and I get a java script error on my production server. Both have the same exact code deployed (minus connection strings in web config), the same versions of .NET, and the same versions of the AjaxControlToolkit dll. The java script error it is throwing is a little strange as there seem to be no null values like it indicates: "Uncaught TypeError: Cannot read property 'getFullYear' of null at Sys.Extended.UI.CalendarBehavior._parseTextValue ."

Production Server:

Error:

ScriptResource.axd?d=NISXSzp87hD3qcCkP6NEPuF9CcnK5I-ufPjsh34laJN_X0aVHxlrSCRTcuVNdBlHJPhDZIUvEREh5VBuThlsgo_BghBpg0ddHeQysAHm-fvIzsJbjZge0NiahMLqHuR00&t=ffffffff949e5296:1 Uncaught TypeError: Cannot read property 'getFullYear' of null at Sys.Extended.UI.CalendarBehavior._parseTextValue (ScriptResource.axd?d=NISXSzp87hD3qcCkP6NEPuF9CcnK5I-ufPjsh34laJN_X0aVHxlrSCRTcuVNdBlHJPhDZIUvEREh5VBuThlsgo_BghBpg0ddHeQysAHm-fvIzsJbjZge0NiahMLqHuR00&t=ffffffff949e5296:1) at Sys.Extended.UI.CalendarBehavior.get_selectedDate (ScriptResource.axd?d=NISXSzp87hD3qcCkP6NEPuF9CcnK5I-ufPjsh34laJN_X0aVHxlrSCRTcuVNdBlHJPhDZIUvEREh5VBuThlsgo_BghBpg0ddHeQysAHm-fvIzsJbjZge0NiahMLqHuR00&t=ffffffff949e5296:1) at Sys.Extended.UI.CalendarBehavior._getEffectiveVisibleDate (ScriptResource.axd?d=NISXSzp87hD3qcCkP6NEPuF9CcnK5I-ufPjsh34laJN_X0aVHxlrSCRTcuVNdBlHJPhDZIUvEREh5VBuThlsgo_BghBpg0ddHeQysAHm-fvIzsJbjZge0NiahMLqHuR00&t=ffffffff949e5296:1) at Sys.Extended.UI.CalendarBehavior._switchView (ScriptResource.axd?d=NISXSzp 87hD3qcCkP6NEPuF9CcnK5I-ufPjsh34laJN_X0aVHxlrSCRTcuVNdBlHJPhDZIUvEREh5VBuThlsgo_BghBpg0ddHeQysAHm-fvIzsJbjZge0NiahMLqHuR00&t=ffffffff949e5296:1) at Sys.Extended.UI.CalendarBehavior.show (ScriptResource.axd?d=NISXSzp87hD3qcCkP6NEPuF9CcnK5I-ufPjsh34laJN_X0aVHxlrSCRTcuVNdBlHJPhDZIUvEREh5VBuThlsgo_BghBpg0ddHeQysAHm-fvIzsJbjZge0NiahMLqHuR00&t=ffffffff949e5296:1) at Sys.Extended.UI.CalendarBehavior._element_onfocus (ScriptResource.axd?d=NISXSzp87hD3qcCkP6NEPuF9CcnK5I-ufPjsh34laJN_X0aVHxlrSCRTcuVNdBlHJPhDZIUvEREh5VBuThlsgo_BghBpg0ddHeQysAHm-fvIzsJbjZge0NiahMLqHuR00&t=ffffffff949e5296:1) at HTMLInputElement. (MicrosoftAjax.js:6) at HTMLInputElement.b (MicrosoftAjax.js:6)

Staging:

Any ideas what may cause this? My guess would be some type of version mismatch somewhere, but I can't seem to find one. Let me know if additional information is required.

UPDATE: I have updated to AjaxControlToolkit 17.1.1 and still get the same error on my production server.

Answer 1

It looks like you are using v17.1.0, which has this bug: https://github.com/DevExpress/AjaxControlToolkit/issues/337

Try to update the latest v17.1.1 ( NuGet package ) and the error should gone.

Answer 2

I meet this problem. My suggestion: You can modify the format property of CalendarExtender to matching date format in textbox.

Wrong:

<asp:TextBox ID="tbxValidFrom" CssClass="form-input" runat="server" ReadOnly="True" TabIndex="2" Text="2017.08.03." />    
<ajaxToolkit:CalendarExtender runat="server" ID="ceValidFrom" TargetControlID="tbxValidFrom" ClearTime="True" FirstDayOfWeek="Monday" PopupPosition="BottomRight" Format="yyyy.MM.dd" Enabled="True" />

Solution:

<asp:TextBox ID="tbxValidFrom" CssClass="form-input" runat="server" ReadOnly="True" TabIndex="2" Text="2017.08.03." /> 
<ajaxToolkit:CalendarExtender runat="server" ID="ceValidFrom" TargetControlID="tbxValidFrom" ClearTime="True" FirstDayOfWeek="Monday" PopupPosition="BottomRight" Format="yyyy.MM.dd." Enabled="True" />

Answer 3

I got this same exception entering a bad date, ex: 2019-99-01. AjaxToolKit 17.1.1.0. The fix was to re-write the faulty function:

    Sys.Extended.UI.CalendarBehavior.prototype._parseTextValue = function (text) {
        // Converts a text value from the textbox into a date

        var value = null;
        if (text) {
            value = Date.parseLocale(text, this.get_format());
            if (value == null) value = new Date();  // fix: (the calendar wants the date in the associated textbox, but its invalid: 2019-99-01)

            // Initial code: value is null, un-caught exception
                //if (value.getFullYear() < 100) 
                //    value.setYear(value.getFullYear());
        }
        if (isNaN(value)) {
            value = null;
        }
        return value;
    };

At the beginning of my js script for the Web site.