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.7121 - 12.2.7225
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.
After an upgrade to 12.2, while using the classic interface, when creating an event, the DateTime is not usable. The date picker will appear, but items cannot be selected. The modal date picker window just disappears and it is not possible to interact with it. 
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 NumberBug 264210
Cause
For more information about Bug 264210, see https://feedback.progress.com/Project/153/feedback/Details/264210

​​​​A new function has been added in 12.1.7121, which isn't extended in the customized DateField file.
Resolution
Fixed in:
Sitefinity Patch 12.2.7226.0

Refer to Knowledge Base Article 000076924, How to update Sitefinity to hotfix, internal build or a patch for instructions on how to download and install the fix.

An example of extending the _setDateTimeMode function after the upgrade:
<%@ 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>
    Telerik.Sitefinity.Web.UI.Fields.DateField.prototype._setDateTimeMode = function (dFormat, tFormat) {
        this._dateFormat = dFormat = "MM/dd/yy";
        // this._timeFormat = tFormat = 'hh:mm TT';

        this._datePicker = jQuery("#" + this._datePickerId).datetimepicker({
            dateFormat: dFormat,
            hourGrid: tFormat,
            timeFormat: 'hh:mm TT',
            minuteGrid: 10,
            beforeShow: this._datePickerOnPopupOpeningDelegate,
            onClose: this._datePickerOnPopupClosingDelegate,
            showOn: "focus",
            ampm: true,
            controlType: "select"
            });

            if (this.get_value() == null && this._datePicker.val()) {
                this._value = GetUserPreferences().sitefinityToUniversalDate(new Date(this._datePicker.val()));
            }

            this._setDateTimeCommand = "setDate";
            if (this.get_IsUtcOffsetModeClient()) {
                this._datePicker.datepicker(this._setDateTimeCommand, this.get_value() ? this.get_value() : "");
            }
            else {
                this.set_value(this.get_valueRegardingProvidedUtcOffset());
        }
    }
</script>
In the new versions, in order to set the DateTime format to the desired value, check the formatting options from the following:
- jQuery, Datepicker Widget - $.datepicker.formatDate(format, date, options) https://api.jqueryui.com/datepicker/#utility-formatDate
Workaround
For versions between 12.1.7121 and 12.2.7226, 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>

 
Notes
The amount of votes an item in the feedback portal has is taken into consideration when determining its priority. Vote for the item using the Like and Dislike buttons in the right-hand side menu to affect the priority it has. By casting a vote the voter will also be subscribed to a mailing list to receive notifications about changes of the item such as when it is fixed or implemented.

Progress Article:
000071820, How to change the time format of the date field when creating Events in Sitefinity
Attachment 
Last Modified Date2/27/2020 1:44 PM