Feedback
 
Did this article resolve your question/issue?

   

Your feedback is appreciated.

Please tell us how we can make this article more useful. Please provide us a way to contact you, should we need clarification on the feedback provided or if you need further assistance.

Characters Remaining: 1025

 


Article

After upgrade datepickers are not working

« Go Back

Information

 
Article Number000098887
EnvironmentProduct: Sitefinity
Version: 12.1
OS: All supported OS versions
Database: All supported Microsoft SQL Server versions
Question/Problem Description
After upgrading to Sitefinity 12.1, the date pickers in the Backend are not working. It is possible to select days 1 to 12, but if the date is 13th, once the focus from the field is lost, the date is not populated. There is an error in the browser's console.
Steps to Reproduce
Clarifying Information
The DateField has been extended in order to change the DateFormat, as described in the following blog post:
Progress Blogs, Change the time format of the date field when creating Events in Sitefinity https://www.progress.com/blogs/change-the-time-format-of-the-date-field-when-creating-events-in-sitefinity

This is happening only in the Classic interface. 
Error MessageTelerik.Web.UI.WebResource.axd:2709 Uncaught TypeError: Cannot read property 'getTime' of null
at Telerik.Sitefinity.Modules.Events.Web.EventsDetailExtensions._eventStartFieldValueChangedHandler (Telerik.Web.UI.WebResource.axd:2709)
at Array.<anonymous> (ScriptResource.axd:1)
at ScriptResource.axd:1
at Telerik.Sitefinity.Web.UI.Fields.DateField._datePickerOnPopupClosingHandler (Telerik.Web.UI.WebResource.axd:26149)
at HTMLInputElement.<anonymous> (ScriptResource.axd:1)
at HTMLInputElement.onClose (Telerik.Web.UI.WebResource.axd:26436)
at s._hideDatepicker (Telerik.Web.UI.WebResource.axd:830)
at HTMLDocument._checkExternalClick (Telerik.Web.UI.WebResource.axd:830)
at HTMLDocument.dispatch (ScriptResource.axd:3)
at HTMLDocument.r.handle (ScriptResource.axd:3)
--------------
Uncaught TypeError: Cannot read property 'getTime' of null
at Telerik.Sitefinity.Modules.Events.Web.EventsDetailExtensions._eventEndFieldValueChangedHandler (Telerik.Web.UI.WebResource.axd:2741)
at HTMLInputElement.<anonymous> (Telerik.Web.UI.WebResource.axd:2601)
at HTMLInputElement.dispatch (ScriptResource.axd:3)
at HTMLInputElement.r.handle (ScriptResource.axd:3)
Defect/Enhancement Number
Cause
A new function has been added in 12.1.7121, which isn't extended in the customized DateField file.
Resolution
Change the CustomDateField the following way:
<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
 
<!-- For Sitefinity version 11.0 and above, use the code snippet between start and end below --> 
<!-- start -->​ 
<sf:ResourceLinks id="ResourceLinks2" runat="server" UseBackendTheme="True" UseEmbeddedThemes="true">
    <sf:ResourceFile Name="Styles/jQuery/jquery-ui-timepicker-addon.css" />
    <sf:ResourceFile Name="Styles/jQuery/jquery.ui.datepicker.css" />
    <sf:ResourceFile Name="Styles/jQuery/jquery.ui.slider.css" />
    <sf:ResourceFile Name="Styles/jQuery/jquery.ui.theme.sitefinity.css" />
</sf:ResourceLinks>​
<!-- end -->


<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <Templates>
        <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
            <sf:SitefinityLabel id="titleLabel_read" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
            <sf:SitefinityLabel id="dateAsText" runat="server" WrapperTagName="div" HideIfNoText="false" DataFormat="dd/MM/yyyy hh:mm:ss " />
        </sf:ConditionalTemplate>
        <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
 
            <asp:Label ID="titleLabel_write" runat="server" CssClass="sfTxtLbl" AssociatedControlID="datePicker" />
            <asp:LinkButton ID="expandButton" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander"></asp:LinkButton>
            <asp:Panel ID="expandableTarget" runat="server" CssClass="sfFieldWrp">
                <asp:TextBox id="datePicker" runat="server" CausesValidation="false" AutoPostBack="false" CssClass="sfTxt" />
                <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
            </asp:Panel>
        </sf:ConditionalTemplate>
    </Templates>
</sf:ConditionalTemplateContainer>
<script>

    // This is the function that was added in 12.1.7121
    Telerik.Sitefinity.Web.UI.Fields.DateField.prototype.updateInputValue = function(dateTimePickerInput) {        
        var formattedValue;        
        orginalValue = this._datePicker.val();

        var day = orginalValue.substring(0, 2);
        var month = parseInt(orginalValue.substring(3, 5), 10) - 1;
        var year =  parseInt(orginalValue.substring(6, 10), 10);
        var hours = parseInt(orginalValue.substring(11, 13), 10);
        var mins = parseInt(orginalValue.substring(14, 16), 10);

        // If using AM/PM time uncomment below
        //var ampm =  orginalValue.substring(17, 19);
        // Add 12 hours for 24 hour time
        //if (ampm === 'PM') {
        //    hours = hours + 12;
        //}

        var newDateString = new Date(year, month, day, hours, mins);
        var datePickerValue = new Date(newDateString);

        var displayMode = this.get_dateTimeDisplayMode();
        if (datePickerValue instanceof Date && !isNaN(datePickerValue)) {
            switch (displayMode) {
            case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.DateTime:
                formattedValue = datePickerValue.format("dd/MM/yyyy HH:mm");
                break;
            case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.Date:
                formattedValue = datePickerValue.format("dd/MM/yyyy");
                break;
            case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.Time:
                formattedValue = datePickerValue.format("HH:mm");
                break;
            }
            dateTimePickerInput.val(formattedValue);
        } else {
            if (dateTimePickerInput.val()) {
                if (displayMode == Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.DateTime) {
                    try {
                        $.datepicker._base_parseDate(this.get_dateFormat(), dateTimePickerInput.value, null);
                    } catch (err) {
                        dateTimePickerInput.val("");
                    }
                }
            }
        }
    }

    Telerik.Sitefinity.Web.UI.Fields.DateField.prototype.set_datePickerFormat = function(dFormat, tFormat) {
        dFormat = 'dd/mm/yy';
        this._resetDateTimePickers();
        switch (this.get_dateTimeDisplayMode()) {
        case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.DateTime:
            this._setDateTimeMode(dFormat, tFormat);
            break;
        case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.Date:
            this._setDateMode(dFormat);
            break;
        case Telerik.Sitefinity.Web.UI.Fields.DateFieldDisplayMode.Time:
            this._setTimeMode(tFormat);
            break;
        }
    }
</script>

 
Workaround
Notes
Attachment 
Last Modified Date10/9/2019 7:13 AM