I have a 3 date picker fields. I have disabled the field but the date picker icon is fully functioned. Can any one tell me how to disable it's function?


To hide the datepicker image use css,

<style> .ms-dtinput > a { display: none; } </style>


Using pure JavaScript

<script type="text/javascript"> function clickDatePicker() { document.getElementsByTagName('a').onclick = null; } </script>

This will disable all date pickers on the page. I tested on item edit page with Script editor webpart.

| improve this answer | |
  • thank you,i don't want to hide but disable it – sandhya v Oct 11 '17 at 14:47
  • you welcome!. I updated my answer. Tested on my test environment. – Billy Oct 11 '17 at 15:45
  • I don't want to disable all...only 2 out of 3 should be disabled – sandhya v Oct 11 '17 at 17:28

try this,

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
$(“input[title$=’ShowFields’]”).click(function()//metion field names that you need to be in your form 

$(“input[title$=’datepicker1’]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();//mention the field names that you need to hide or disable from your form 
$(“input[title$=’datepicker2’]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();//mention the field names that you need to hide or disable from your form
$(“input[title$=’datepicker3’]”).parent(‘span’).parent(‘td’).parent(‘tr’).toggle();//mention the field names that you need to hide or disable from your form



try this too

How to make datepicker readonly from javascript?

try this too

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
<script type="text/javascript">   
$(function() {   
$( "td.ms-dtinput > input[id$='DateTimeFieldDate']" ).attr('readonly', 'readonly');    
$( "td.ms-dtinput > a" ).attr('onclick','').unbind('click');   });  
| improve this answer | |
  • It's not working.The date picker functionality is still not disabled – sandhya v Oct 11 '17 at 17:34
  • did you tried below-posted URL ..?(How to make datepicker read-only from javascript?) – karthik Oct 11 '17 at 18:33
  • It disables all date fields. I want to disable specific fields – sandhya v Oct 12 '17 at 15:11
  • replace id$='DateTimeFieldDate' with title$=’datepicker title’ $( "td.ms-dtinput > input[title$=’datepicker title’ ]" ).attr('readonly', 'readonly'); – karthik Oct 12 '17 at 17:08
  • Then also it's not working :( – sandhya v Oct 16 '17 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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