SharePoint DateTime field as Read-Only

Question

How do I make the SharePoint DateTime field read-only in the NewForm.aspx?

I'm using the below script to make the DateTimeColumn read-only. It's working fine in Firefox but not in IE9.

The calendar icon onclick is not working in IE for date selection.

<script type="text/javascript" src="../../SiteAssets/jquery-1.9.0.js" />
<script>
$(document).ready(function () {
    $('input[title="DateTimeColumn"]').attr("disabled","disabled");
});
</script>

Answer 1

If you only want to prevent the contents of the object from being changed, use the readOnly property instead of the disabled property:

$('input[title="DateTimeColumn"]').attr("readonly","readonly");

I strongly suggest do not use disabled attribute with DateTimeControl in SharePoint. It causes different behavior in browsers, see the explanation below.

---

The explanation why Calendar is loaded in FF, Chrome and is not loaded in IE

When Calendar icon is clicked the page that contains Calendar is loaded using Ajax request. See function clickDatePickerHelper in DatePicker.js file for more details.

Before the loading of Calendar the following checking is taking place:

 var f = document.getElementById(d);  // get input element for input element that contains Calendar value
 if (f != null && f.isDisabled)
      return;

Pay attention to the condition f.isDisabled here. Property isDisabled for element is always undefined in FF, Chrome but in IE it is defined depending on disabled attribute value for input element (for disabled it is true,for not disabled is false). It means that f != null && f.isDisabled always returns false no matter is input element attribute set to readonly or not in Chrome and FF

---

Differences between Disabled attribute and Read Only Attribute (source)

Key Differences

The Disabled attribute

• Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to form check boxes that are not checked.)

• Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer 5.5 is particularly nasty about this.

• Disabled form elements do not receive focus.

• Disabled form elements are skipped in tabbing navigation.

The Read Only Attribute

• Not all form elements have a readonly attribute. Most notable, the , , and elements do not have readonly attributes (although thy both have disabled attributes)

• Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)

• Form elements with the readonly attribute set will get passed to the form processor.

• Read only form elements can receive the focus

• Read only form elements are included in tabbed navigation.

Answer 2

In order to use what the product offers to you, you could update the field with SetShowInNewForm(false)

https://msdn.microsoft.com/EN-US/library/microsoft.sharepoint.client.field.setshowinnewform.aspx

Answer 3

Try using this:

$('input[title="Date field name"]').attr("readonly","readonly");

$('input[title="Date field name"]').parent().next().hide();