Is there any possibility to hide Sharepoint 2013 datepicker by some javascript API method call?

2 Answers 2


I don’t know if this is the best way to achieve your goal by using JQuery.

The SharePoint datePicker is composed by four elements and if you want to make the datePicker as read only you can set all his elements as read only :

  • Text input: to enter the date.
  • Button: that shows a calendar to get the user to select a date.
  • 2 dropDown lists: to select time (hours: minutes).

To disable all those elements you can use this code:

// Set text input to readOnly   
$( "td.ms-dtinput > input[id$='DateTimeFieldDate']" ).attr('readonly', 'readonly');

// Disable to onclick action on the button
$( "td.ms-dtinput > a" ).attr('onclick','').unbind('click');

// Disable the 2 select elements
$( "td.ms-dttimeinput > select[id$='DateTimeFieldDateHours']" ).attr('disabled', 'disabled');
$( "td.ms-dttimeinput > select[id$='DateTimeFieldDateMinutes']" ).attr('disabled', 'disabled');


enter image description here

PS : I'm using JQuery Selector to select nested element you can find more information on this page


After spending a week trying to figure out how to disable only one of the DatePickers when there are more than one on a sharepoint form, I managed to built a script which does that and since I did not find any example on any forum about it I decided to publish it here. The solution shows you how to disable a DatePicker with the title 'Second Date' which however can be changed to anything you like to suite your needs:

// Search for the input textbox of DatePicker by its title and get its Item ID 

var itemID = $(" input[title='Second Date'] ").attr("id");

// Trim the Item ID and keep the first part which is common for each element of this DatePicker

var itemCode = itemID.substring(0, itemID.indexOf('$'));

// Set text input to readOnly  

$( "[id^=" + itemCode + "] td.ms-dtinput > input[id$='Date']" ).attr('readonly', 'readonly');

// Disable the onclick action on the button

$( "[id^=" + itemCode + "] td.ms-dtinput > a" ).attr('onclick','').unbind('click');

// Disable the 2 time select elements

$( "[id^=" + itemCode + "] td.ms-dttimeinput > select[id$='DateHours']" ).attr('disabled', 'disabled');

$( "[id^=" + itemCode + "] td.ms-dttimeinput > select[id$='DateMinutes']" ).attr('disabled', 'disabled');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.