SP2013 disable people picker and date field

Question

What is the easiest way to disable the people picker in SharePoint 2013 - without resorting to editing the display template in SharePoint designer?

I have tried several JQuery approaches but none of them seem to work.

I have tried the solution suggested here: How to make People Picker column Read only in SharePoint 2013

And while it does work in IE it doesn't seem to work in Chrome, on top of that the delete "X" on the people field pop up if I simply hit F5 in IE.

MY current code:

jQuery(document).ready(function($) {
    $("select[title='Indholdstype']").closest("tr").hide();
    //$(".sp-peoplepicker-delImage").css({ 'display' : 'none'});
    $(".sp-peoplepicker-delImage").prop("onclick", null); 
    $(".ms-dtinput").prop("onclick", null); 
    $(".sp-peoplepicker-editorInput").attr('disabled' , 'disabled');
    $(".sp-peoplepicker-topLevel").attr('disabled' , 'disabled');
    $(".ms-input").attr('disabled' , 'disabled');
});

Any suggestions?

Edit: This is the HTML:

<tr>
        <td width="113" class="ms-formlabel" nowrap="true" valign="top"><h3 class="ms-standardheader">
        <nobr>Byttes med<span title="Dette felt er obligatorisk." class="ms-accentText"> *</span></nobr>
    </h3></td>
        <td width="350" class="ms-formbody" valign="top">
        <!-- FieldName="Byttes med"
             FieldInternalName="ByttesMed"
             FieldType="SPFieldUser"
          -->
            <div dir="none"><div title="Byttes med" class="sp-peoplepicker-topLevel" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker" SPClientPeoplePicker="true"><input name="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_HiddenInput" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_HiddenInput" type="hidden" value='[{"Key":"i:0#.w|nchost\\ncmkl","DisplayText":"Morten","IsResolved":true,"Description":"i:0#.w|nchost\\ncmkl","EntityType":"","EntityGroupName":"","HierarchyIdentifier":null,"EntityData":{"Email":"mkl@nordiccomputer.dk","SPUserID":"2","AccountName":"i:0#.w|nchost\\ncmkl","PrincipalType":"User"},"MultipleMatches":[],"ProviderName":"","ProviderDisplayName":"","Resolved":true}]'><div class="sp-peoplepicker-autoFillContainer" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_AutoFillDiv" style="left: -1px; top: 26px;" InputElementId="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_EditorInput"></div><span class="sp-peoplepicker-initialHelpText ms-helperText" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_InitialHelpText" style="display: none;">Angiv et navn eller en mailadresse...</span><img class="sp-peoplepicker-waitImg" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_WaitImage" alt="Denne animation angiver, at handlingen er i gang. Klik for at fjerne det animerede billede." src="/_layouts/15/images/gears_anv4.gif?rev=23"><span class="sp-peoplepicker-resolveList" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_ResolvedList"><span class="sp-peoplepicker-userSpan" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0" sid="i:0#.w|nchost\ncmkl" resolveduser="true" data-sp-peoplepickerprocesseduser="true"><span class="sp-peoplepicker-userPresence" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0_PresenceContainer"></span><span title="Morten" class="ms-entity-resolved" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0_UserDisplay" style="max-width: 331px;">Morten</span><a title="Fjerne person eller gruppe Morten" class="sp-peoplepicker-delImage" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_i:0#.w|nchost\ncmkl_ProcessedUser0_DeleteUserLink" onkeydown="SPClientPeoplePickerProcessedUser.HandleDeleteProcessedUserKey(event); return true;" onclick="SPClientPeoplePickerProcessedUser.DeleteProcessedUser(this.parentNode); return false;" href="#">x</a></span></span><input title="Byttes med" class="sp-peoplepicker-editorInput" id="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_EditorInput" type="text" size="1" value="" autocorrect="off" autocomplete="off" autocapitalize="off" data-sp-peoplePickerEditor="true" AutoFillContainerId="ByttesMed_90904416-c085-4723-82c0-1ca1890faf54_$ClientPeoplePicker_AutoFillDiv"></div></div>



        </td>
</tr>

Answer 1

You could just render them as display fields using CSR:

Examples from code.msdn.microsoft.com

For User and Date fields it will look something like this, but read the article from msdn:

var prepareUserFieldValue = function (ctx) {
    var item = ctx['CurrentItem'];
    var userField = item[ctx.CurrentFieldSchema.Name];
    var fieldValue = "";

    for (var i = 0; i < userField.length; i++) {
        fieldValue += userField[i].EntityData.SPUserID + SPClientTemplates.Utility.UserLookupDelimitString + userField[i].DisplayText;

        if ((i + 1) != userField.length) {
            fieldValue += SPClientTemplates.Utility.UserLookupDelimitString
        }
    }

    ctx["CurrentFieldValue"] = fieldValue;
}

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

  Templates: {
       Fields: {
           "UserFieldInternalName": {
               EditForm: function(ctx) {
                   repareUserFieldValue(ctx);
                   return SPFieldUser_Display(ctx);
               },
               NewForm: function(ctx) {
                   repareUserFieldValue(ctx);
                   return SPFieldUser_Display(ctx);
               }                   
           },
           "DateFieldInternalName": {
               EditForm: function(ctx) {
                    return SPFieldDateTime_Display(ctx);
               },
               NewForm: function(ctx) {
                 return SPFieldDateTime_Display(ctx);  
               }
           }
       }
  }

});

Answer 2

You can disable people picker control via below code:

var inputuserfield = $("div[title='People Picker']"); 
var checkNamesImage = $("a[title='Check Names']");  
$(document).ready(function () { 
    inputuserfield.attr("contentEditable", false);
    checkNamesImage.hide();
}

This will disable all people picker controls on your page.