Customized New, Edit, Display forms using JSlink. SharePoint OOTB date picker not closing popup after selecting date

Question

I have used JSLink to customize New, Edit and view form. Facing intermittent issue with OOTB date field. When I selects date field some times it is not closing calendar popup. I'm using IE 11.

(function () {

    document.write('<link rel="Stylesheet" type="text/css" href="../../SiteAssets/test.css" />');

    var formTemplate = {};

    formTemplate.Templates = {};

    formTemplate.Templates.View = TestNewFormView;

    formTemplate.Templates.OnPostRender = loadNewDocument;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate);

})();


function TestNewFormView(ctx) {

    var FormTable = "".concat("<div class=''>",

        "<td class='ms-formlabel'><div>{{HODatereceived}}</div></td>",

    )

    FormTable = NBPropFormTable.replace('{{HODatereceived}}', getSPFieldRender(ctx, 'HODatereceived'));

}

function getSPFieldRender(ctx, fieldName) {

    try {

        var fieldContext = ctx;

        var result = ctx.ListSchema.Field.filter(function (obj) {

            return obj.Name == fieldName;

        });

        fieldContext.CurrentFieldSchema = result[0];

        fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName];

        return ctx.Templates.Fields[fieldName](fieldContext);
    }

    catch (ex) {

    }
}

Answer 1

Test below jslink in my environment, it works fine(IE11 & chrome).

<script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(myCSRTest, 'clienttemplates.js');
        function myCSRTest () {
            //document.write('<link rel="Stylesheet" type="text/css" href="../../SiteAssets/test.css" />');
            var formTemplate = {};
            formTemplate.Templates = {};
            formTemplate.Templates.View = TestNewFormView;
            //formTemplate.Templates.OnPostRender = loadNewDocument;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate);
        }

        function TestNewFormView(ctx) {
            var formTable = "".concat("<table width='100%' cellpadding='5'>",

                "<tr>",
                "<td><div>Title</div></td>",
                "<td><div>{{TitleCtrl}}</div></td>",
                "<td><div>HODatereceived</div></td>",
                "<td><div>{{HODatereceivedCtrl}}</div></td>",
                "</tr>",
                "<tr>",
                "<td></td>",
                "<td><input type='button' value='Save' onclick=\"SPClientForms.ClientFormManager.SubmitClientForm('{{FormId}}')\" style='margin-left:0' ></td>",
                "</tr>",
                "</table>");
            formTable = formTable.replace("{{TitleCtrl}}", getSPFieldRender(ctx, "Title"));
            formTable = formTable.replace("{{HODatereceivedCtrl}}", getSPFieldRender(ctx, "HODatereceived"));
            formTable = formTable.replace("{{FormId}}", ctx.FormUniqueId);
            return formTable;
        }

        function getSPFieldRender(ctx, fieldName) {
            try {
                var fieldContext = ctx;
                var result = ctx.ListSchema.Field.filter(function (obj) {
                    return obj.Name == fieldName;
                });
                fieldContext.CurrentFieldSchema = result[0];
                fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName];
                return ctx.Templates.Fields[fieldName](fieldContext);
            }
            catch (ex) {
            }
        }
    </script>