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 :-)

3 Answers 3


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? Commented Jun 6, 2016 at 6:37
  • u get the alert? Commented Jun 6, 2016 at 6:58
  • and is it working in developer tool? Commented Jun 6, 2016 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. Commented Jun 6, 2016 at 7:03
  • ok..try adding .attr("disabled","disabled") Commented Jun 6, 2016 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. Commented Jun 3, 2016 at 11:22
  • do you want it on OOTB form itself?
    – Gaurravs
    Commented Jun 3, 2016 at 11:37
  • Yes..On OOTB Form. Commented Jun 3, 2016 at 11:42
  • OOTB form you will need to do some customization using designer
    – Gaurravs
    Commented Jun 3, 2016 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 and acknowledge you have read our privacy policy.

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