We have OOTB New item form with date time field. We need to restrict users to select future date for Time field. So We want to disable (gray out) the future dates.

How we can achieve this? Any help will be appreciated :-)


You can do it by adding some javascript/jquery in the page. Today's date in calendar has the td class ms-picker-today. Take this class and then select all td after this class with class ms-picker-daycenter and apply css as disabled.

Try out, it should work.

  • thanks ankit for reply..i tried this one but its not working.. this is my code $(document).ready(function(){ $("td.ms-picker-today").nextAll("td.ms-picker-daycenter").prop('disabled', true); alert("disabled"); }); on page load todays date having same class 'ms-picker-daycenter' and i assume thats why its not working. but i also tried by replacing 'ms-picker-today' with 'ms-picker-daycenter' but still no luck. any idea? – SP Developer Jun 6 '16 at 6:37
  • u get the alert? – Ankit Kumar Jun 6 '16 at 6:58
  • and is it working in developer tool? – Ankit Kumar Jun 6 '16 at 6:58
  • Not getting alert. but when i use ".css("display","none")" instead of ".prop('disabled', true)", then i getting alert but td is not becoming display none. but display none is working on developer tool. – SP Developer Jun 6 '16 at 7:03
  • ok..try adding .attr("disabled","disabled") – Ankit Kumar Jun 6 '16 at 9:26

You can try to use the “Validation setting” for SharePoint list. Consider Start Date is your column which needs to validate.

Set the formula as “=[Start Date]<=Today()”

This will let user select future date, but will not allow him to submit the form. You can put your own custom message.

  • Thank you. But we already tried that one and client don't want like this. – SP Developer Jun 3 '16 at 11:22
  • do you want it on OOTB form itself? – Gaurravs Jun 3 '16 at 11:37
  • Yes..On OOTB Form. – SP Developer Jun 3 '16 at 11:42
  • OOTB form you will need to do some customization using designer – Gaurravs Jun 3 '16 at 11:44

I think, you can use jQuery bind to attach another event to the calendar control. to pre check if the selected date is greater that today.

I could see the code here, where you are supposed to apply the bind call.

<td class="ms-picker-daycenter" onmouseover="this.className='ms-picker-daycenterOn';" onmouseout="this.className='ms-picker-daycenter';" onclick="javascript:ClickDay('6\u002f10\u002f2018')"><a id="20180610" href="javascript:ClickDay('6\u002f10\u002f2018')"><span class="ms-accessible">June</span>10<span class="ms-accessible"> 2018</span></a></td>

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.